adobe flex Using multiple axes in chart

adobe flex Using multiple axes in chart

Postby haretu » Wed Mar 30, 2011 10:01 am

To use multiple axes in a chart, you first define the chart's series and their axes. For example, for a chart that mixes columns with a line, you would have a ColumnSeries and LineSeries.

You then define the axis renderers, and bind their axis properties to the series' axes. In this case, you define two vertical axis renderers, and bind them to the LinearAxis objects.
Note that you control the location of the axis by using the placement property of the AxisRenderer. For vertical axis renderers, valid values are left and right. For horizontal axis renderers, valid values are top and bottom.

Axes can be independent of the series definition, too. For example, you can also point more than one series to the same axis.


Code: Select all
<?xml version="1.0"?>
<!-- charts/MultipleAxes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
      public var SMITH:ArrayCollection = new ArrayCollection([
        {date:"22-Aug-05", close:41.87},
        {date:"23-Aug-05", close:45.74},
        {date:"24-Aug-05", close:42.77},
        {date:"25-Aug-05", close:48.06},
     ]);

     [Bindable]
      public var DECKER:ArrayCollection = new ArrayCollection([
        {date:"22-Aug-05", close:157.59},
        {date:"23-Aug-05", close:160.3},
        {date:"24-Aug-05", close:150.71},
        {date:"25-Aug-05", close:156.88},
     ]);

  ]]></mx:Script>

  <mx:Panel title="Column Chart With Multiple Axes">
     <mx:ColumnChart id="myChart" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis id="h1" categoryField="date"/>
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer placement="bottom" axis="{h1}"/>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxisRenderers>
            <mx:AxisRenderer placement="left" axis="{v1}"/>
            <mx:AxisRenderer placement="left" axis="{v2}"/>
        </mx:verticalAxisRenderers>

        <mx:series>
           <mx:ColumnSeries id="cs1"
                horizontalAxis="{h1}"
                dataProvider="{SMITH}"
                yField="close"
                displayName="SMITH"
            >
                <mx:verticalAxis>
                   <mx:LinearAxis id="v1" minimum="40" maximum="50"/>
                </mx:verticalAxis>           
           </mx:ColumnSeries>           
           <mx:LineSeries id="cs2"
                horizontalAxis="{h1}"
                dataProvider="{DECKER}"
                yField="close"
                displayName="DECKER"
            >
                <mx:verticalAxis>
                    <mx:LinearAxis id="v2" minimum="150" maximum="170"/>           
                </mx:verticalAxis>
           </mx:LineSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
Attachments
Screen shot 2011-03-30 at 10.00.57 AM.png
Screen shot 2011-03-30 at 10.00.57 AM.png (35.44 KiB) Viewed 802 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron