10 Replies Latest reply on Feb 17, 2007 1:09 PM by AlanParish

    Flex 2 Series Charting

    AlanParish
      Hi all,

      I'm in desperate need of help. I'm trying to chart data in Flex 2. I want multiple series plotted, each with it's own dataProvider. I cannot change the data I am using (it's sourced from a web service).

      The Actionscript I have written to process the web service result in order to chart the data is as follows:

      function loggerdataRPCResult(event:ResultEvent)
      {
      var result = event.result;

      var series:Array = new Array();

      for each(var LoggerData in result)
      {

      var ls:LineSeries = new LineSeries();
      ls.yField = "Date";
      ls.xField = "Flow";
      ls.displayName = LoggerData.LoggerId;
      ls.form = "segment";
      ls.dataProvider = LoggerData.FlowDataArray;

      series.push(ls);

      }

      loggerchart.series = series;

      }


      The xml result that is returned from the web service is as follows:

      <?xml version="1.0" encoding="utf-8"?>
      <ArrayOfLoggerData xmlns:xsi=" http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd=" http://www.w3.org/2001/XMLSchema" xmlns=" http://tempuri.org/">
      <LoggerData>
      <FlowDataArray>
      <FlowData>
      <Date>2006-12-01T12:00:00</Date>
      <Flow>15</Flow>
      </FlowData>
      <FlowData>
      <Date>2006-12-01T13:00:00</Date>
      <Flow>19</Flow>
      </FlowData>
      </FlowDataArray>
      <LoggerId>1</LoggerId>
      </LoggerData>
      <LoggerData>
      <FlowDataArray>
      <FlowData>
      <Date>2006-12-01T12:00:00</Date>
      <Flow>2</Flow>
      </FlowData>
      <FlowData>
      <Date>2006-12-01T13:00:00</Date>
      <Flow>12</Flow>
      </FlowData>
      </FlowDataArray>
      <LoggerId>2</LoggerId>
      </LoggerData>
      </ArrayOfLoggerData>


      The script works to a certain extent - it creates two series on the chart, and the series' legends are visible, but no data is plotted in the graph area.

      Any help would be very very gratefully received.

      Many Thanks
        • 1. Re: Flex 2 Series Charting
          AlanParish Level 1
          Just to clarify, this is what my LineChart control looks like:

          <mx:LineChart id="loggerchart" left="53" right="38" top="51" bottom="45" showDataTips="true">
          <mx:series>
          <mx:LineSeries displayName="Series 1" yField=""/>
          </mx:series>

          <mx:horizontalAxis>
          <mx:CategoryAxis displayName="Date" labelFunction="formatDate" categoryField="Date"/>
          </mx:horizontalAxis>
          <mx:horizontalAxisRenderer>
          <mx:AxisRenderer canDropLabels="true" labelRotation="90" />
          </mx:horizontalAxisRenderer>
          </mx:LineChart>
          <mx:Legend dataProvider="{loggerchart}"/>
          • 2. Re: Flex 2 Series Charting
            Oddsy Level 1
            At a guess... change
            ls.dataProvider = LoggerData.FlowDataArray;

            to

            ls.dataProvider = LoggerData.FlowDataArray.FlowData;
            • 3. Re: Flex 2 Series Charting
              AlanParish Level 1
              Thanks for the suggestion. Have tried it out but it didn't work - the graph no longer even displayed the legend.
              • 4. Re: Flex 2 Series Charting
                AlanParish Level 1
                Does anyone know if it is actually possible to have a different dataProvider for each series on a LineChart?
                • 5. Re: Flex 2 Series Charting
                  Oddsy Level 1
                  Yes, it definately is, you assign the dataProvider of each series as you are doing.
                  • 6. Flex 2 Series Charting
                    AlanParish Level 1
                    Ok I thought so, seeing as there as a dataProvider property of the LineSeries class available. God knows what I'm doing wrong then!
                    • 7. Re: Flex 2 Series Charting
                      Oddsy Level 1
                      Ok, so I had a quick mess about with what you've provided and I've come up with a couple of things that may be the problem. First off, you've crossed your axes and series x and y over. By that I mean, you've got Date on your horizontal axis, but assigned to your series' yField.

                      Secondly, I haven't used CategoryAxis before but it appears that the chart has to be assigned a dataProvider in order for it to work out the categories. However, what I don't understand is why you are using a CategoryAxis to represent time. Surely a DateTimeAxis is what you want? You just need to give a DateTimeAxis a parseFunction that takes the date strings in your data and parses them into a Date object.

                      Thirdly, you also need the dataProvider to be LoggerData.FlowDataArray.FlowData. This is because LoggerData.FlowDataArray.FlowData gives you an array of objects with "Flow" and "Data" properties, where as LoggerData.FlowDataArray givers you an object without these properties (and therefore cannot be mapped to the axes).

                      So, in summary:
                      1. ls.yField = "Flow"; and ls.xField = "Date"
                      2. Use a DateTimeAxis
                      3. LoggerData.FlowDataArray.FlowData as dp instead of LoggerData.FlowDataArray

                      Hope that leads you to a solution.

                      Graham
                      • 8. Re: Flex 2 Series Charting
                        chris.huston.t10 Level 3
                        Here is one possible solution that I worked out. The only limitation is that all of the FlowData nodes must contain the same Date values for this to work. If there are going to be nodes with different Date values, you will need to adapt this. I have hard-coded in the RPCResult for testing purposes, so just substitute your web service where appropriate.

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="loggerdataRPCResult()">
                        <mx:Script><![CDATA[
                        import mx.charts.series.LineSeries;

                        private function loggerdataRPCResult():void
                        {
                        var result:XMLList = myData.LoggerData;
                        loggerchart.dataProvider = result.FlowDataArray[0].FlowData;
                        var mySeries:Array = new Array();
                        for each(var LoggerData:XML in result) {
                        var ls:LineSeries = new LineSeries();
                        ls.yField = "Flow";
                        ls.displayName = LoggerData.LoggerId;
                        ls.dataProvider = LoggerData.FlowDataArray.FlowData;
                        mySeries.push(ls);
                        }
                        loggerchart.series = mySeries;
                        }

                        private var myData:XML = <ArrayOfLoggerData>
                        <LoggerData>
                        <FlowDataArray>
                        <FlowData>
                        <Date>2006-12-01T12:00:00</Date>
                        <Flow>15</Flow>
                        </FlowData>
                        <FlowData>
                        <Date>2006-12-01T13:00:00</Date>
                        <Flow>19</Flow>
                        </FlowData>
                        <FlowData>
                        <Date>2006-12-01T14:00:00</Date>
                        <Flow>17</Flow>
                        </FlowData>
                        </FlowDataArray>
                        <LoggerId>1</LoggerId>
                        </LoggerData>
                        <LoggerData>
                        <FlowDataArray>
                        <FlowData>
                        <Date>2006-12-01T12:00:00</Date>
                        <Flow>2</Flow>
                        </FlowData>
                        <FlowData>
                        <Date>2006-12-01T13:00:00</Date>
                        <Flow>12</Flow>
                        </FlowData>
                        <FlowData>
                        <Date>2006-12-01T14:00:00</Date>
                        <Flow>16</Flow>
                        </FlowData>
                        </FlowDataArray>
                        <LoggerId>2</LoggerId>
                        </LoggerData>
                        </ArrayOfLoggerData>;

                        ]]></mx:Script>

                        <mx:LineChart id="loggerchart" left="53" right="38" top="51" bottom="45" showDataTips="true">

                        <mx:horizontalAxis>
                        <mx:CategoryAxis displayName="Date" categoryField="Date"/>
                        </mx:horizontalAxis>
                        </mx:LineChart>

                        </mx:Application>

                        There might be a more elegant solution to take into account variable Date node values, but this is a start.

                        Vygo
                        • 9. Re: Flex 2 Series Charting
                          Arthur@aginova
                          Hi Vygo,
                          In the above example,
                          how can i convert hard coded xml to read from an external xml file for the same kind of series?
                          Thanks

                          Arthur
                          • 10. Flex 2 Series Charting
                            AlanParish Level 1
                            Graham and Vygo, thank you very much for taking the time to look at my problem. Graham, I implemented your suggestions about my datetime axis and it works perfectly now. I will make sure I take more time to check my axes in future! I owe you - saved me a lot of time, thanks.

                            Just one note: the application seems to chart successfully when LoggerData.FlowDataArray is specifed as the dataProvider although I can see why LoggerData.FlowDataArray.FlowData should have worked.

                            Many thanks guys.

                            Alan