To read the article online, visit http://www.4GuysFromRolla.com/webtech/111302-1.4.shtml

Real-time Animated Graphing using Flash MX, Part 4

By Pallav Nadhani


  • Read Part 1
  • Read Part 2
  • Read Part 3

  • In Part 3 we looked at how to have our Flash movie actually create an animated graph. In this fourth and final part, we'll look at how to use FunkyChart to plot data from both a static XML data file and from a dynamically generated XML file.

    Using FunkyCharts with Static XML Data Files
    Let's look at an example using FunkyCharts to plot the data from a static XML data file. We will take the case of a small survey company which conducts a new poll everyday. People take part in the poll via the company's Web site. The poll results are delivered to the site's administrator via email who then collects the data manually from the mails and then rolls this data everyday into an XML data file, which is then uploaded to the Web server.

    Assume that this XML file, Data.xml, contains the following content:

    <graph bgcolor="ffeaea" xaxisname="Name" yaxisname="Votes obtained" 
           yaxisminvalue="0" yaxismaxvalue="10000" 
           caption="Who will be the next Formula 1 Champion?" >
       <set name="M. Sch" value="7365" color="3300FF"/> 
       <set name="R. Sch" value="3344" color="FF0000" /> 
       <set name="Coult" value="1342" color="009966"/> 
       <set name="Barri" value="3764" color="0099ff"/> 
       <set name="Monto" value="2198" color="0372AB"/> 
       <set name="Irvine" value="3633" color="FF5904"/> 
    </graph>
    

    The following simple HTML page could be used to display the results of the poll in an animated graph on the user's computer.

    <HTML>
    <BODY bgcolor="#FFFFFF">
      <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
        WIDTH="350" HEIGHT="300" id="FunkyCharts" ALIGN="">
         <PARAM NAME=movie VALUE="FunkyCharts.swf?dataURL=data.xml"> 
         <PARAM NAME=quality VALUE=high> 
         <PARAM NAME=bgcolor VALUE=#FFFFFF> 
         <EMBED src="FunkyCharts.swf?dataURL=data.xml " quality=high 
              bgcolor=#FFFFFF  WIDTH="350" HEIGHT="300" NAME="FunkyCharts" 
              ALIGN="" TYPE="application/x-shockwave-flash" 
              PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
         </EMBED>
      </OBJECT>
    </BODY>
    </HTML>
    [View a Live Demo!]

    Take a moment to view the live demo. As you can see, the graph is generated using Flash served up from a simple HTML page. The graph is drawn in an aesthetically-pleasing, animated way.

    Using FunkyCharts with XML Data Files Created On the Fly
    In the previous example, we saw how to use FunkyCharts with static XML files. However, if you are wanting to graph continuously updating information, such as stock price information, you will need to produce the data XML files on the fly. Assuming that the dynamic data you wish to plot is stored in a database, you can use an ASP or ASP.NET Web page to grab that data from the database and produce the correct XML format.

    For example, imagine that you had a database table named DailyStoreProfits that contained two fields: DateRecorded, a date/time field, and Profits a money field. Essentially, this table would have a new record added to it every day, representing the profit for the store on the particular day. To graph this information using FunkyCharts we could create an ASP or ASP.NET Web page that first emitted a <graph> element. Next, it would retrieve all the rows from the DailyStoreProfits table, and for each row it would emit a <set> element. Finally, when complete, it would emit the closing <graph> element.

    The pseudocode for this page would look as follows:

    Response.Write("<graph bgcolor=""..."" ...>")
    
    For Each row in the Database Results
      Response.Write("<set name=""VauleOfDateRecordedField"" " & _
                          "value=""ValueOfProfitsField"" />")
    Next
    
    Response.Write("</graph>")
    

    When this ASP/ASP.NET Web page was called, it would product XML output like:

    <graph bgcolor="..." ...>
      <set name="01/16/03" value="54,000.50" />
      <set name="01/17/02" value="34,000.00" />
      ...
    </graph>
    

    Now, to display this data in FunkyCharts, you simply use the same HTML as shown for the static XML file, except rather than referencing a static XML file (data.xml in the previous example) reference the ASP/ASP.NET Web page, as shown below:

    <OBJECT ...>
     <PARAM NAME=movie VALUE="FunkyCharts.swf?dataURL=Shares.aspx"> 
     <PARAM NAME=quality VALUE=high> 
     <PARAM NAME=bgcolor VALUE=#FFFFFF> 
     <EMBED src="FunkyCharts.swf?dataURL=Shares.aspx" quality=high 
          bgcolor=#FFFFFF  WIDTH="350" HEIGHT="300" NAME="FunkyCharts"
          TYPE="application/x-shockwave-flash" 
          PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
      </EMBED>
    </OBJECT>
    

    Conclusion
    So, now that you have your own "Flashy" graph, you don't need to depend on some 3rd-Party solution that requires extra money for licensing and installation. You can easily customize the graph according to your needs and deliver it to your audience. Also, unlike static graphs, the animated graph makes viewing a pleasure. Also, the conversion of data from some DB to XML format (which the graph needs) is very easy to do.

    There are a plethora of other graphing options that are available through Flash, and I highly encourage you to visit the sites referenced earlier for more ideas on feature enhancements.

    Happy Programming!

  • By Pallav Nadhani


    Attachments

  • Download the files and Flash movie (in ZIP format)


    About the Author
    Pallav Nadhani is a technology architect working with InfoSoft - a company which specializes in Portals and customised application development in distributed environment. He specializes in bleeding edge web technologies like Flash MX, ASP.NET, XML, ASP, C#, SQL 2000 etc. He is also the co-author of Flash.NET - Dynamic Content for Designers with Flash Remoting MX and ASP.NET, which deals with integration of ASP.NET and Flash MX. When he's not working, he spends his time listening music and freaking out with friends. He can be contacted at pallav@nadhani.com.


  • Article Information
    Article Title: Real-time Animated Graphing using Flash MX, Part 4
    Article Author: Pallav Nadhani
    Published Date: Wednesday, November 13, 2002
    Article URL: http://www.4GuysFromRolla.com/webtech/111302-1.4.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers