Make stunning graphs with FusionCharts


Updated: February 6, 2010


This article includes Flash movies!

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.

Teaser

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.

First steps

Open the folder where you just extracted FusionCharts. You will notice that it contains quite a few sub-folders.

Directory

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.

Create data

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.

Launch

XML generator

Enter the data any which way you want. Once done, click Convert to XML.

Creating data

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.

Done

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.

Chart options

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.

HTML

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.

Review data

Let's take a look at our files. Here's the Data.xml file:

Data

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:

Edit HTML

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.

Superb graphs

There you go, really fancy stuff, some 2D and 3D pies:

Cropped

3D cropped

Another example, 3D bar:

Another example

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:

Example 1

Example 2

Now, the best part is, you can manipulate the graphs, rotate them, detach bits of the data, all sorts of cool tricks. Of course, you must have Javascript enabled and Flash plugin installed for the whole affair to work.

The graphs also have a lovely entrance animation when loaded, which adds style. Here's what it looks like, recorded using Wink:

And another one:

I've used a desktop recording software and exported the output to Flash. So we have a Flash movie about Flash technology. Wicked, eh.

Mini-summary

Before I jump to Conclusion [sic], here's a short list of steps you will need to perform to get FusionCharts up and running:

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.

Conclusion

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.

Cheers.

RSS Feed icon

del.icio.us del.icio.us stumbleupon stumble digg digg reddit reddit slashdot slashdot



Advertise!

Would you like to advertise your product/site on Dedoimedo?

Read more

Donate to Dedoimedo!

Do you want to
help me take early retirement? How about donating
some dinero to
Dedoimedo?

Read more

Donate