1 Reply Latest reply on May 1, 2009 11:03 PM by thebouv

    Removing item from a stacked AreaChart and updating chart values

    azilaga Level 1

      I have a stacked AreaChart with 5 items fed from an XML file as an ArrayCollection.  What I would like to do is to have checkboxes toggle each of the 5 items on or off the chart.  When the a chart is toggled off, I would like for the chart to be redrawn without that particular AreaSeries.  This should also update the toolTip data this time showing only the remaining checked items. I have tried AreaSeries1.visible = false, AreaSeries1.enabled = false, areaChart.removeChile(AreaSeries1) to no success.  Any ideas would be appreciated because I'm stuck.

       

      Here's the pertinent code:

       

      Main.mxml

      -------------------------------------------------------------

      <mx:Canvas id="mainCanvas" width="760" height="600" backgroundColor="#ffffff" x="0" y="0">
         
          <mx:Canvas x="10" y="12" width="740" height="440" id="chartContainer"
              borderColor="#CCCCCC" borderStyle="solid" borderThickness="1">
             
              <mx:AreaChart id="stackedChart" x="0" y="0" height="436" width="738" type="stacked"
                  dataProvider="{arr_data}" showDataTips="true">
                     
                  <mx:series>
                      <mx:AreaSeries id="AreaSeries1" displayName="AreaSeries 1" yField="AreaSeries_1" />
                      <mx:AreaSeries id="AreaSeries2" displayName="AreaSeries 2" yField="AreaSeries_2"  />
                      <mx:AreaSeries id="AreaSeries3" displayName="AreaSeries 3" yField="AreaSeries_3"  />
                      <mx:AreaSeries id="AreaSeries4" displayName="AreaSeries 4" yField="AreaSeries_4" />
                      <mx:AreaSeries id="AreaSeries5" displayName="AreaSeries 5" yField="AreaSeries_5" />
                  </mx:series>
              </mx:AreaChart>
          </mx:Canvas>
          <mx:Canvas x="11" y="460" width="740" height="130" id="select"
               horizontalScrollPolicy="off" verticalScrollPolicy="off"
               >
              <mx:VBox width="737" height="20"
                  borderStyle="solid" borderThickness="1" borderColor="#C0C0C0"
                  horizontalAlign="left" verticalAlign="top" y="-1" x="-1" backgroundColor="#CCCCCC">
                  <mx:Text text="TOGGLE DATA" color="#FFFFFF" fontWeight="bold"/>
              </mx:VBox>
              <mx:CheckBox id="cb_as1" x="10" y="27" label="AreaSeries 1" selected="true" click="toggleCharts();" />
              <mx:CheckBox id="cb_as2" x="159" y="27" label="AreaSeries 2" selected="true" click="toggleCharts();" />
              <mx:CheckBox id="cb_as3" y="27" label="AreaSeries 3" selected="true" click="toggleCharts();" />
              <mx:CheckBox id="cb_as4" x="492" y="27" label="AreaSeries 4" selected="true" click="toggleCharts();" />
              <mx:CheckBox id="cb_as5" x="329.5" y="57" label="AreaSeries 5" selected="true" click="toggleCharts();" />
          </mx:Canvas>
      </mx:Canvas>

       

       

       

      checkboxToggle.as

      ------------------------------------------------------------

      // ActionScript file

       

          public function toggleCharts():void {
         
                if (cb_as1.selected == true) {
                    AreaSeries1.visible = true;
                }
                else if (cb_as1.selected == false) {
                //    stackedChart.removeChild(AreaSeries1);
                    AreaSeries1.visible = false;
                    AreaSeries1.enabled = false;
                }
               
                if (cb_as2.selected == true) {
                    AreaSeries2.visible = true;
                }
                else if (cb_as2.selected == false) {
                    AreaSeries2.visible = false;
                }
               
                if (cb_as3.selected == true) {
                    AreaSeries3.visible = true;
                }
                else if (cb_as3.selected == false) {
                    AreaSeries3.visible = false;
                }
               
                if (cb_as4.selected == true) {
                    AreaSeries4.visible = true;
                }
                else if (cb_as4.selected == false) {
                    AreaSeries4.visible = false;
                }
               
                if (cb_as5.selected == true) {
                    AreaSeries5.visible = true;
                }
                else if (cb_as5.selected == false) {
                    AreaSeries5.visible = false;
                }
               
            }