0 Replies Latest reply on Dec 3, 2009 10:59 AM by vpxav

    Linechart from xml: I can't have multiple lines

    vpxav Level 1

      Hello,

      Here's my xml result:

      <records>
      <record elm_records_id="1" element_id="1" date="2009-12-04" value="100"/>
      <record elm_records_id="2" element_id="2" date="2009-12-01" value="0"/>
      <record elm_records_id="3" element_id="2" date="2009-12-04" value="100"/>
      <record elm_records_id="4" element_id="2" date="2009-12-05" value="150"/>
      <record elm_records_id="5" element_id="2" date="2009-12-06" value="200"/>
      </records>
      

       

      I would like to have a separate line in my chart for each element ID and the displayName for each line should be the element_id.

       

      Currently, I get only one line with all the values.

      If an expert in charting with xml could help me, it would be very appreciated.

      Thanks already,

       

      Here's my code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%" initialize="initializeHandler(event);">
           <mx:Script>
              <![CDATA[
      
              import mx.collections.ArrayCollection;
                import mx.rpc.events.ResultEvent;
                private var xmldata:XML;
                [Bindable] private var myArr:ArrayCollection=new ArrayCollection;
                private function resultHandler(event:ResultEvent):void{
                     xmldata=event.result as XML;
                     for each (var thexml:XML in xmldata.record){
                          var obj:Object= {"element_id":thexml.@element_id,
                          "date":thexml.@date,
                          "value":thexml.@value
                          };
                     myArr.addItem(obj);
                     }
                }
                     
                     private function initializeHandler(event:Event):void{
                           listRecordsData.send();               
                     }
              ]]>
          </mx:Script>
            <mx:HTTPService id="listRecordsData" url="scripts/listelmrecords.php" resultFormat="e4x" useProxy="false" method="POST" showBusyCursor="true" result="resultHandler(event)"/>
          <!-- Define custom colors for use as fills in the AreaChart control. -->
          <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
          <mx:SolidColor id="sc2" color="red" alpha=".3"/>
          <mx:SolidColor id="sc3" color="green" alpha=".3"/>
      
          <!-- Define custom Strokes. -->
          <mx:Stroke id = "s1" color="blue" weight="2"/>
          <mx:Stroke id = "s2" color="red" weight="2"/>
          <mx:Stroke id = "s3" color="green" weight="2"/>
      
          <mx:Panel title="LineChart and AreaChart Controls Example" 
              height="100%" width="100%" layout="horizontal">
      
              <mx:LineChart id="linechart" height="100%" width="45%"
                  paddingLeft="5" paddingRight="5" 
                  showDataTips="true" dataProvider="{myArr}">                
                  <mx:horizontalAxis>
                      <mx:CategoryAxis dataProvider="{myArr}" categoryField="date"/>
                  </mx:horizontalAxis>               
                  <mx:series>
                      
                      <mx:LineSeries yField="value" form="curve" displayName="Element name" lineStroke="{s1}"/>
                  </mx:series>
              </mx:LineChart>
      
              <mx:Legend dataProvider="{linechart}"/>
          </mx:Panel>
      </mx:Module>