3 Replies Latest reply on Jan 17, 2008 10:48 AM by kilyas2007

    x axis to scale

    kilyas2007
      I am retrieving certain data in an xml format and rendering it in the form of a line chart. The xml looks something like this
      <item id="sale">
      <spread sale="5.0830" months="3" />
      <spread sale="5.1380" months="6" />
      <spread sale="4.8630" months="24" />
      <spread sale="4.7370" months="60" />
      <spread sale="4.7490" months="120" />
      <spread sale="4.8420" months="360" />
      </item>

      Now when I display them in a graph months being the x axis, flex divides the x axis into 5 equal parts. So the distance between 3 and 6 months is the same as between 120 and 360 months. I on the other hand want it to be scaled as per the values i.e., 3 and 6 should be way closer to each other cause the difference is 3 while 120and 360 should be apart since difference is 240. Is there a way I can achieve that with Flex?
        • 1. Re: x axis to scale
          kilyas2007 Level 1
          Any thoughts?
          • 2. x axis to scale
            chris.huston.t10 Level 3
            You need to convert your String values to numerics and then set a LinearAxis. Here is an example using your data:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init_app()">
            <mx:Script>
            <![CDATA[
            import mx.collections.ArrayCollection;

            private var salesXML:XML = <root>
            <item id="sale">
            <spread sale="5.0830" months="3" />
            <spread sale="5.1380" months="6" />
            <spread sale="4.8630" months="24" />
            <spread sale="4.7370" months="60" />
            <spread sale="4.7490" months="120" />
            <spread sale="4.8420" months="360" />
            </item>
            </root>;

            private function init_app():void {
            var salesAC:ArrayCollection = new ArrayCollection();
            var salesObj:Object;
            for each (var spread:XML in salesXML.item.(@id=='sale').spread) {
            salesObj = new Object();
            salesObj.sale = Number(spread.@sale);
            salesObj.months = int(spread.@months);
            salesAC.addItem(salesObj);
            }
            linearChart.dataProvider = salesAC;
            }
            ]]>
            </mx:Script>
            <mx:LineChart id="linearChart" height="400" width="600" showDataTips="true" x="10" y="10">
            <mx:horizontalAxis>
            <mx:LinearAxis title="months"/>
            </mx:horizontalAxis>
            <mx:verticalAxis>
            <mx:LinearAxis minimum="4.4" maximum="5.4"/>
            </mx:verticalAxis>
            <mx:series>
            <mx:LineSeries yField="sale" xField="months" displayName="Sale"/>
            </mx:series>
            </mx:LineChart>
            </mx:Application>

            I hope this helps.

            Vygo
            • 3. Re: x axis to scale
              kilyas2007 Level 1
              Thanks a ton. I had actually tried using numbers but it didn't work. But when I compared your code (working) with mine which was not, interestingly what came out was.

              <mx:LinearAxis title="months"/>

              instead of

              <mx:CategoryAxis categoryField="months"/>

              This modification fixed it. Thanks again!!!!!!