5 Replies Latest reply on Aug 9, 2010 5:38 AM by rootsounds

    Populate datagrid and draw linechart based on xmlList

    asifdegr8 Level 1

      I am generating dynamic xml structure like this

      <root>

        <OPVector>

          <Distance>0</Distance>

          <Height1>100</Height1>

          <Height2>200</Height2>

          <Height3>300</Height3>

        </OPVector>

        <OPVector>

          <Distance>100</Distance>

          <Height1>200</Height1>

          <Height2>300</Height2>

          <Height3>400</Height3>

        </OPVector>

        <OPVector>

          <Distance>200</Distance>

          <Height1>300</Height1>

          <Height2>400</Height2>

          <Height3>500</Height3>

        </OPVector>

      </root>

       

      What i have to do is to populate data grid based on this xml structure and draw a line chart where distance is category axis (x-axis) and Height1, Height2 etc are line series . No of Height fields depends on how many height values are entered by user (in text field Height1, Height2, Height3, Height4, Height5,Height6).

       

      Given is the code of my application ....

       

      ****************************************************************************************** ******************************************************

       

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

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="905" height="482" creationComplete="init();">

       

      <mx:Script>

      <![CDATA[

      import mx.events.IndexChangedEvent;

       

      private var dataProvider:XMLList = new XMLList();

      private var initDist:int ;

      private var offset:int  ;

      private var finalDist:int;

      private var height1:int;

      private var height2:int;

      private var height3:int;

      private var height4:int;

      private var height5:int;

      private var height6:int;

      private var heat:int;

       

      private var dataOP:XMLList;

       

      public function init():void{

      initDist = parseInt(txtInitDist.text);

      offset = parseInt(txtOffset.text);

      finalDist = parseInt(txtFinalDist.text);

      height2 = parseInt(txtHeight1.text);

      height2 = parseInt(txtHeight2.text);

      height3 = parseInt(txtHeight3.text);

      height4 = parseInt(txtHeight4.text);

      height5 = parseInt(txtHeight5.text);

      height6 = parseInt(txtHeight6.text);

      heat = parseInt(txtHeat.text);

       

      }

       

      public function getOP():void{

      dataOP = createXMLObject();

      currentState='stateOP';

       

      trace(dataOP.toXMLString());

      } // public function getOP():void{

       

      public function createXMLObject():XMLList{

       

      var data:XMLList = XMLList(<root></root>);

      for (var i:int=initDist;i<=finalDist;i+=offset){

      var x:XMLList = new XMLList(<OPVector></OPVector>);

      var distance:String = "<Distance>"+i+"</Distance>";

      var strHeight1:String = "<Height1>"+(parseInt(txtHeight1.text)+i)+"</Height1>";

      var strHeight2:String = "<Height2>"+(parseInt(txtHeight2.text)+i)+"</Height2>";

      var strHeight3:String = "<Height3>"+(parseInt(txtHeight3.text)+i)+"</Height3>";

      var strHeight4:String = "<Height4>"+(parseInt(txtHeight4.text)+i)+"</Height4>";

      var strHeight5:String = "<Height5>"+(parseInt(txtHeight5.text)+i)+"</Height5>";

      var strHeight6:String = "<Height6>"+(parseInt(txtHeight6.text)+i)+"</Height6>";

      x.appendChild(distance);

      if (txtHeight1.text != ""){

      x.appendChild(strHeight1);

      }

      if (txtHeight2.text != ""){

      x.appendChild(strHeight2);

      }

      if (txtHeight3.text != ""){

      x.appendChild(strHeight3);

      }

      if (txtHeight4.text != ""){

      x.appendChild(strHeight4);

      }

      if (txtHeight5.text != ""){

      x.appendChild(strHeight5);

      }

      if (txtHeight6.text != ""){

      x.appendChild(strHeight6);

      }

      data.appendChild(x);

       

      } // for (var i:int=initDist;i<finalDist;i+=offset){

       

      return data;

      } // public function createXMLObject():void

      ]]>

      </mx:Script>

       

      <!-- States Definition -->

      <mx:states>

      <mx:State name="stateOP">

      <mx:RemoveChild target="{btnOP}"/>

      <mx:RemoveChild target="{btnThermal}"/>

      <mx:RemoveChild target="{txtHeight5}"/>

      <mx:RemoveChild target="{txtHeight6}"/>

      <mx:RemoveChild target="{txtFinalDist}"/>

      <mx:RemoveChild target="{label1}"/>

      <mx:RemoveChild target="{label2}"/>

      <mx:RemoveChild target="{label3}"/>

      <mx:RemoveChild target="{txtHeight3}"/>

      <mx:RemoveChild target="{txtHeight4}"/>

      <mx:RemoveChild target="{txtOffset}"/>

      <mx:RemoveChild target="{label4}"/>

      <mx:RemoveChild target="{label5}"/>

      <mx:RemoveChild target="{label6}"/>

      <mx:RemoveChild target="{txtHeight1}"/>

      <mx:RemoveChild target="{txtHeight2}"/>

      <mx:RemoveChild target="{txtInitDist}"/>

      <mx:RemoveChild target="{label7}"/>

      <mx:RemoveChild target="{label8}"/>

      <mx:RemoveChild target="{label9}"/>

      <mx:RemoveChild target="{txtHeat}"/>

      <mx:RemoveChild target="{label13}"/>

      <mx:AddChild position="lastChild">

      <mx:DataGrid x="57" y="112" width="274" height="336" id="dgPressure" dataProvider="{dataOP}">

      <mx:columns>

      <mx:DataGridColumn headerText="Column 1" dataField="col1"/>

      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>

      <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

      </mx:columns>

      </mx:DataGrid>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LineChart x="382" y="112" id="lcOverPressure" width="513" height="182">

      <mx:series>

      <mx:LineSeries displayName="Series 1" yField=""/>

      </mx:series>

      </mx:LineChart>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:Legend dataProvider="{lcOverPressure}" x="810" y="51"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:Button x="382" y="426" label="Close" id="btnClose" click="currentState=''"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="stateTR">

      <mx:RemoveChild target="{txtHeat}"/>

      <mx:RemoveChild target="{txtHeight1}"/>

      <mx:RemoveChild target="{txtHeight3}"/>

      <mx:RemoveChild target="{txtHeight5}"/>

      <mx:RemoveChild target="{txtHeight2}"/>

      <mx:RemoveChild target="{txtHeight4}"/>

      <mx:RemoveChild target="{txtHeight6}"/>

      <mx:RemoveChild target="{txtInitDist}"/>

      <mx:RemoveChild target="{txtOffset}"/>

      <mx:RemoveChild target="{txtFinalDist}"/>

      <mx:RemoveChild target="{label13}"/>

      <mx:RemoveChild target="{label7}"/>

      <mx:RemoveChild target="{label4}"/>

      <mx:RemoveChild target="{label3}"/>

      <mx:RemoveChild target="{label8}"/>

      <mx:RemoveChild target="{label5}"/>

      <mx:RemoveChild target="{label1}"/>

      <mx:RemoveChild target="{label9}"/>

      <mx:RemoveChild target="{label6}"/>

      <mx:RemoveChild target="{label2}"/>

      <mx:RemoveChild target="{btnOP}"/>

      <mx:RemoveChild target="{btnThermal}"/>

      <mx:AddChild position="lastChild">

      <mx:DataGrid x="39" y="108" width="301" height="364">

      <mx:columns>

      <mx:DataGridColumn headerText="Column 1" dataField="col1"/>

      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>

      <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

      </mx:columns>

      </mx:DataGrid>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LineChart x="420" y="108" id="linechart1" width="475" height="181">

      <mx:series>

      <mx:LineSeries displayName="Series 1" yField=""/>

      </mx:series>

      </mx:LineChart>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:Legend dataProvider="{linechart1}" x="810" y="13"/>

      </mx:AddChild>

      </mx:State>

      </mx:states>

      <!-- States Definition -->

       

      <!-- Controls Definition -->

      <mx:TextInput x="331" y="95" width="62" id="txtHeat" text="8"/>

      <mx:TextInput x="231" y="229" width="62" id="txtHeight1" text="100"/>

      <mx:TextInput x="231" y="259" width="62" id="txtHeight3" text="300"/>

      <mx:TextInput x="231" y="289" width="62" id="txtHeight5"/>

      <mx:TextInput x="357" y="229" width="62" id="txtHeight2" text="200"/>

      <mx:TextInput x="357" y="259" width="62" id="txtHeight4"/>

      <mx:TextInput x="357" y="289" width="62" id="txtHeight6"/>

      <mx:TextInput x="580" y="229" width="62" id="txtInitDist" text="0"/>

      <mx:TextInput x="580" y="259" width="62" id="txtOffset" text="100"/>

      <mx:TextInput x="580" y="289" width="62" id="txtFinalDist" text="2000"/>

      <mx:Label x="298" y="97" text="Heat" id="label13"/>

      <mx:Label x="168" y="231" text="Height1" id="label7"/>

      <mx:Label x="168" y="261" text="Height3" id="label4"/>

      <mx:Label x="168" y="291" text="Height5" id="label3"/>

      <mx:Label x="302.5" y="231" text="Height2" id="label8"/>

      <mx:Label x="301" y="261" text="Height4" id="label5"/>

      <mx:Label x="301" y="291" text="Height6" id="label1"/>

      <mx:Label x="484" y="231" text="Initial Distance" id="label9"/>

      <mx:Label x="533" y="261" text="Offset" id="label6"/>

      <mx:Label x="490" y="291" text="Final Distance" id="label2"/>

      <mx:Button x="298.5" y="384" label="Pressure Effects" id="btnOP" click="getOP()"/>

      <mx:Button x="464.5" y="384" label="Thermal Effects" width="142" id="btnThermal"/>

      <mx:Label x="298" y="10" text="Weather Effects" fontWeight="bold" fontSize="18"/>

      <!-- Controls Definition -->

       

      </mx:Application>