Nov 8

Flex LineChart with a Single Dimensional Array

Posted by admin

This one is a bit more complicated. First the code:

    <mx:Array id="bge">
    </mx:Array>
        <mx:LineChart id="myChart" backgroundElements="{bge}" dataProvider="{bge}" showDataTips="false" width="100%" height="95%" color="#FFFFFF" fontSize="12" left="0" top="0">
            <mx:horizontalAxis>
                <mx:CategoryAxis ticksBetweenLabels="false" id="a1" dataProvider="{results}"  />
            </mx:horizontalAxis>
  			<mx:verticalAxis> 
                <mx:LinearAxis  interval="50" id="vaxis" minimum="-53" maximum="55" baseAtZero="false" title=""/>
            </mx:verticalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer tickPlacement="none" showLabels="false" axis="{a1}" showLine="false"/>
            </mx:horizontalAxisRenderers>
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer tickPlacement="none" showLabels="false" axis="{a1}" showLine="false" />
            </mx:verticalAxisRenderers>
            <mx:series>
                <mx:LineSeries alpha=".3" dataProvider="{results}" lineStroke="{weighter}" form="curve" />
            </mx:series>
        </mx:LineChart>

The first tags do nothing but create an empty array for the LineChart to Graph off of.

The LineChart line gives us an empty table, with no background elements based on an empty array. It does not show datatips and is 100% wide on the panel. I’m sure you can figure the rest out on that line.

This line is important:

            <mx:horizontalAxis>
                <mx:CategoryAxis ticksBetweenLabels="false" id="a1" dataProvider="{results}"  />
            </mx:horizontalAxis>

That causes our ticks to be invisible and it gives us an id for use later. The dataProvider finally gives us the data from our first array with values: results.

The vertical axis tags do nothing extraordinary but base at zero, that property allows you to set the minimum to less than zero.

Down to series, it gives us the data line to use with the data, and it gives the line a 33% see through quality. linestroke refers to this:



which can be anywhere.


So there you have it, a line graph, no lines, no axis and using a single dimensional array.

		

		
		

		

			Date November 8th, 2009
			Filed in Flex 
		

		No Comments »		

		
	

	

		



   
		
		
	 



Leave a Reply