Real-time Animated Graphing using Flash MXBy Pallav Nadhani
|System Requirements for this Article|
This article assumes that you have the ability to create Flash animations and movies. However, this requires
Macromedia's Flash MX software. You can obtain a 30 day trial version of Flash MX from Macromedia's
Web site at http://www.Macromedia.com. To purchase Flash MX be
prepared to dole out $499. (Flash MX runs on any Windows 9x/NT/ME/2000/XP machines.)
Macromedia Flash MX has now become the professional standard authoring tool for producing high-impact Web experiences. Whether you are creating animated logos, Web site navigation controls, long-form animations, entire Flash Web sites, or Web applications, you'll find the power and flexibility of Flash MX. In this article, we will go ahead to crank out an impressive but simple (and flexible!) real time animated graphing solution in Flash MX! (For product information regarding Flash MX visit: http://www.macromedia.com/software/flash/. This article assumes that you own the software needed to create Flash movies.)
Imagine that you were asked by your boss to create a Web site for your company that included real-time graphing capabilities. If you are at all like me, you'd likely think to accomplish this you would need to use some (expensive) 3rd party COM components/Active-X controls to render an image on the server-side that represents some dynamically generated graph of data. However, there are a few points to consider before using such 3rd party COM components:
- You need to install them on the server, insert some keys in the registry and so on. If you are hosting a site through a Web hosting company they may not allow you to install software of this nature on the Web server. Even if they allow it, they may charge you for it! My shared server provider charges me $50.00 to host an additional COM component. Add to that the amount you'll have to pay for the license fee of the component (ranging from a few hundred bucks to those in thousands!!!) and you're looking at a pretty expensive solution!
- Although these components render sophisticated looking graphs, they consume a lot of server resources. In a solution that needs to provide graphs to hundreds of concurrent users, loading bulky COM components in the memory puts a tremendous strain on the server and doesn't scale very well - after all a memory cycle saved is a memory cycle earned!!!
- Do you get sleek looking animated and interactive graphs? Do they offer you advanced and cool options like hover captions, animation patterns, hot spots and much more?
In this article, I'll illustrate the creation of a fairly simple animated line chart in Flash MX, which does not over-tax the server, yet is presentable and scalable, and can be personalized according to site's theme and content (let's call the charting solution FunkyCharts for kicks).
You may be wondering why Flash is a good choice for creating charts. There are several good reasons, including:
- No need for to install a COM component on the Web server. So even on those servers which do not have the components installed or do not allow installation of new components, FunkyCharts can run smoothly. All you need to do is upload the core SWF files to the server (yup - the lovely old XCopy mode) and configure them via XML data files.
- Animated graphs add to aesthetics of the site. The graphs made by COM components are static GIF or JPEG files. But, the graphs rendered by FunkyCharts are sleek looking animated graphs whose looks and additional properties can easily be customized by the data XML file.
- Reduces the load on the server since all of the processing work is done on the client-side and the server is just required to provide the data to build the graph. The only requirement for the client is that it needs to have Macromedia Flash plug-in, which is very common nowadays. (In fact, modern browsers ship with the Flash plug-in already added in.)
- FunkyCharts is compatible with any server-side scripting languages, such as ASP, ASP.NET, JSP, PHP, Perl, CGI, CF etc. As the processing is done on the client-side, it does not matter what scripting language is passing the XML data to the component - and by nature XML data is platform independent. It can also be customized to take data from text files and so it can work on a static server too (where text files or XML files containing data can be updated frequently).
- If you so wish, you can provide interactivity to the user, like zooming in, zooming out, moving across the graphs (using the arrow keys), and so on.
- With FunkyCharts, you can add a plethora of customization options like setting transparency, color themes, hotspots, hover captions etc. We won't talk much about these in this article as I don't really intend to write "The Bible of Graphing" in this short space.
If the above points also fail to inspire you, the following external links to Flash based graphing solutions (a few of them available with source codes) would definitely give you the push to read this article in its entirety, save a copy of this page on your hard-disk and throw away your current graphing component into the junk box (okay - that's too much I guess!!!). The Web sites worth checking out include:
This article is geared toward developers who have a working knowledge of ASP or ASP.NET and a basic knowledge of Flash MX and ActionScript (like handling the Flash MX Authoring Interface, Dragging and Placing Form Elements, naming them etc.) You can refer to the Macromedia Flash MX online documentation to learn these basic concepts, or you can try the Getting Started Tutorials.
Flash MX has a very intuitive interface and it should not take you much to get started with it. Feel free to click around and use the tools present in the tool bar until you're comfortable. If you end up getting some weird stuff going due to random clicking, dragging and toggling, close the document without saving, open a new document and continue exploring (with a little less clicking, dragging and toggling).
We are going to create a Flash MX movie which will accept an XML document from a server side application with a pre-defined structure containing the graph parameters. This Flash MX movie will then parse the XML file and then render the graph based on those values. In this article, we'll focus on a basic line chart only. First, we will use a static XML document to generate graphs, and then we will move on to the server side scripting part for real-time graphing.
The entire data communication model can be visualized as illustrated in the diagram below:
In words, this model can be described in the following steps:
- The HTML wrapper page in which FunkyCharts is embedded sends the Data Source URL to FunkyCharts
via the Object/Embed method (i.e., by appending the Data Source URL as in a querystring to the end of
the file name
FunkyCharts.swf- we'll soon cover this topic). For example, this feat could be accomplished by the following code:
<OBJECT ... <PARAM NAME=movie VALUE=" FunkyCharts.swf?dataUrl=Data.xml"> ... </OBJECT>
- FunkyCharts receives the Data Source URL, and then sends a request to the URL to send the XML Content.
- The Page at Data Source URL receives the request to serve XML Content. It queries the database, does some processing, generates an XML Document, and sends it to the output stream.
- FunkyCharts receives the XML Content from the page at Data Source URL, parses it and then displays the graph according to the parameters and data contained in the XML Document.
While this may all seem a bit confusing right now, as we explore each of these pieces independently you will see how they all fit together. In Part 2 we'll delve into the structure of the XML file that is used to relay plotting information from the Web server to the Flash movie.