1 Reply Latest reply on Aug 4, 2007 9:56 AM by peterent

    need help with columnChart

    oxbownick
      Hello. I am noob when it comes to Flex and mxml, but I have alot of experience in flash and also PHP. Currently, the data that populates my columnChart is coming from a function:
      ----------------------------------------------------------------------------------------
      public var expenses:ArrayCollection = new ArrayCollection([
      {Month:"Jan", Income:0, Profit:0},
      {Month:"Feb", Income:0, Profit:0},
      {Month:"Mar", Income:0, Profit:0},
      {Month:"Apr", Income:0, Profit:0},
      {Month:"May", Income:0, Profit:0},
      {Month:"Jun", Income:0, Profit:0},
      {Month:"Jul", Income:198, Profit:148},
      {Month:"Aug", Income:0, Profit:0},
      {Month:"Sept", Income:0, Profit:0},
      {Month:"Oct", Income:0, Profit:0},
      {Month:"Nov", Income:0, Profit:0},
      {Month:"Dec", Income:0, Profit:0},
      {Month:"Dec", Income:0, Profit:0}
      ]);
      ----------------------------------------------------------------
      How would I get this function to recieve data from a php page. The PHP page gets the data from a MySQL database.
      I have searched in google and can't find any help. It doesn't have to get it live at this point, I have a refresh button.

      Here is the MXML for the chart:
      ----------------------------------------------------
      <mx:ColumnChart x="10" y="218" id="columnchart1" showDataTips="true" dataProvider="{expenses}" width="421" height="232">
      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" />
      </mx:horizontalAxis>
      <mx:series>
      <mx:ColumnSeries displayName="Income" xField="Month" yField="Income" />
      <mx:ColumnSeries displayName="Profit" xField="Month" yField="Profit" />
      </mx:series>
      </mx:ColumnChart>
      <mx:Legend dataProvider="{columnchart1}" x="439" y="397"/>
      -------------------------------------------------------

      What would the function need to look like, to display the sameway? What would the HTTPService tag need to look like?
      How would the XML need to look in the PHP file?
      Don't take it like I want you to just it for me, this is only my second day with FLEX and I have already managed to do alot. I just haven't found any help on this issue. Thanks.
        • 1. Re: need help with columnChart
          peterent Level 2
          First begin with what you want your XML to look like. From your data I'd say:

          <?xml version="1.0" ?>
          <list>
          <node month="Jan" income="0" profit="0" />
          <node month="Feb" income="0" profit="0" />
          ...
          </list>

          That's how your PHP script should produce the output. To test it, just redirect your browser to the PHP script and you should see an XML document.

          The Flex HTTPService tag would like something like this:

          <mx:HTTPService id="srv" url="yourphpurl" resultFormat="e4x" result="handleResult(event)" />

          Request the data using srv.send();

          The result will be returned and the handleResult function will get called.

          Read up on E4X a bit, but you'll make an XMLList from that XML data returned:

          private function handleResult( event:ResultEvent ) : void
          {
          expenses = event.result.node;
          }

          where you now have [Bindable] private var expenses:XMLList;

          and now modify your ColumnSeries:

          xField="@month" yField="@income"

          The @ notation means an attribute.