CODEWITHSUNDEEP
apache-flexeventsdynamicsliderfusioncharts
Goysar
Goysar

Reputation: 529

Dynamically Change Fusion Chart Value with Slider Event in flex

I am having a set of slider for each bar in the graph. I have bindded all the sliders with their corresponding bars. When i change the value of slider the value in the ArrayCollection changes and i have also used

singleData.refresh();

but the values in the chart remains unchanged. How can i update the values in the chart with the change in values of the slider.

Here is my code:

<mx:Script>
    <![CDATA[
        import mx.events.SliderEvent;
        import mx.collections.ArrayCollection;

        [Bindable]
        private var singleData:ArrayCollection=new ArrayCollection([
               {label:'Diego', value:'22'},
               {label:'Steve', value:'20'},
        ]);

        private function updateChart(event:SliderEvent, index:Number):void{
            singleData.getItemAt(index).value = String(event.value);
            singleData.refresh();
        } 
    ]]>
</mx:Script>


<ns1:FusionCharts x="10" y="10" FCChartType="Column3D" width="500">  
    <ns1:FCChartData  FCParams="{chartParam}" FCData="{singleData}" />
</ns1:FusionCharts>

<mx:VBox x="10" y="318">
    <mx:HBox>
        <mx:Label text="Diego:" width="100"/>
        <mx:HSlider id="SliderDiego" change="{updateChart(event,0)}" liveDragging="true" value="{singleData.getItemAt(0).value}" minimum="0" maximum="100" width="120"/>                    
    </mx:HBox>
    <mx:HBox>
        <mx:Label text="Steve:" width="100"/>
        <mx:HSlider id="SliderSteve" change="{updateChart(event,1)}" liveDragging="true" value="{singleData.getItemAt(1).value}" minimum="0" maximum="100" width="120"/>                    
    </mx:HBox>
</mx:VBox>

Upvotes: 1

Views: 1952

Answers (1)

sudipto
sudipto

Reputation: 2482

The charts do not retains the binding after rendering. In update chart function set the new data again and render chart. Before that also set an id to the chart.

<ns1:FusionCharts id="FC1" x="10" y="10" FCChartType="Column3D" width="500">

Now in script do this:

private function updateChart(event:SliderEvent, index:Number):void{
        singleData.getItemAt(index).value = String(event.value);
        singleData.refresh();
        FC1.FCData(singleData);
        FC1.FCParams(chartparam);
        FC1.FCRender(); 
}

Referenced from : http://www.fusioncharts.com/flex/docs/charts/Contents/case_changeData.html

Upvotes: 1

Related Questions