25 Replies Latest reply on Feb 16, 2011 10:11 PM by Atishay Jain

    Need a simple Dashboard example

    Threadstone

      Hello All,

       

      Can any one provide me an simple Dashboard example (Charts)  using Flex 3 .

       

      The dashboard should use a MYSQL database as a source.

       

       

      Many thanks,

        • 1. Re: Need a simple Dashboard example
          Gregory Lafrance Level 6

          Here's the Adobe dashboard sample app:

           

          http://examples.adobe.com/flex3/devnet/dashboard/main.html

           

          Just right-click and select View Source to download the source code.

          • 2. Re: Need a simple Dashboard example
            Threadstone Level 1

            Hi Greg,

             

            Thank you very much for such a good stuff. but in that example the data is being taken from XML files directly.

             

            My chart should rely on a MYSQL Database.Each time the user refreshes the page the Dashboard has to go back and fetch data from database.

             

            Can you please provide an example with two parameters,which takes input from a mysql DB.

             

            Fetching data using PHP is fine with me, but how we can set the data to the graph control in a dashboard ?

             

            Many thanks,

            • 3. Re: Need a simple Dashboard example
              flex_heman Level 1

              u can get the results from the php in xml and then store it in arraycollection ..and use arraycollection as dataprovider...hope this will help...am nt sure...

              • 4. Re: Need a simple Dashboard example
                Threadstone Level 1

                Can you just provide an example please ?

                 

                Thanks & Regards,

                • 5. Re: Need a simple Dashboard example
                  flex_heman Level 1

                  try this ..

                   

                  var XMLResponse = new XML(event.result.toString()); (variable to store ur result from php)

                  var myArrCol:ArrayCollection = new ArrayCollection(); (variable to be used as a dataprovider)

                   

                  if ur result xml is of this type

                   

                  <MainNode>

                       <SubNode>

                            <id>1</id>

                            <desc>Flex</desc>

                       </SubNode>

                       <SubNode>

                            <id>2</id>

                            <desc>Flash</desc>

                       </SubNode>

                  </MainNode>

                   

                  now  add items to ur arrcollection

                   

                  for (var str:String in XMLResponse.SubNode.)

                   

                        myArrCol.addItem({id:XMLResponse.SubNode.id[str],

                                                   ({desc:XMLResponse.SubNode.desc[str]});

                   

                  now set the myArrCol as a dataprovider to the chart..

                   

                  <mx:LineChart height="231" width="486" x="115" y="28"  dataProvider="{myArrCol}"
                                showDataTips="true">

                  • 6. Re: Need a simple Dashboard example
                    Threadstone Level 1

                    Hi,

                     

                    I'm still naive in Flex...can you please provide me a complete working example.

                     

                    Many Thanks.

                    • 7. Re: Need a simple Dashboard example
                      Michael Borbor Level 4

                      If you're new to Flex then you should begin learning the basics there's a great set of tutorials, including how to interact with server technologies (PHP. .NET. CF) here

                       

                      http://learn.adobe.com/wiki/display/Flex/Getting+Started

                      • 8. Re: Need a simple Dashboard example
                        flex_heman Level 1

                        check dis link for transfering data between flex and php.

                        http://www.switchonthecode.com/tutorials/sending-flex-data-to-php-using-xml

                         

                        i have also attached a file  for chart example

                        • 9. Re: Need a simple Dashboard example
                          Threadstone Level 1

                          Thank you, Here is my code

                           

                          <mx:Script>

                              <![CDATA[

                                  import mx.collections.ArrayCollection;

                                  import mx.rpc.events.ResultEvent;

                                 

                                  [Bindable]

                                  private var datalist:ArrayCollection;

                                 

                                  private function resultHandler(event:ResultEvent):void{               

                                          datalist = event.result.data.row;

                                  }

                                  public function doSend():void {

                                      xmlFromDatabase.url = "http://localhost/NewFlex-debug/history/User.php";

                                      xmlFromDatabase.send();

                                  }      

                              ]]>

                          </mx:Script> 

                             <mx:HTTPService url="http://localhost/NewFlex-debug/history/User.php"

                              id="xmlFromDatabase"

                              showBusyCursor="true"

                              result="resultHandler(event)"

                              method="GET" />

                              <mx:DataGrid x="345.5" y="106" dataProvider="{datalist}" id="dg" backgroundColor="#FFFFFF">

                                

                                  <mx:columns>

                                      <mx:DataGridColumn headerText="User Id" dataField="userid"/>

                                      <mx:DataGridColumn headerText="User Name" dataField="username"/>

                                      <mx:DataGridColumn headerText="Salary" dataField="Salary"/>

                                  </mx:columns>

                              </mx:DataGrid>

                             

                              <mx:Label x="384.5" y="42" text="My First Flex App" color="#269FB9" fontSize="25" fontFamily="Georgia" textAlign="center" fontStyle="italic" fontWeight="bold"/>

                           

                          </mx:Application>

                           

                          Here I'm displaying data onto a grid....

                           

                          Just want to represent the data on a graph!

                           

                          How I can do that ?

                           

                          Thanks!

                          • 10. Re: Need a simple Dashboard example
                            Threadstone Level 1

                            Btw I didn't find any code attached...?

                            • 11. Re: Need a simple Dashboard example
                              flex_heman Level 1

                              sorry yar..some error while attachin file...check it now

                              • 12. Re: Need a simple Dashboard example
                                Threadstone Level 1

                                Still Buddy ..I couldn't ...I can see the file names but the links are inactive.

                                 

                                Suggest me ..How I can go about with my code.

                                 

                                Thank you!

                                • 13. Re: Need a simple Dashboard example
                                  flex_heman Level 1

                                  this is the mxml file

                                   

                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
                                      <mx:Script>
                                          <![CDATA[
                                              import mx.collections.ArrayCollection;
                                              import mx.rpc.events.ResultEvent;
                                              [Bindable] private var dataColl:ArrayCollection;
                                             
                                              private function init():void{
                                                  xmlServ.send();
                                              }
                                             
                                              private function handleResult(event:ResultEvent):void{
                                                  dataColl = (event.result as ArrayCollection).getItemAt(0).main as ArrayCollection;
                                              }
                                          ]]>
                                      </mx:Script>
                                      <mx:HTTPService id="xmlServ" url="data.xml" resultFormat="array" result="handleResult(event)"/>
                                      <mx:TabNavigator id="myTabz" width="100%" height="100%">
                                          <mx:Canvas label="DataGrid" width="100%" height="100%">
                                              <mx:DataGrid dataProvider="{dataColl}" width="100%" height="100%">
                                                  <mx:columns>
                                                      <mx:DataGridColumn dataField="Products" headerText="Products"/>
                                                      <mx:DataGridColumn dataField="stock" headerText="Stock"/>
                                                  </mx:columns>
                                              </mx:DataGrid>
                                          </mx:Canvas>
                                          <mx:Canvas label="Line Chart" width="100%" height="100%">
                                              <mx:LineChart id="myLineChart" dataProvider="{dataColl}" showDataTips="true" width="100%" height="100%">
                                                  <mx:horizontalAxis>
                                                      <mx:CategoryAxis dataProvider="{dataColl}" categoryField="Products"/>
                                                  </mx:horizontalAxis>
                                                  <mx:series>
                                                      <mx:LineSeries yField="stock" displayName="Stock"/>
                                                  </mx:series>
                                              </mx:LineChart>
                                          </mx:Canvas>
                                          <mx:Canvas label="Bar Chart" width="100%" height="100%">
                                              <mx:BarChart id="myBarChart" dataProvider="{dataColl}" showDataTips="true" width="100%" height="100%">
                                                  <mx:verticalAxis>
                                                      <mx:CategoryAxis dataProvider="{dataColl}" categoryField="Products"/>
                                                  </mx:verticalAxis>
                                                  <mx:series>
                                                      <mx:BarSeries yField="Products" xField="stock" displayName="Stock"/>
                                                  </mx:series>
                                              </mx:BarChart>
                                          </mx:Canvas>
                                          <mx:Canvas label="Pie Chart" width="100%" height="100%">
                                              <mx:PieChart id="myPieChart" dataProvider="{dataColl}" showDataTips="true" width="100%" height="100%">
                                                  <mx:series>
                                                      <mx:PieSeries field="stock" nameField="Products" labelPosition="inside"/>
                                                  </mx:series>
                                              </mx:PieChart>
                                          </mx:Canvas>
                                      </mx:TabNavigator>
                                  </mx:Application>

                                   

                                   

                                   

                                  and the data.xml is

                                  <?xml version="1.0"?>
                                  <main>
                                      <Products>Products 1</Products>
                                      <stock>36</stock>
                                  </main>
                                  <main>
                                      <Products>Products 2</Products>
                                      <stock>48</stock>
                                  </main>
                                  <main>
                                      <Products>Products 3</Products>
                                      <stock>46</stock>
                                  </main>
                                  <main>
                                      <Products>Products 4</Products>
                                      <stock>78</stock>
                                  </main>

                                  • 14. Re: Need a simple Dashboard example
                                    flex_heman Level 1

                                    in ur code

                                     

                                    wat is data.row in

                                    datalist =  event.result.data.row;

                                     

                                    when are u sending ur request ...

                                    u have already mentioned ur url in mxml tag..once again y  r u adding in as??..it is not needed..

                                     

                                    whether it is xml node??...can u give ur xml generated frm php??..

                                     

                                    ur datagrid is filled with the datas from the php??

                                    • 15. Re: Need a simple Dashboard example
                                      Threadstone Level 1

                                      Here it is..

                                       

                                      <?php

                                      //SQL Connection Info - update with your database, username & password

                                      $connection = mysql_connect('localhost', 'root', 'xxxx') or die ('cannot reach database');

                                      $db = mysql_select_db("mysql") or die ("this is not a valid database");

                                       

                                      //Change this query as you wish for single or multiple records

                                      $result = mysql_query("SELECT * FROM users");

                                       

                                      //Get the number of rows

                                      $num_row = mysql_num_rows($result);

                                       

                                      //Start the output of XML

                                      echo '<?xml version="1.0" encoding="iso-8859-1"?>';

                                      echo "<data>";

                                      echo '<num>' .$num_row. '</num>';

                                      if (!$result) {

                                         die('Query failed: ' . mysql_error());

                                      }   

                                      /* get column metadata - column name -------------------------------------------------*/

                                              $i = 0;

                                              while ($i < mysql_num_fields($result)) {

                                                    $meta = mysql_fetch_field($result, $i);

                                                  $ColumnNames[] = $meta->name;                      //place col name into array

                                                  $i++;

                                              }

                                      $specialchar = array("&",">","<");                                            //special characters

                                      $specialcharReplace = array("&amp;","&gt;","&lt;");            //replacement

                                      /* query & convert table data and column names to xml ---------------------------*/

                                       

                                      $w = 0;   

                                      while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {

                                         echo "<row>";

                                          foreach ($line as $col_value){

                                              echo '<'.$ColumnNames[$w].'>';

                                              $col_value_strip = str_replace($specialchar, $specialcharReplace, $col_value);       

                                              echo $col_value_strip;

                                              echo '</'.$ColumnNames[$w].'>';

                                              if($w == ($i - 1)) { $w = 0; }

                                              else { $w++; }

                                             }

                                          echo "</row>";

                                      }

                                      echo "</data>";

                                      mysql_free_result($result);

                                      ?>

                                      • 16. Re: Need a simple Dashboard example
                                        flex_heman Level 1

                                        can u post ur final xml wat u r getting frm php?

                                        • 17. Re: Need a simple Dashboard example
                                          Threadstone Level 1

                                          The PHP script is dynamically generating the XML file..

                                           

                                          I hope the xml should be something like this.

                                           

                                          <row>

                                          <userid>   xxxx  </userid>

                                          username>xxxx  </username>

                                          <salary> xxxx </salary>

                                          </row>

                                          <row>

                                          -------

                                          -------

                                           

                                          --------

                                           

                                          -------

                                           

                                          </row>

                                          • 18. Re: Need a simple Dashboard example
                                            Threadstone Level 1

                                            I think I have provided you the wrong xml..

                                             

                                            Check this one...

                                             

                                             

                                            <?php

                                            //SQL Connection Info - update with your database, username & password

                                            $connection = mysql_connect('localhost', 'root', 'xxx') or die ('cannot reach database');

                                            $db = mysql_select_db("mysql") or die ("this is not a valid database");

                                             

                                            //Change this query as you wish for single or multiple records

                                            $result = mysql_query("SELECT * FROM users");

                                             

                                            //Get the number of rows

                                            $num_row = mysql_num_rows($result);

                                             

                                            //Start the output of XML

                                            echo '<?xml version="1.0" encoding="iso-8859-1"?>';

                                            echo "<data>";

                                            echo '<num>' .$num_row. '</num>';

                                            if (!$result) {

                                               die('Query failed: ' . mysql_error());

                                            }  

                                            /* get column metadata - column name -------------------------------------------------*/

                                                    $i = 0;

                                                    while ($i < mysql_num_fields($result)) {

                                                          $meta = mysql_fetch_field($result, $i);

                                                        $ColumnNames[] = $meta->name;                      //place col name into array

                                                        $i++;

                                                    }

                                            $specialchar = array("&",">","<");                                            //special characters

                                            $specialcharReplace = array("&amp;","&gt;","&lt;");            //replacement

                                            /* query & convert table data and column names to xml ---------------------------*/

                                             

                                            $w = 0;  

                                            while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {

                                               echo "<row>";

                                                foreach ($line as $col_value){

                                                    echo '<'.$ColumnNames[$w].'>';

                                                    $col_value_strip = str_replace($specialchar, $specialcharReplace, $col_value);      

                                                    echo $col_value_strip;

                                                    echo '</'.$ColumnNames[$w].'>';

                                                    if($w == ($i - 1)) { $w = 0; }

                                                    else { $w++; }

                                                   }

                                                echo "</row>";

                                            }

                                            echo "</data>";

                                            mysql_free_result($result);

                                            ?>

                                            • 19. Re: Need a simple Dashboard example
                                              flex_heman Level 1

                                              if ur xml is dis

                                              <row>

                                              <userid>   xxxx  </userid>

                                              username>xxxx  </username>

                                              <salary> xxxx </salary>

                                              </row>

                                              <row>

                                              -------

                                              -------

                                               

                                              --------

                                               

                                              -------

                                               

                                              </row>

                                               

                                              then in flex

                                               

                                              HTTP service resulthandler function will be

                                               

                                              HandleResult (event:ResultEvent):void

                                              {

                                                 var XMLResult = new XML(event.result.toString());

                                                 var arrColl:ArrayCollection = new ArrayCollection();

                                                 var index:String;

                                                   for (index  in XMLResponse.row)

                                                   {

                                                     arrColl.addItem({userid:XMLResponse.row.userid[str],

                                                                            username:XMLResponse.row.username[index],

                                                                             salary::XMLResponse.row.username[index] });

                                               

                                                   }

                                                   now this arrcoll will have ur data from php...hope this help u

                                               

                                               

                                               

                                              }         

                                              • 20. Re: Need a simple Dashboard example
                                                Threadstone Level 1

                                                So, I can assign arrColl as a dataprovider to a chart...is that right ?

                                                • 21. Re: Need a simple Dashboard example
                                                  Michael Borbor Level 4

                                                  You usually will do that, because when you use an ArrayCollection your data can be updated somewhere else in your app or in your server and when this happens your chart will be updated. Just don't forget to add the [Bindable] metatag.

                                                  • 22. Re: Need a simple Dashboard example
                                                    flex_heman Level 1

                                                    ya u can assign arrcollection as a dataprovider  to the graph and datagrid.And as micheal said dont forget to add [Bindable]tag to ur arrcollection...

                                                    • 23. Re: Need a simple Dashboard example
                                                      linrsvp

                                                      Hey any good dashboard examples in flex 4 ?

                                                      • 24. Re: Need a simple Dashboard example
                                                        Gregory Lafrance Level 6

                                                         

                                                        This might be of interest.

                                                         

                                                        I created a tutorial on converting the Adobe Flex 3 example Dashboard application to Flex 4.

                                                         

                                                        The tutorial is here:

                                                         

                                                        http://stardustsystems.com/learning/flex4/tutorials/portDashboardToFlex4/index.html

                                                         

                                                        There are links to the tutorial PDF, the converted applicaton, and the source code.

                                                         

                                                        Hope this helps someone.

                                                         

                                                        http://www.stardustsystems.com

                                                        http://www.stardustsystems.com/blog

                                                         

                                                        • 25. Re: Need a simple Dashboard example
                                                          Atishay Jain Level 1

                                                          Creating interactive dashboards in Flex, If you wany you can check this weather dashboard Example-

                                                           

                                                          This may help try http://www.actionscript.org/resources/articles/911/1/Creating-interactive-dashboards-in-Fl ex-Weather-dashboard-Example/Page1.html

                                                           

                                                          Here you will see how to create an interactive weather dashboard in Adobe Flex. Dashboards can be of many types - financial, manufacturing, retail, health etc. they have chosen weather dashboard as an example as it is domain agnostic, calls for varied type of data visualization, and is easy to understand.

                                                           

                                                          Regards

                                                          Atishay jain

                                                            http://bit.ly/e1No6Q