Updated: February 6, 2010
Do you have a boss who's easily impressed by fancy visual tricks, regardless of the content? Are you a marketing kind of guy? Do you own a website and would like to enliven the pages with some stunning flash graphs? Do you require online presentation tools that go beyond static Web pages? Then you ought to take a look at FusionCharts.
FusionCharts is a Flash charting software that lets you integrate aesthetically pleasant, animated Flash graphs and charts into your Web projects. FusionCharts offers a wide range of 2D and 3D charts, including area, bar, pie, column, scatter, and many others, all of which can be used with plain HTML files or ASP, PHP, Ruby on Rail, Python, and other web technologies. FusionCharts also works with databases, like SQL and Oracle.
FusionCharts is one the many products by InfoSoft. Among other offerings, you will find Flash widgets for dashboards, Flash maps and interactive charts for Adobe Flash, Dreamweaver, FileMaker, Visual Basic, and Google Gadgets.
All of these programs cost money, but FusionCharts also features a free version! Although less powerful than the payware solution, FusionCharts Free is more than adequate for most home users. Furthermore, it's very non-intrusive, with no shareware-style watermark branding.
Intrigued? Well, let me show you how you can setup FusionCharts. In this tutorial, I'll demonstrate with FusionCharts v3, which you can trial for a while. Well, I leave all the legal aspects to you. For a comparison between the two, please examine the following page.
Download and setup
You will have to register to download FusionCharts. After you have downloaded the archive to your machine, extract the downloaded zip file it into any folder of your choice.
Open the folder where you just extracted FusionCharts. You will notice that it contains quite a few sub-folders.
The file Index.html is a documentation/help file that will help you create your first Web project and use FusionCharts inside it. You should spend some time reading the instruction, but you can also skim through my article.
Create a project
You need to create a directory for your project. Once you have created it, copy all the files contained inside the Charts sub-folder into your project folder. You will notice these files are in SWF format. Next, copy the FusionCharts.js file from the JSClass folder into your project folder.
Note: Users of the freeware version will also have the script available. However, the available collection of chart types will be smaller. Please refer to the comparison above for more details.
Of course, you do not really have to do this, you can use any which directory you want and then use relative paths in your Web code to point to the right files, as you would with any Web project. However, the very first time you use FusionCharts, it's easier if the Web page, the scripts and the Flash charts are all in the same folder.
The next step is to copy and create your data for the chart. FusionCharts requires that you use XML as the data container.
In the free version, you will have to create the file on your own, using a text editor. The full-featured v3 lets you use the XML Generator Utility, which ic really handy, as it lets you automatically convert your settings to HTML or related code.
The XML Generator can be found in the Tools sub-folder.
Enter the data any which way you want. Once done, click Convert to XML.
Your data will now show in XML format. As I mentioned earlier, you could have made the file yourself, using the text editor, like Notepad, for example. Indeed, you will have to copy the code into the text editor and save the file as something.xml.
The FusionCharts guide recommends you call the file Data.xml. If you're not comfortable with editing HTML files by yourself, then you should definitely use the default name. Otherwise, you can use any which name you want.
Click on Configure Chart to customize the look and feel of the chart. You can add title and sub-title for your chart and the axes, change the color palette, show values in the graph, and other associated properties.
Next, click on Generate HTML to create your file. Here, you can choose the chart type. This value points directly to the SWF files we copied earlier, so if you've copied only a subsection of chart files from the Charts sub-folder, make sure you have them in your project folder. Otherwise, your project won't really work. It's same as not having an image file where it ought to be.
You can also change the width and the height of the graph. You can tweak this later manually by changing the HTML code.
Finally, copy the contents into a text editor and create your own HTML file. Call it whatever you want. For more details, please refer to the Index.html file included with the downloaded package.
Let's take a look at our files. Here's the Data.xml file:
As you can see, it's standard XML. You can edit this file directly if you want or know how to. You can change the values and keys, you can edit the chart caption and more.
Here's the HTML file:
There's our file. The bit you want is contained between the two comments, Start Code for FusionCharts chart and End code for FusionCharts chart. You can copy it into any project you want. Notice the relative paths to the .js file, .swf file, the chart size, etc. You can customize all these as you see fit. Now, let's see what FusionCharts can do.
There you go, really fancy stuff, some 2D and 3D pies:
Another example, 3D bar:
Let's see what these lovely charts look like when integrated into a webpage, with some text before and after the chart, making for a very decent article:
The graphs also have a lovely entrance animation when loaded, which adds style. Here's what it looks like, recorded using Wink:
Before I jump to Conclusion [sic], here's a short list of steps you will need to perform to get FusionCharts up and running:
- Download and extract the archive.
- Create chart data, copy it into a text file and save it as Data.xml.
- Create HTML code, customize it and copy it into a text file and save it; name it whichever way you like. You can use relative or absolute paths for the location of all relevant files. Advanced users will tweak the setup any which way they want.
- Load the newly created HTML file inside the Web browser and start enjoying your cool charts. Change the keys, values, caption, size, type, palette to suit your needs.
As you can see, setting up FusionCharts is not a plug-and-play deal, but it is definitely doable. If you're already familiar with Web design of some sort, after all why would you not be if you intend to use an online presentation technology, then using FusionCharts will be a breeze for you. If you're a newbie, there's some work ahead of you, but hopefully, my tutorial has made it simple.
FusionCharts is definitely a useful, unique technology. It allows you to enrich your online presentations, quickly and easily. Best of all, you need not be a code master to use FusionCharts. The hard work has already been done, you just have to make those fancy graphs sit well on your Web pages.
Combined with Wink and perhaps Slidy, you're in for a treat. If you're serious about it, you may even want to consider buying the full, payware version.
I hope you've enjoyed this tutorial. See you around.