3 Replies Latest reply on Jul 11, 2007 11:21 AM by ntsiii

    How to create charts from external XML files?

    Gil1 Level 1
      I need to create some charts using the charting components.

      All examples on the web and in many books that I have purchased about Flex 2 use ArrayCollections. Since i want the data to be external to the app., I am loading it from external sources using HTTPService. I have used external xml data in many applications, so I have no issues with that.

      However, for the charts I am clueless. i read that to have the dta binding properties of the ArrayCollections I have to use XMLListCollections. what I am doing is:

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      backgroundGradientColors="[#8a8a8a, #ffffff]" creationComplete="init();" >
      <mx:HTTPService id="xmlFeed" url="data/missionReady.xml" result="loaded(event)" resultFormat="e4x"/>
      <mx:XMLListCollection id="mission"
      source="{xmlFeed.lastResult.day}"/>
      ...

      Tracing mission I get the data ok, so I know that is working.

      The XML file looks like:

      <data>
      <day date="05/15/2007">
      <tBlock id="1" today="2" tomorrow="2" afterT="2" afterT1="2" />
      <tBlock id="2" today="2" tomorrow="2" afterT="2" afterT1="2" />
      <tBlock id="3" today="2" tomorrow="2" afterT="2" afterT1="2" />
      <tBlock id="4" today="2" tomorrow="2" afterT="2" afterT1="2" />
      </day>
      <day date="05/16/2007">
      <tBlock id="1" today="2" tomorrow="2" afterT="2" afterT1="2" />
      <tBlock id="2" today="2" tomorrow="2" afterT="2" afterT1="2" />
      <tBlock id="3" today="2" tomorrow="2" afterT="2" afterT1="2" />
      <tBlock id="4" today="2" tomorrow="2" afterT="2" afterT1="2" />
      </day>
      </data>

      in the mxml part I have:

      <mx:Panel width="100%" height="94" title="Mission Readiness">
      <mx:BarChart id="missionReadiness">
      <mx:series>
      <mx:BarSeries yField="" xField=""/>
      </mx:series>
      </mx:BarChart>
      <mx:Legend dataProvider="{mission}"/>

      </mx:Panel>

      How I refer to my variables in the <mx:BarSeries yField="" xField=""/> part?

      Thanks,

      Gilbert
        • 1. Re: How to create charts from external XML files?
          ntsiii Level 3
          XMLListCollection is just a collection of XML nodes, so you should be able to do something like yField="@tomorrow"

          I am not good with charts so take this advisedly.
          Tracy
          • 2. How to create charts from external XML files?
            Gil1 Level 1
            Tracy,

            Thanks. That worked. However I have another related question:
            I convert the xml feed to a XMLListCollection by doing:

            <mx:XMLListCollection id="mission"
            source="{xmlFeed.lastResult.day}"/>
            and
            <mx:XMLListCollection id="mission1"
            source="{xmlFeed.lastResult.day.tBlock}"/>

            On the chart I have

            <mx:ColumnChart id="missionReadiness" height="150%" width="100%"
            paddingLeft="2" paddingRight="2"
            showDataTips="true" dataProvider="{mission1}">
            <mx:series>
            <mx:ColumnSeries xField="" yField="@today" displayName="Today"/>
            <mx:ColumnSeries xField="" yField="@tomorrow" displayName="Tomorrow"/>
            <mx:ColumnSeries xField="" yField="@afterT" displayName="After Tomorrow"/>
            </mx:series>
            </mx:ColumnChart>

            the yField works, but for the xField I want to have the @date but refers to the parent node, so I am clueless on how to refer to it.

            Also, I would like to display on the chart only the values to a specific date (like @date="05/17/2007").

            Any suggestions on how to do that?

            Gilbert
            • 3. Re: How to create charts from external XML files?
              ntsiii Level 3
              look for labelFunction() on the chart, perhaps it will help.

              Also look into "filter" on XMLListCollection.

              Tracy