Populate datagrid and draw linechart based on xmlList

Question

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>

Answer 1

I suggest that you first not try to cram all of your code into the MXML. Though many examples use this approach for quick copy-and-pasting, it is bad style and not as maintainable. You should use the code-behind approach where your MXML is strictly for layout of the view and its root element is a custom class that extendeds the usual base (in this case Application).
Since the number of series in your line cart may vary, what you will need to do is dynamically create them whenever the data provider is updated.