0 Replies Latest reply on Jan 22, 2008 12:30 PM by azilaga

    Toggle chart series on/off

    azilaga
      Hi guys,

      I'm just getting my feet wet with Flex, and not familiar with it's programming having been a CF developer for most of my career, so I'm seeking guidance. Any help is greatly appreciated.

      I have a flex chart with three different series. I'd like to toggle two of the series on/off with a checkbox. I know I can set the visible properties for each of the series to "false", but I'd like the charts to toggle instead. Thanks!

      Here's the code. Parts have been cut off to fit in this post:

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="100%" height="100%"
      initialize="latest.send();OneMo.send();ThreeMo.send();SixMo.send();OneYr.send();ThreeYr.s end();FiveYr.send();AllYrs.send();"
      viewSourceURL="srcview/index.html" backgroundColor="0xFFFFFF">

      <mx:Script>
      <![CDATA[
      import flash.net.URLRequest;
      import flash.net.navigateToURL;
      import flash.net.URLVariables;
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;
      import mx.charts.series.LineSeries;
      import mx.events.*;
      import mx.charts.chartClasses.CartesianChart;
      import mx.formatters.DateFormatter;
      import flash.events.MouseEvent;

      private var dp:Object = new Object;


      //labels
      private var chartTitle:String = 'Funds rate | ';
      private var ffTitle:String = 'Daily Effective Rate';
      private var ffTargetRate:String = 'Target Rates';

      /*
      private function toggle():void{
      if(fs.selected == true){
      this.goFullScreen();
      } else {
      this.exitFullScreen();
      }
      }

      */

      private function toggleChart():void {
      if (cb_ff.selected == true) {
      var dp:String = 'OneYr.lastResult.data.result';
      }
      }
      ]]>

      </mx:Script>

      <!-- define states and transitions -->


      <!-- call http services -->

      <mx:Number id="numItems">{OneYr.lastResult.data.result.length}</mx:Number>
      <mx:DateFormatter id="dateDisplay" formatString="MMMM D, YYYY" />

      <mx:Canvas id="ch_Canvas" width="100%" height="100%" >

      <mx:Panel id="mainPanel" width="100%" height="100%" layout="absolute" horizontalCenter="0"
      resizeEffect="Resize" title="{chartTitle} {latest.lastResult.data.result.value}" top="-1">

      <mx:HBox width="95%" top="10" height="32" id="hb_linkbar" horizontalCenter="-12">
      <mx:Legend dataProvider="{ch_colChart}" width="444" height="32"/>
      <mx:LinkButton label="1m" id="btn_OneMo" click="currentState='st_1Mo';dp='{OneYr.lastResult.data.result}';" textAlign="right"/>
      <mx:LinkButton label="3m" id="btn_ThreeMo" click="currentState='st_3Mo'" textAlign="right"/>
      <mx:LinkButton label="6m" id="btn_SixMo" click="currentState='st_6Mo'" textAlign="right"/>
      <mx:LinkButton label="1y" id="btn_OneYr" enabled="false" textAlign="right"/>
      <mx:LinkButton label="3y" id="btn_ThreeYr" click="currentState='st_3Yr'" textAlign="right"/>
      <mx:LinkButton label="5y" id="btn_FiveYr" click="currentState='st_5Yr'" textAlign="right"/>
      <mx:LinkButton label="All" id="btn_AllYr" click="currentState='st_all'"/>
      </mx:HBox>

      <mx:HBox width="95%" top="50" left="10" height="75%">
      <mx:LineChart id="ch_colChart" width="100%"
      dataProvider="{OneYr.lastResult.data.result}" showDataTips="true"
      top="61" height="100%" horizontalCenter="-9">

      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{OneYr.lastResult.result.date}"
      categoryField="date" title="Date" />
      </mx:horizontalAxis>

      <mx:horizontalAxisRenderer>
      <mx:AxisRenderer canDropLabels="true"
      labelRotation="45"
      canStagger="true"
      placement="bottom"
      tickPlacement="inside"
      tickLength="5"
      />
      </mx:horizontalAxisRenderer>
      <mx:verticalAxisRenderer>
      <mx:AxisRenderer
      labelRotation="45"
      canDropLabels="true"
      tickPlacement="inside"
      tickLength="5" />
      </mx:verticalAxisRenderer>

      <mx:series>
      <mx:Array id="arr_chart">

      <mx:LineSeries yField="target"
      displayName="{ffTargetRate}"
      interpolateValues="true">
      <mx:lineStroke>
      <mx:Stroke weight="1" color="0x5D7CBA" alpha="1" />
      </mx:lineStroke>
      </mx:LineSeries>

      <mx:LineSeries yField="value" displayName="{ffTitle}"
      interpolateValues="true" form="segment"
      lineSegmentRenderer="mx.charts.renderers.ShadowLineRenderer">
      <mx:lineStroke>
      <mx:Stroke weight="2" color="0x990000" alpha=".75" />
      </mx:lineStroke>
      </mx:LineSeries>

      <mx:ColumnSeries id="highLow" displayName="High/Low" yField="high" minField="low"
      interactive="true" columnWidthRatio=".30" alpha=".38">
      <mx:fill>
      <mx:SolidColor color="gray" alpha=".65" />
      </mx:fill>
      <mx:stroke>
      <mx:Stroke color="gray" alpha=".65" />
      </mx:stroke>
      </mx:ColumnSeries>

      </mx:Array>
      </mx:series>

      <mx:backgroundElements>
      <mx:GridLines direction="horizontal" width=".05">
      <mx:horizontalFill>
      <mx:SolidColor color="0x999966" alpha=".05"/>
      </mx:horizontalFill>
      <mx:horizontalAlternateFill>
      <mx:SolidColor color="0xFFFFFF" alpha=".15"/>
      </mx:horizontalAlternateFill>
      </mx:GridLines>

      </mx:backgroundElements>

      </mx:LineChart>

      </mx:HBox>

      <mx:HBox width="95%" bottom="51" height="18" left="10">
      <mx:Label text="Toggle Data:" fontWeight="bold"/>
      <mx:CheckBox label="Fed funds" id="cb_ff" selected="true" enabled="false"/>
      <mx:CheckBox label="Target rate" id="cb_target" selected="true" />
      <mx:CheckBox label="High/Low columns" id="cb_highlow" selected="true" />
      </mx:HBox>

      </mx:Panel>
      </mx:Canvas>
      </mx:Application>