Getting Started with FusionCharts DOM
If you're already excited enough to cut down the fats from your HTML code, let's quickly get started.
We will cover the following steps here:
- Getting Started
- Creating a Simple Chart from a set of data
- Providing Chart Parameters
- Adding more charts (multiple charts) in one page
- Providing data from external XML Document
All codes discussed here are present in Download Package > Code > DOM folder.
Getting Started
For your charts to come alive, you will require the FusionCharts SWF files and the FusionCharts DOM javascript files. These files are available inside the FusionCharts DOM downloadable package. The files should be organized within your site's root folder in the manner as specified below.
Now that you have the required files, include the following snippet of code within the <head> ... </head> tag of your HTML document. In case your JS files are located somewhere else, you should change the "src" paths accordingly.
<!-- begin FusionCharts include files --> <script type="text/javascript" src="JavaScripts/FusionCharts.js"></script> <script type="text/javascript" src="JavaScripts/FusionChartsDOM.js"></script> <!-- end FusionCharts include files -->
That's it! You are now ready to display impressive charts with just a couple of lines of code.
Creating a Simple Chart
Here, we'll guide you through the process of creating your first chart. For a head start, we'll create a simple 3D Column Chart to visually depict the Annual Sales Summary of a company.
Before we build the chart, we first need to have the data that we'll represent on the chart. Since we're plotting yearly sales summary for a given period, our data in tabular form would look something like below. Each year given below would be represented on the chart as a 3D column.
| Year | Net Revenue |
|---|---|
| 2004 | $37800 |
| 2005 | $21900 |
| 2006 | $32900 |
| 2007 | $39800 |
Now that you have your data ready, you will need to convert it to XML format. FusionCharts necessarily needs its data in pre-defined XML format. It cannot read any other format (including Excel, CSV or text data) apart from XML. So, we need to convert this data into XML.
The converted XML data would look as under:
<graph caption="Annual Sales Summary" subcaption="For the period of 2004 to 2007" xAxisName="Year" yAxisName="Sales" numberPrefix="$">
<set name="2004" value="37800" color='F6BD0F' />
<set name="2005" value="21900" color='8BBA00' />
<set name="2006" value="32900" color='FF8E46' />
<set name="2007" value="39800" color='008E8E' /> </graph>
Basically, what we've done above can be listed in the following points:
- We've created the root <graph> element with a few attributes to define captions, axis names and number prefix character, to consist everything.
- For each data row, we've created a <set> element. label attribute of this element represents the month name and value attribute represents the data that we want to plot.
Other than the XML data, we would also require the FusionCharts DOM code that will convert this data into an impressive animated chart. We don't need to write complex javascripts or flash object embedding scripts while using FusionCharts DOM. The DOM code, which will be put inside the <body>...</body> tag of a document, will look somewhat like this:
<fusioncharts chartType="Column3D">
<data><!--[CDATA[
Our XML Data will be included here!
]]--></data>
</fusioncharts>
DOM (Document Object Model) codes are just like HTML / XML codes. If you know only HTML, using FusionCharts DOM will be a piece of cake. What we have here is:
- a <FusionCharts> tag with an attribute called "chartType", whose value we set to "Column3D".
- inside the <FusionCharts> tag, we have a <data> tag that encapsulates our XML data as Character Data (CDATA).
And now, if you're running out of your patience to see this data in chart format, let's quickly include our chart within an HTML document. The final HTML document containing our above-mentioned FusionCharts code will look something like below:
<html>
<head>
<title>My First FusionCharts</title> <!-- begin FusionCharts include files -->
<script type="text/javascript" src="JavaScripts/FusionCharts.js"></script>
<script type="text/javascript" src="JavaScripts/FusionChartsDOM.js"></script>
<!-- end FusionCharts include files -->
</head> <body> <fusioncharts chartType="Column3D"> <data><!--[CDATA[ <graph caption="Annual Sales Summary" subcaption="For the period of 2004 to 2007" xAxisName="Year" yAxisName="Sales" numberPrefix="$">
<set name="2004" value="37800" color='F6BD0F' />
<set name="2005" value="21900" color='8BBA00' />
<set name="2006" value="32900" color='FF8E46' />
<set name="2007" value="39800" color='008E8E' />
</graph> ]]--></data> </fusioncharts> </body>
</html>
See this chart in action
Your chart will appear like below:
Providing Chart Parameters
Customizing your chart parameters is very easy. In FusionChartsDOM, chart parameters can be customized using attributes in the <FusionCharts> tag itself.
We will now modify our previous chart code to draw a Pie Chart and also modify the dimension of the chart.
Our newly modified code will look somewhat like this:
<fusioncharts chartType="Pie3D" width="480" height="320">
<data><!--[CDATA[
Our XML Data will be included here!
]]--></data>
</fusioncharts>
You must have noticed that to make the modifications, we have done the following:
- Changed the "chartType" attribute to "Pie3D".
- Added two new attributes called "width" and "height" and specified our new values to them.
A list of documented attributes of the <FusionCharts> tag can be found in the "FusionChartsDOM API and Reference" section.
Charts can be further customized via the data XML. An explanation on this can be found in the "FusionCharts and XML" section.
Adding Multiple Charts
Adding multiple chart in your HTML document is just as easy as putting a new <FusionCharts> tag in the place where you want the chart to appear.
Let us now include both of the above charts, Column3D and Pie3D within the same HTML document.
The HTML code would look like below:
<html>
<head>
<title>Multiple FusionCharts</title> <!-- begin FusionCharts include files -->
<script type="text/javascript" src="JavaScripts/FusionCharts.js"></script>
<script type="text/javascript" src="JavaScripts/FusionChartsDOM.js"></script>
<!-- end FusionCharts include files -->
</head> <body> <h2>Column Chart</h2> <fusioncharts chartType="Column3D"> <data><!--[CDATA[ <graph caption="Annual Sales Summary" subcaption="For the period of 2004 to 2007" xAxisName="Year" yAxisName="Sales" numberPrefix="$"> <set name="2004" value="37800" color='F6BD0F' />
<set name="2005" value="21900" color='8BBA00' />
<set name="2006" value="32900" color='FF8E46' />
<set name="2007" value="39800" color='008E8E' /> </graph> ]]--></data> </fusioncharts> <h2>Pie Chart</h2> <fusioncharts chartType="Pie3D" width="480" height="320"> <data><!--[CDATA[ <graph caption="Annual Sales Summary" subcaption="For the period of 2004 to 2007" xAxisName="Year" yAxisName="Sales" numberPrefix="$"> <set name="2004" value="37800" /> <set name="2005" value="21900" /> <set name="2006" value="32900" /> <set name="2007" value="39800" /> </graph> ]]--></data> </fusioncharts> </body>
</html>
Using External XML Document
You may be already asking "what if I have the same data for many charts and pages?" or "what if I want to avoid including the XML data within the HTML document?" The answer to that is simple and two-step.
- Create an XML document with the data that we already have.
- Link this XML document with your existing charts.
Create an XML document containing the XML data we already have from above, and saved it as "datasource.xml". Our XML document will look somewhat like this:
<graph caption="Annual Sales Summary" subcaption="For the period of 2004 to 2007" xAxisName="Year" yAxisName="Sales" numberPrefix="$">
<set name="2004" value="37800" color='F6BD0F' />
<set name="2005" value="21900" color='8BBA00' /> <set name="2006" value="32900" color='FF8E46' />
<set name="2007" value="39800" color='008E8E' /> </graph>
Now, we will modify the FusionChartsDOM code with a new tag called "dataURL" to specify the url of the XML file.
<fusioncharts chartType="Column3D" dataUrl="datasource.xml"></fusioncharts>
This new code has the following changes:
- It does not have the <data> child-tag and hence, there is no XML data within within the chart tags.
- It has a new attribute called "dataUrl" that has the url to the source xml file.
See Examples: Simple Column Chart | Multiple Charts
Advantages of using External Data XML
- FusionChartsDOM codes become more manageable and human-readable.
- Your HTML documents become lighter and take less time to load.
- Same data can be re-used for multiple charts.
In case you encounter any error during implementing these codes, kindly go through our "Troubleshooting" section.