2 Replies Latest reply on Jan 4, 2007 10:46 AM by Arthur@aginova

    flex charting from FLEX 1.5 to 2

    Arthur@aginova
      Hi there,
      im new to flex and happen to bump in flex 1.5 app CHART example: "MISC TECHNIQUES / SERIES SELECTION"at the following link :
      http://flexapps.macromedia.com/flex15/chartexplorer/explorer.mxml?versionChecked=true

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

      im using flexbuilder 2, would need help how would i convert the code to flex 2, im pasting the code below for reference which is in flex 1.5:


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

      <mx:Application xmlns:mx=" http://www.macromedia.com/2003/mxml" xmlns="*"
      width="100%" height="100%"
      marginTop="12" marginBottom="12" marginLeft="12" marginRight="12"
      initialize="srv.send()">

      <mx:Script>

      <![CDATA[

      import mx.charts.series.LineSeries;
      import mx.charts.renderers.SimpleLineRenderer;
      import mx.managers.DragManager;


      function formatDataTip(obj) {
      var name=obj.hitData.element.name;
      var month=obj.hitData.item.name;
      var value=results[obj.hitData.index][obj.hitData.element.yField];
      return "<b>"+name+"</b><br>"+month+"<br>"+cf.format(value);
      }

      function currencyFormat(value) {
      return cf.format(value);
      }

      function doDragEnter(event) {
      if (event.dragSource.hasFormat("items"))
      event.handled = true;
      }

      function doDragExit(event) {
      event.target.hideDropFeedback();
      }

      function doDragOver(event) {
      event.target.showDropFeedback();
      if (Key.isDown(Key.CONTROL))
      event.action = DragManager.COPY;
      else if (Key.isDown(Key.SHIFT))
      event.action = DragManager.LINK;
      else
      event.action = DragManager.MOVE;
      }

      function doDragDrop(event) {
      doDragExit(event);
      for (var i=0; i<list.selectedIndices.length; i++) {
      var ls=new LineSeries();
      ls.yField=states[list.selectedIndices ];
      ls.name=states[list.selectedIndices
      ];
      ls.renderer=new SimpleLineRenderer(); // no line shadow
      chart.series.addItem(ls);
      }
      }


      var states: Array;

      function serviceResult() {
      states=new Array();
      for (var i in results[0]) {
      if (i!="name") {
      states.addItem(i);
      }
      }
      states.reverse();
      }

      ]]>

      </mx:Script>

      <mx:HTTPService id="srv" url="statedata.xml" result="serviceResult()"/>

      <mx:CurrencyFormatter id="cf"/>

      <mx:Model id="results">{srv.result.data.month}</mx:Model>

      <mx:HBox width="100%" height="100%">

      <mx:VBox width="100%" height="100%">

      <mx:Label width="100%" text="Drag and drop states from the list onto the chart. You can use the CTRL and SHIFT keys to select multiple states."/>

      <mx:LineChart id="chart" dataProvider="{results}" showDataTips="true" width="100%" height="100%"
      dataTipFunction="formatDataTip"
      dragOver="doDragOver(event)"
      dragEnter="doDragEnter(event)"
      dragExit="doDragExit(event);"
      dragDrop="doDragDrop(event)">

      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{results}" categoryField="name"/>
      </mx:horizontalAxis>

      <mx:verticalAxis>
      <mx:LinearAxis minimum="0" maximum="150000"/>
      </mx:verticalAxis>

      <mx:verticalAxisRenderer>
      <mx:AxisRenderer labelFunction="currencyFormat"/>
      </mx:verticalAxisRenderer>

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

      </mx:LineChart>

      </mx:VBox>

      <mx:List id="list" dataProvider="{states}" width="130" height="100%" multipleSelection="true" dragEnabled="true"/>

      </mx:HBox>

      </mx:Application>