title: Dynamically Change Fusion Chart Value with Slider Event in flex
body: <p>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 </p>
  
  <blockquote>
    <p>singleData.refresh();</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Here is my code:</p>
  
  
  
  <pre><code>&lt;mx:Script&gt;
      &lt;![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();
          } 
      ]]&gt;
  &lt;/mx:Script&gt;
  
  
  &lt;ns1:FusionCharts x="10" y="10" FCChartType="Column3D" width="500"&gt;  
      &lt;ns1:FCChartData  FCParams="{chartParam}" FCData="{singleData}" /&gt;
  &lt;/ns1:FusionCharts&gt;
  
  &lt;mx:VBox x="10" y="318"&gt;
      &lt;mx:HBox&gt;
          &lt;mx:Label text="Diego:" width="100"/&gt;
          &lt;mx:HSlider id="SliderDiego" change="{updateChart(event,0)}" liveDragging="true" value="{singleData.getItemAt(0).value}" minimum="0" maximum="100" width="120"/&gt;                    
      &lt;/mx:HBox&gt;
      &lt;mx:HBox&gt;
          &lt;mx:Label text="Steve:" width="100"/&gt;
          &lt;mx:HSlider id="SliderSteve" change="{updateChart(event,1)}" liveDragging="true" value="{singleData.getItemAt(1).value}" minimum="0" maximum="100" width="120"/&gt;                    
      &lt;/mx:HBox&gt;
  &lt;/mx:VBox&gt;
  </code></pre>
  
  <p></p>