Flex LineChart - How To Create LineSeries From Unique Values In An ArrayCollection

Question

I have been trying to figure out a way to create a LineChart that contains numerous LineSeries based off data in an ArrayCollection.

To be more specific, let's say that we have an ArrayCollection as such:

public var myArray:ArrayCollection=new ArrayCollection([{State: "Georgia", Year: "2011", Percent: 18}, {State: "Georgia", Year: "2010", Percent: 10}, {State: "Maryland", Year: "2009", Percent: 15}, {State: "Maryland", Year: "2008", Percent: 15}]);

I want to create a LineChart that contains two lines: one for Georgia and one for Maryland. The line for Georgia would contain 2011 and 2010 data on the single line. The Maryland line would contain 2009 and 2008 data on the single line.

I was thinking that I would probably have to create the LineSeries dynamically, but not sure how to get the ArrayCollection to group the data based off the states.

Any suggestions would be helpful. Thanks

Answer 1

Not certain if this is the cleanest way to do it, but here is what I came up with:

<fx:Script>
    <![CDATA[
        import mx.charts.series.LineSeries;
        import mx.collections.ArrayCollection;

        [Bindable]
        private var appData:ArrayCollection=new ArrayCollection([{State: "Georgia", Year: 2000, Percent: 15}, {State: "Georgia", Year: 2001, Percent: 12}, {State: "Georgia", Year: 2002, Percent: 5}, {State: "Maryland", Year: 1999, Percent: 12}, {State: "Maryland", Year: 2000, Percent: 7}]);

        protected function creationComplete(event:Event):void
        {
            var states:Array=new Array("Georgia", "Maryland");
            var series:Array=new Array();

            for each (var state:Object in states)
            {
                var data:ArrayCollection=new ArrayCollection();
                var ls:LineSeries=new LineSeries();

                for (var i:int=0; i < appData.length; i++)
                {
                    var currItem:String=appData.getItemAt(i).State;

                    if (currItem == state)
                    {
                        data.addItem(appData.getItemAt(i));
                    }
                }

                ls.yField="Percent";
                ls.xField="Year";
                ls.displayName=state.toString();
                ls.dataProvider=data;
                series.push(ls);
            }

            linechart.series=series;
        }
    ]]>
</fx:Script>

<mx:Panel title="US States Data"
          height="100%"
          width="100%"
          layout="horizontal">

    <mx:LineChart id="linechart"
                  height="100%"
                  width="100%"
                  paddingLeft="5"
                  paddingRight="5"
                  showDataTips="true"
                  dataProvider="{appData}">

        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="Year"/>
        </mx:horizontalAxis>

    </mx:LineChart>

    <mx:Legend dataProvider="{linechart}"/>

</mx:Panel>

Answer 2

Check out this example. In a nutshell, you need to give each series a dataFunction as you create it.

Edit: Actually, your data is simple enough you can probably use xField/yField.