One of our sites has a page of medical treatment statistics. I was never that enthused about how it looked visually – a bunch of tables doesn’t exactly grab your attention – and so I decided to see what I could do in the way of adding some graphs to make the data easier to grasp.
After some searching around the web I came across Fusion Charts, a product for creating Flash-based online graphs and charts.
I was immediately impressed at Fusion Charts’ ease of use and flexibility – once you have your chart created it is very straight forward to customize it to your design needs.
And no, you don’t need to have any Flash skills as you don’t ever touch the SWFs themselves.
The Power of XML
This is because each graph is powered by an XML file which contains all the graph data and display preferences. Thus, to use the graphs on your site, all you have to do is:
- Upload the folder of default graphs/charts to your site.
- Create an XML file for each graph you want to display.
- Embed the Flash into your web page.
Like I said, you never have to touch the actual Flash files and you can even include the graph data within the code to embed the Flash file into your page if you want (although it is much cleaner to keep it in separate XML files).
The XML itself is very simple to pick up. Here’s an example:
<graph xaxisname='' yaxisname='Number of Patients' canvasBorderThickness='1' caption='' subcaption='' formatNumberScale='0' formatNumber='0' lineThickness='1' animation='1' showNames='1' alpha='100' showLimits='1' decimalPrecision='0' rotateNames='1' numDivLines='7' showValues='1' baseFontSize='11' hoverCapBgColor='ffffcc' yAxisMaxValue='1600'> <categories> <category name='Total ' /> </categories> <dataset seriesName=' Existing Patients' color='c9a7df'> <set value='1041' /> </dataset> <dataset seriesName=' New Patients' color='afd8f8'> <set value='466' /> </dataset> </graph>
The help docs on the Fusion Charts web site provides all the information you need to understand what each of these parameters does. It’s not rocket science.
Accessibility
One thing I did change was the way that the Flash files were embedded into the page. I used the FlashObject method which has the benefit of making the data accessible for those users who do not have Flash.
Simply put, to make your graphs accessible you include the data table within the code used to embed the Flash file. Users who have Flash do not see the table and those that do not have Flash only see the table.
It doesn’t make the information completely accessible (for example, users with poor vision who have Flash installed cannot change the font size on the graphs), but it works well otherwise.
Here’s how the code to embed the Flash file looks:
<div id="chart1">
<table>
...
</table>
<script type="text/javascript">
// <![CDATA[ var fo = new FlashObject("/assets/charts/FC_2_3_StckdBar2D.swf", "FC_2_3_StckdBar2D.swf", "500", "200", 7, "#ffffff"); fo.addParam("FlashVars", "&dataURL=/about/total.xml &chartWidth=500&chartHeight=200"); fo.write("chart1"); // ]]>
</script>
</div>
To see how the page would look with Flash turned off (i.e. in a text-only browser like Lynx) go to this web page and use http://craniofacial.seattlechildrens.org/about/stats.asp as the URL.
Pricing
Another thing I like about Fusion Charts is its licensing. The basic license is $69 which allows a single developer to use it on unlimited web sites – now that’s a pretty good deal.
And if you’re a Flash wiz, for $149 you can get the source code too and tinker with the SWFs to your heart’s content.
Parting Thoughts
I realize that this post is starting to sound like an ad for the product, but that’s just because I like it a lot. But don’t take my word for it – try it for free yourself and make up your own mind.