How to Build Quick and Easy Charts from XML Data

Sanket Nadhani on July 22nd, 2009 Posted in Resources, Tutorials

Editor’s Note: This is a guest post brought to you by Sanket Nadhani. He’ll be introducing a great new plugin he’s worked on developing that is a great way to put charts into your designs, especially if you’re not from the web development side of the hall.

Everyone has data. So what can make your data different from the rest of the numbers abounding in the web-o-sphere? For starters is the content, but chances are that you’re not going to be able to edit that much. The other half of the equation however, and what we’ll be dealing with here, involves the part you can change — the way you visualize your data.

Data visualization is the key to how your data is perceived and acted upon by your audience. In this tutorial, you will be introduced to FusionCharts Free, which is an easy, convenient and free (in case the name did not already suggest so) way of converting all the monotonous data into animated Flash charts.

A live version will be put up soon, in the meantime you can download the results to run locally.

The Goal

By the end of the tutorial, you would have generated a chart resembling this:

Of course in the demo, the chart would be animated and much more lively. But enough bland text; let’s dive in and get started!

Download FusionCharts

To get things rolling, you first need to download FusionCharts Free. When it is downloaded, unzip it and the contents should look like this:

We need to concern ourselves only with two things here:

1. The Charts folder: The charts folder contains the swf files for each of the charts individually. FusionCharts Free supports 22 chart types, so you will find 22 separate swf files in this folder. The file names are pretty self-explanatory on what chart they render.



2. JSClass folder: This folder contains FusionCharts.js, which is the FusionCharts Free Javascript class. This class keeps you away from the cryptic <object> and <embed> tags, and helps embed charts in your HTML page in a user-friendly way.

The data to the chart will be provided using easy-to-understand XML, which we will come to very shortly. Now that we know what we are going to have on our plate, let’s get down to what our prime objective is – making lively animated charts.

A Classic Example

There has never been and never will be a programming book without a “Hello World” example; or so I have been told. While we can’t exactly do a “Hello World” in a chart, we will do a charting equivalent of it – a monthly revenue chart. We will plot the following data on a single-series 3D Column chart:

Putting Together the XML Data File

FusionCharts Free takes its data in XML format. For the chart that we intend to make, the XML would be:

<graph caption="Monthly Revenue (in US Dollars)" numberPrefix="$" decimalPrecision="0" showValues="0">
   <set name="Jan" value="25000" color="346BAB"/>
   <set name="Feb" value="35000" color="CC7A26"/>
   <set name="Mar" value="42300" color="B23732"/>
   <set name="Jun" value="37300" color="85AD3D"/>
   <set name="Apr" value="35300" color="694A8D"/>
   <set name="May" value="31300" color="319DBA"/>
</graph>

I made a new folder FusionCharts Free > Samples and then stored this XML in a file called Data.xml.

As you can see in the XML, all the data for a chart is enclosed within the graph  elements. Don’t worry about the attributes of the element – we will come back to them once we have put the chart in the HTML page.

For each name-value pair of data, a new element has to be introduced. We have six name-value pairs, one for each month and hence six elements. The color attribute sets the color for the column – since this is the first chart that we are building, I thought having a different color for each column would be pretty refreshing after all the “hard work”.

Embedding the chart in an HTML file

Now that the data file is all ready, all that we need to do is embed the chart SWF file in an HTML page, and then tell that chart where to pick data from.

I have created an HTML file called Chart.html in the newly created Samples folder that contains the following HTML code:

<html>
<head>
   <script language="JavaScript" src="../JSClass/FusionCharts.js"></script>
</head>

<body bgcolor="#ffffff">
   <div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
   <script type="text/javascript">
      var myChart = new FusionCharts("../Charts/FCF_Column3D.swf", "myChartId", "400", "250");
      myChart.setDataURL("Data.xml");
      myChart.render("chartdiv");
   </script>
</body>
</html>

Let me walk you through the code now. Since we have made use of the FusionCharts Free Javascript class to embed the chart in the page, the FusionCharts.js file has been included.

On to the body of the page now. A DIV has been created as the placeholder for the chart with a unique ID. The chart is then instantiated using the FusionCharts constructor function and a reference to it stored in myChart. The constructor takes in the following parameters:

1. URL of SWF file of the chart type that we intend to use. We are making use of single-series Column 3D chart for which the swf file is called FCF_Column3D.swf.
2. ID for the chart – The chart can have any ID as long as there is only one chart in a page. For more than one chart in a page, each chart should have a unique ID.
3. Required width and height of the chart.

Then we set the file from which the data has to be fetched and finally render the chart.

Now if you open Chart1.html in a browser, you’ll find yourself at a “wow” moment:

Graph Attributes

Now that we have the chart right in front of us, let’s re-visit the attributes of the <graph> element:

numberPrefix="$": This is used to set $ as the prefix for all the numbers appearing on the chart.

DecimalPrecision="0": This is used to set the number of decimal places to which all numbers on the chart would be rounded to. The default value for this is 2, and hence 2 zeroes would have appeared after a decimal point, which we do not need since we are dealing with much bigger sums of money here.

showValues="0": This sets whether data values are to be displayed right above the corresponding columns. I have turned it off to make the chart less cluttered.

Adding a Trendline

Trendlines are lines that help in the comparison of data against pre-defined values. In a Monthly Revenue Chart, we would like to compare the revenues against a preset monthly target.

So our chart with a target trendline would look like:

This is accomplished by a small addition to the XML:

<trendlines>
   <line startValue='35000' displayValue='Target' color='666F5A' />
</trendlines>

The XML above is pretty self-explanatory. So I will only talk about the not-so obvious things. The value at which the trendline is to be drawn has to be specified using startValue. If you need a slanted trendline, you can define a separate endValue. When no endValue is defined, the trendline is made a straight one with the starting and ending value the same.

A chart can have any number of trendlines as long as they are all defined within the <trendlines></trendlines> elements. It is a good idea to place the XML for the trendlines just before the </graph> tag.

Changing Chart Type

In case you are not too fond of the 3D column chart, you can easily change it to the 2D column chart. To do that, you just need to specify the path of the 2D Column Chart as the swf to be embedded in Chart.html.

var myChart = new FusionCharts("../Charts/FCF_Column2d.swf", "myChartId", "400", "250", "0", "0");

You can even change the chart type to a line or an area chart, but with the current color configurations they would look nothing more than a random assortment of colors. Also, those charts are more suitable for comparing trends rather than just displaying a single-series of data.

Conclusion

FusionCharts Free has a whole lot of other things you can play around with. These include both the functional and the cosmetic aspects of the chart. You can check out all of them at www.fusioncharts.com/free.

Now that you have an easy and free way of visualizing data, say goodbye to the days of HTML modesty.