4 Replies Latest reply on Feb 15, 2007 5:17 PM by darrylfrith

    Flex 2 Charting Data

    darrylfrith Level 1
      I am new to Flex and I don;t understand how to get data from php.

      I want to create a column chart with data from mysql. Here is my PHP code how do I send this data to Flex and build a column chart?

      $startDate = date('Y-m-d', strtotime('-7 Days'));
      $sql = 'SELECT pageloads.Date, pageloads.Pageloads, pageloads.Day FROM pageloads INNER JOIN login USING (user) WHERE login.name = "'. $PHP_AUTH_USER .'" AND pageloads.Date between "' .$startDate. '" and now() Order by Date';

      //Run Query and/or show errors
      $res = mysql_query($sql) or die(mysql_error());

      //Build chart array
      $chart['chart_data'] = array( array(""),
      array("Pageloads")
      );

      //Add chart data
      while($row = mysql_fetch_assoc($res)){
      $chart['chart_data'][0][ ] = $row['Day'];
      $chart['chart_data'][1][ ] = $row['Pageloads'];
      }
        • 1. Re: Flex 2 Charting Data
          chris.huston.t10 Level 3
          I have my PHP script return the data in XML format for my charts. So for your example, I would do this:

          $resultList = "<chartData>";
          while($row = mysql_fetch_assoc($res)){
          $resultList .= "<columnData day=\"".$row['Day']."\"><pageLoads>".$row['Pageloads']."</pageLoads></columnData>";
          }
          $resultList .= "</chartData>";
          echo "$resultList";

          Then in Flex, call this script with an HTTPService and bind the result to an Object that will be used to display your chart:

          <mx:HTTPService
          id="get_pageloads"
          method="POST"
          result="show_data(event)"
          url=" http://yourserver/pageloads.php"
          useProxy="false"/>

          [Bindable] private var data_result:Object;
          private function show_data(evt:ResultEvent):void {
          data_result = evt.result;
          }

          Here is what your chart code could look like:
          <mx:ColumnChart left="10" right="10" dataProvider="{data_result.chartData.columnData}">
          <mx:horizontalAxis>
          <mx:CategoryAxis id="x_axis" dataProvider="{data_result.chartData.columnData}" categoryField="day"/>
          </mx:horizontalAxis>
          <mx:series>
          <mx:ColumnSeries yField="pageLoads"/>
          </mx:series>
          </mx:ColumnChart>

          I think this will at least things moving along for you.

          Vygo
          • 2. Re: Flex 2 Charting Data
            darrylfrith Level 1
            Thanks for your help,

            I tried what you gave me but I'm getting errors with the data binding syntax, "expecting rightparen" and then "unexpected rightparen"

            here is my code:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()">
            <mx:HTTPService id="get_pageloads" url=" http://www.mydomain.ca/flex/flex_data.php" useProxy="false" method="POST" result="show_data(event)">
            <mx:request xmlns="">
            [Bindable] private var data_result:Object;
            private function show_data(evt:ResultEvent):void {
            data_result = evt.result;
            }
            </mx:request>
            </mx:HTTPService>

            <mx:ColumnChart left="10" right="10" dataProvider="{data_result.chartData.columnData}">
            <mx:horizontalAxis>
            <mx:CategoryAxis id="x_axis" dataProvider="{data_result.chartData.columnData}" categoryField="day"/>
            </mx:horizontalAxis>
            <mx:series>
            <mx:ColumnSeries yField="pageLoads"/>
            </mx:series>
            </mx:ColumnChart>

            </mx:Application>
            • 3. Re: Flex 2 Charting Data
              chris.huston.t10 Level 3
              Sorry, I didn't give the fully completed code. You need to put ActionScript inside of script tags. I also fixed the creationComplete event function call:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="get_pageloads.send()">
              <mx:Script><![CDATA[
              import mx.rpc.events.ResultEvent;
              [Bindable] private var data_result:Object;
              private function show_data(evt:ResultEvent):void {
              data_result = evt.result;
              }
              ]]></mx:Script>
              <mx:HTTPService id="get_pageloads" url=" http://www.mydomain.ca/flex/flex_data.php" useProxy="false" method="POST" result="show_data(event)">
              <mx:request xmlns="">
              </mx:request>
              </mx:HTTPService>

              <mx:ColumnChart left="10" right="10" dataProvider="{data_result.chartData.columnData}">
              <mx:horizontalAxis>
              <mx:CategoryAxis id="x_axis" dataProvider="{data_result.chartData.columnData}" categoryField="day"/>
              </mx:horizontalAxis>
              <mx:series>
              <mx:ColumnSeries yField="pageLoads"/>
              </mx:series>
              </mx:ColumnChart>

              </mx:Application>

              Give this a try.

              Vygo
              • 4. Re: Flex 2 Charting Data
                darrylfrith Level 1
                Thank you so much,

                That worked perfectly. I really appreciate it.