Clearing/Emptying a lineChart in Flex

Question

I have a line chart in flex with a dateTime axis. I am setting the dataprovider to that linechart via actionscript. The graph gets drawn. The problem occurs when i assign a null to the dataprovider so that the graph becomes empty.

Actual code looks similar to the code below :

var actualValues:XMLList=flowChartDP.upFlows;
var localSeries1:LineSeries = new LineSeries();
localSeries1.dataProvider = actualValues;
localSeries1.yField = "flow";
localSeries1.xField = "time";
localSeries1.setStyle("form","curve");
var currentSeries1:Array =lineChart.series;
currentSeries1.push(localSeries1);
lineChart.series = currentSeries1;
var actualValues2:XMLList=flowChartDP.downFlows;
var localSeries2:LineSeries = new LineSeries();
localSeries2.dataProvider = actualValues2;
localSeries2.yField = "flow";
localSeries2.xField = "time";
localSeries2.setStyle("form","curve");
var currentSeries2:Array =lineChart.series;
currentSeries2.push(localSeries2);
lineChart.series = currentSeries2;

And I will be adding two more series exactly in the samefashion to the lineChart.Although i guess not the best way of writung the code this one works fine. The problem is with resetting the graph.

I have a button which when clicked does: lineChart.dataprovider=null; lineChart.series=null;

But my flash player(FP 10 debugger version) throws up the following error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at mx.charts::AxisRenderer/measureHorizontalGutters()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\AxisRenderer.as:2275]
    at mx.charts::AxisRenderer/calcRotationAndSpacing()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\AxisRenderer.as:1889]
    at mx.charts::AxisRenderer/adjustGutters()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\AxisRenderer.as:1565]
    at mx.charts.chartClasses::CartesianChart/updateAxisLayout()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\chartClasses\CartesianChart.as:2133]
    at mx.charts.chartClasses::CartesianChart/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\chartClasses\CartesianChart.as:1391]
    at mx.core::UIComponent/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8531]
    at mx.managers::LayoutManager/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:663]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:736]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]

What is the solution? It doesn't throw the error when

lineChart.series=null;

is removed. But the statement

lineChart.dataprovider=null;

doesnt make the chart empty either.

Answer 1

Below is a simple application I created to re-create your issue. Setting the dataProvider to null does clear the chart without any exceptions for me. Run it and see. I say your problem is somewhere else.

<?xml version="1.0" encoding="utf-8"?>
<s:Application
   xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark"             
   xmlns:mx="library://ns.adobe.com/flex/mx" >

    <fx:Script><![CDATA[

        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
            {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
            {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
        ]);


        protected function button1_clickHandler(event:MouseEvent):void
        {
            myChart.dataProvider = null;

        }

    ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>


    <mx:Panel title="Line Chart">
        <mx:LineChart id="myChart" 
                      dataProvider="{expenses}" 
                      showDataTips="true"
                      >
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"
                    />
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries 
                    yField="Profit" 
                    displayName="Profit"
                    />
                <mx:LineSeries 
                    yField="Expenses" 
                    displayName="Expenses"
                    />
            </mx:series>
        </mx:LineChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>

    <s:Button click="button1_clickHandler(event)" label="Clear" />

</s:Application>