Programatically creating series in a Flex chart

Continuing on the previous post about charting, I ran into a situation that has been documented very little among fellow Flex bloggers. I tried to programatically create multiple series in a single chart.

At first glance it seems simple enough, you figure you can just instantiate a new series, define the fields for the axis and push it onto your series array.

This works super awesome for the first series you create, but none after. So I tried setting up multiple series in MXML just to make sure my chart could handle it:

Now my chart shows 2 series! Yet when I tried to do the same thing in actionscript it just couldnt handle it.

It turns out that the series property of the chart is an Array, not an ArrayCollection; therefore, it does not get CollectionEvents on it to know that it has been updated when you push an extra item. In order to alter the series Array, you have to set it to a new instance of an Array to get the chart to redraw.

So I ended up creating an Array object called newSeries, cloning the values in the series Array into the newSeries array, then adding the new series object into the newSeries array and resetting the entire series property on the chart.

Comment

1 Response to “Programatically creating series in a Flex chart”


  1. 1 jeremy

    Hello Lauren.

    Instead of resetting all yyour serie, with many lines of code and maybe more time taken by flex top reset everything you cazn slice the serie like this:

    this.chart.series = mainChart.series.slice(0,this.chart.series.length);

    Flex is going to think that the dataProvider of your chart has been sliced, and the serie is automaticly updated.

    But you method works also :)

Leave a Reply