Real-time Animated Graphing using Flash MX, Part 4By Pallav Nadhani
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:
The following simple HTML page could be used to display the results of the poll in an animated graph on the user's computer.
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
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
<graph> element. Next, it would retrieve all the rows from the
table, and for each row it would emit a
<set> element. Finally, when complete, it
would emit the closing
The pseudocode for this page would look as follows:
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:
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.
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 email@example.com.