Question

first question here.
I have a BarChart showing several normal bars and a BarSeries, like this:

<mx:BarChart id="barchart" dataProvider="{model.myList}" type="clustered">
    <mx:horizontalAxis>
        <mx:LinearAxis autoAdjust="true"/>
    </mx:horizontalAxis>
    <mx:verticalAxis>
        <mx:CategoryAxis categoryField="name"/>
    </mx:verticalAxis>
    <mx:series>
        <mx:BarSeries dataProvider="{model.myList}" xField="myValue"/>
    </mx:series>
</mx:BarChart>

When a user clicks on a button, i need to calculate some values, put them on the “myCalculatedValue” and add another BarSeries as a comparison. I’m doing this:

var barSerie:BarSeries = new BarSeries();
barSerie.dataProvider = model.myList;
barSerie.xField = "myCalculatedValue";
barchart.series.push(barSerie);

But the BarChart does not change at all. Is there some way to refresh the chart after adding the new BarSeries?

Answer 1

The short answer is to use this code:

var barSerie:BarSeries = new BarSeries();
barSerie.dataProvider = model.myList;
barSerie.xField = "myCalculatedValue";
var allSeries:Array = barchart.series;
allSeries.push(barSerie);
barchart.series = allSeries;

---

The LONG answer, to give you an understanding of how this works:

The way flex knows when to refresh a ui component that is data backed, such as a chart, is on the function set dataProvider property, or equivalent (in this case series).

Here is the code from mx.charts.chartClasses.ChartBase:

public function set series(value:Array /* of Series */):void
{
    value = value == null ? [] : value;
    _userSeries = value;

    var n:int = value.length;
    for (var i:int = 0; i < n; ++i)
    {
        if (value[i] is Series)
        {
            (value[i] as Series).owner = this;                
        }
    }

    invalidateSeries();
    invalidateData();
    legendDataChanged();
}

Notice that the relevant “invalidate” methods are called at the end of the set method.
If you say barChart.series.push(x), the set series method is never called, only the getter. Therefore in order to force the chart to know there was a change to the series, you need to assign a new value to the series.

It is worth pointing out that even assigning the series to itself will cause an invalidate, although it isn’t good coding
barChart.series = barChart.series