2 Replies Latest reply on Sep 26, 2006 12:44 PM by NedKost

    Charting, Webservices, and DataBinding

    NedKost
      I've been trying to create a chart with the xml data retrieved from a WebService call, but haven't had much luck getting the chart to display data. All the examples I've found have charts databinding to ArrayCollections. Is there an example of one binding to WebService results? or can you give an example of what the Xml would need to look like to get the chart to display correctly?

      I've tried a couple different XML structures with the incoming webservice XML, but haven't been successful. Right now it looks like the following:
      quote:

      <TEST>
      <Data Month="8" Total="1"/>
      <Data Month="9" Total="3"/>
      <Data Month="10" Total="5"/>
      <Data Month="11" Total="1"/>
      <Data Month="12" Total="2"/>
      </TEST>


      MXML Chart Code:
      quote:

      <mx:AreaChart x="362" y="95" id="participationChart" height="269" width="580" dataProvider="{wsTest.GetTestData.lastResult.GetTestDataResult.TEST}">
      <mx:horizontalAxis>
      <mx:CategoryAxis categoryField="Month" />
      </mx:horizontalAxis>
      <mx:series>
      <mx:AreaSeries yField="Total" displayName="Total"/>
      </mx:series>
      </mx:AreaChart>



      Thanks!
      -Ned Kost
        • 1. Re: Charting, Webservices, and DataBinding
          ntsiii Level 3
          First you need to know what your web service is returning.

          In a result handler function, called by the result event of the operation, inspect the contents of the result object using toXMLString().

          What are you using for debugging?

          Tracy
          • 2. Re: Charting, Webservices, and DataBinding
            NedKost Level 1
            My WebService is returning the XML detailed in the first Quote. I'm using the debug mode in Flex Builder 2 for debugging.

            I figured out I needed to use the dataProvider property of the axis to set their data. Here is the code that ended up working for me:

            quote:

            <mx:AreaChart id="chart1" height="269" width="100%" dataProvider="{wsTest.GetTestData.lastResult.GetTestDataResult.Table}">
            <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="Day" dataProvider="{wsTest.GetTestData.lastResult.GetTestDataResult.Table.Person}"/>
            </mx:horizontalAxis>
            <mx:series>
            <mx:AreaSeries yField="Total" displayName="Total" dataProvider="{wsTest.GetTestData.lastResult.GetTestDataResult.Table.Person}" />
            </mx:series>
            </mx:AreaChart>


            Couple Questions though.. If instead of Month I am returning a DateTime string (returned from a SQL query), is there an easy way to convert that date to something that can be displayed by the axis? Ultimately, I would like to have a chart that uses the DateTime axis, and can have its date range varied according to user input. Much like the Dashboard sample application graph available here:

            quote:

            http://www.adobe.com/devnet/flex/samples/dashboard/


            Thanks,
            -Ned Kost