Get Your Charts in a Flash!By Pallav Nadhani
|This article assumes that you have the basic ability to create Flash 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.) For more information about Flash consider visiting FlashKit and Macromedia's Flash Site.|
Macromedia Flash is a client-side platform for vector graphics, animations, interactive content and even video delivery that is commonly used to enhance a user's experience with a Web site. Flash is much more than just pretty pictures, though, as it comes with a complete scripting language called ActionScript. 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 suited to your needs.
In my previous article, Real-time Animated Graphing using Flash MX, I illustrated how to unleash the power of Flash to create an animated line chart component. In this article, we are going to move a step ahead and create an integrated suite of three charts inside a Flash movie (we'll be using the Flash Charting Components).
A common question I am asked is why I prefer to do charting in Flash, when the same can be done easily with various COM/.NET components. In fact, I touched upon this question in my previous article. The key reasons I prefer Flash over competing Web charting technologies are:
- Installation Affairs - Firstly, if you are using COM or .NET components for your charting needs, you need to install these components on the server, insert some keys in the registry and so on. This can be an issue for some Web sites where the Web host provider does allow for COM components to be installed on the Web server or, if they do, they charge and arm and a leg for such services.
- Efficiency Factor - Secondly, although the COM and .NET components can 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 objects into the Web server's memory puts a tremendous strain on the server and doesn't scale well.
- Versatile and Flexible - Using COM and .NET components, do you get sleek looking and interactive graphs? Do you get advanced options like hover captions, hot spots and much more? With the Flash charts we will be building in this article, you will get all of these features!
In this article, I'll illustrate the creation of an integrated chart component in Flash MX with the ability to render the three basic charts: bar, line and pie. The charts would be contained inside a Flash movie and switching from one chart type to another requires nothing more from than user than a single mouse click. (And switching between chart types does not incur a postback to the Web server!) I have dubbed charting solution we'll be examining in this article FlashCharts.
In the previous section we saw some disadvantages of using COM or .NET components for charting. On top of the disadvantages in using COM or .NET components, there are a plethora of advantages in using Flash for your charting needs, which include:
- No need to install a COM component on the Web server.
- A reduced load on the Web server, since all of the processing work is done on the client-side. The server simply provides the data to build the graph. The only requirement for the client is that it needs to have the Macromedia Flash plug-in, which is very common nowadays. (In fact, modern browsers ship with the Flash plug-in already added in. Those users that do not have the Flash plug-in can download it for free from Macromedia's Web site.)
- FlashCharts 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 FlashCharts, 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. However, all I want to add is that such advanced features are quite possible.
If the above points also fail to inspire you, the following external links to Flash based graphing solutions (with 100% similar model as FlashCharts and a few of them available with source codes) would definitely give you the push to read this article in its entirety. The Web sites worth checking out include:
- FusionCharts - A Flash based 3D and 2D animated charting component with some really sexy options. Check it out at http://www.InfoSoftGlobal.com/FusionCharts
- fXgraph - An integrated suite of five charts. This one also offers some cool options, the best being the integrated charts. Check out fXgraph at http://www.InfoSoftGlobal.com/fXgraph.
Hopefully you are now convinced that Flash-based charting provides a better alternative to COM or .NET components, let's get our hands dirty and create our first chart using Flash Charting Components. First, we need to see what Flash Charting Components are and how to install them.
Flash Charting Components
Flash Charting components provide Flash MX developers with an additional set of Flash MX components for creating basic charts with their applications. The charting components included are:
- Bar Chart Component
- Line Chart Component
- Pie Chart Component
To install the Flash Charting component you need to have Macromedia Extension Manager on your system. In case you don't have it, you can download it for free from http://download.macromedia.com/pub/dw_exchange/extension_manager/win/em_install.exe. Macromedia Extension Manager aids in installing new extensions and helps manage the extensions that come with the Macromedia Extension Manager. The Macromedia Extension Manager runs side-by-side with Macromedia Dreamweaver, Dreamweaver UltraDev, Fireworks and Flash. To install Extension Manager, complete the following steps:
- Download the Extension Manager installer and save it on your machine.
- Double-click the installer to begin the installation process.
- Buzz off through the customary screens.
Once you have the Macromedia Extension Manager installed, you now need to download the Flash
Charting component extension from the Macromedia Exchange. You can download it from
Installing the Flash Charting components is an absolute breeze. Just double-click on the extension's
.mxp file and buzz through the installation screens. At the end of the installation,
you'll get a screen like the one to the right, stating that the installation has been successful.
Furthermore, after installation, the Macromedia Extensions Manager will show that the Charting Components
have been installed.
We are now ready to create our own charting solutions using Flash Charting Components. First of all, we'll see how to create a very simple chart using Flash Charting components. We'll tackle this step in Part 2 of this article.