How to Build Quick and Easy Charts from XML Data

How to Build Quick and Easy Charts from XML Data

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:

Fusion Chart with TrendlineOf 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:

Unzipped Fusion Chart Overview

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. Fusion Chart SWF Files

  3. 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:

Chart Data

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:

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:

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:

Rendered Chart

Graph Attributes

Now that we have the chart right in front of us, let’s re-visit the attributes of the &lt;graph&gt; element:

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

<strong>DecimalPrecision="0"</strong>: 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.

<strong>showValues="0"</strong>: 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:

Fusion Chart with Trendline

This is accomplished by a small addition to the XML:

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 &lt;trendlines&gt;&lt;/trendlines&gt; elements. It is a good idea to place the XML for the trendlines just before the &lt;/graph&gt; 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.

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.

Two Dimensional Variation

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

Posted Wednesday, July 22nd, 2009 · Back to Top

SPONSOR

Add Comment

17 Comments 7 Mentions

  1. Hon tap Author Editor

    Very basic and good post for using FusionCharts. Thank you very much.

    ·

  2. im.Newbie Author Editor

    Thanks Sanket for the great tutorial..

    It’s help me a lot to done my final project..

    Thank you very much!

    ·

    • hc Author Editor

      go f

      ·

  3. Saptarshi Author Editor

    Great post! Even the FusionCharts v3 charts are super cool Flash charts and they honestly are the best value for money.
    .-= Saptarshi´s last blog ..Change your links/bookmarks please? :) =-.

    ·

  4. Nathan Owen Author Editor

    Just a little utility made specifically for Fusion Charts, if you want to convert CSV files into Fusion Chart XML files, you can download it from here: http://www.mad-monkey.co.uk/cgi-bin/default.pl?21,parsecsv.exe

    ·

  5. Tushar Author Editor

    how to create a image of this chart I wants to merge it in PDF

    ·

  6. Sanket Nadhani Author Editor

    @Tushar: As of now, the best thing you can do is a screen capture and then place the image in your PDF manually.

    However, there is a premium version of FusionCharts Free called FusionCharts v3 which allows you to export the chart as PDF with one single click – http://www.fusioncharts.com/Demos/ExportChart/Contents/client_export.html

    Sorry for the sales pitch speak, I just thought it might be of help :)
    .-= Sanket Nadhani´s last blog ..How to use FusionCharts in Windows .NET Applications (WinForms) – Part 2 =-.

    ·

  7. Christina Author Editor

    So quick and easy! Thank you!!

    ·

    • CCNP Trainer Author Editor

      When XML came to into internet programming late 1990′s people never thought XML will completely change the way the data is transferred and presented in internet.

      > FusionCharts Free supports

      > 22 popular charts like Column, Line, Pie, Bar, Area, Stacked, Candlestick and Funnel Charts

      > Animated charts that make your applications look “wow”

      > Lots of interactive features like tooltips and drill-down

      > ASP and PHP APIs have been provided as well for easy implementation

      > All the charts can pull data from any database and are AJAX-enabled

      Thanks for the post…

      ·

  8. zubair sota Author Editor

    thanks a lot.. I’m searching same since long & finally i got what i want..

    ·

  9. VnTim.Tk Author Editor

    how to create a image of this chart I wants to merge it in PDF
    Very basic and good post for using FusionCharts. Thank you very much.

    ·

  10. CCNA CHENNAI Author Editor

    hi Sanket Nadhani, u r really great, your post is very useful.

    ·

  11. Baskaran Author Editor

    Very Easy and Quick method of create chart from xml data. thank for your tips.

    ·

  12. Balaji Author Editor

    thank for your tips. it is very useful post to me.

    ·

  13. Security Author Editor

    great and easy methosd, thank you

    ·

  14. ps0ram Author Editor

    g8 posy keep it up

    ·

  15. Paradox Technologies Pvt Ltd Author Editor

    Very well explained. Thanks for the post

    ·

 

Build Internet by One Mighty Roar. Since 2008.