Till now, to include a chart/map created by FusionCharts in your HTML page, you had three options:
- Directly use the OBJECT/EMBED tag to include the SWF file in your HTML content and then use Flashvars to provide the XML data string or URL. Example here. While this method offers the advantage of just having to use HTML code, the code gets confusing at times and in Microsoft Internet Explorer, you would need to click the chart object to activate it, before you could interact with it.
In an effort to make this entire process even better and easier, we released FusionCharts DOM a few days ago.
Table of Contents
What is FusionCharts DOM?
How to use it?
<html> ... Your HTML Code here .... <p> <fusioncharts chartType="MSCombi2D" dataUrl="profit_revenue.xml" width="100%"> </fusioncharts> </p> ... Your HTML Code here .... </html>
This code creates a Multi-series combination 2D chart with its data source specified as Profit_revenue.xml. See it live here.
There are a lot of attributes which you can specify for <fusioncharts> element. The entire list can be found here .
In-lining your XML data in the HTML code
If you do not wish to have an external XML file and have the XML data in-lined in the HTML code itself, the following code could be used:
<fusioncharts chartType="Doughnut2D" width="100%"> <data><!--[CDATA[ <chart caption="Usage share of Web Browsers" subcaption="Third quarter of 2008" numberSuffix="%" palette='3' pieRadius='90' > <set name="IE6" tooltext="Internet Explorer 6" value="33.13"></set> <set name="IE7" tooltext="Internet Explorer 7" value="39.09"></set> <set name="Chrome" tooltext="Chrome" value="0.26"></set> <set name="FF" tooltext="Mozilla Firefox" value="19.48"></set> <set name="N" tooltext="Netscape" value="0.68"></set> <set name="Opera" tooltext="Opera" value=".71"></set> <set name="Safari" tooltext="Safari" value="6.39"></set> <set name="Others" tooltext="Others" value="0.26"></set> ]]--></data> </fusioncharts>
Here, the entire XML data has been inlined under <data> tag. See this live in action.
Added Advantage: Specifying common settings for all charts in page
If you’ve multiple charts in a page and wish to specify common settings for all of them,
like width/height, debugMode etc., FusionCharts DOM allows you to specify the same
within the <script> tag as under:
In the above code, the four charts are generated as line chart with a width and height of 200 pixels. See it live here.
Support for FusionCharts events
You can just replace the existing chart inclusion code with the new DOM style code.
FusionCharts DOM may be downloaded here . Or, you may read the online documentation here.
5 responses on “FusionCharts DOM – A new way to include FusionCharts in your HTML”
inONENovember 23, 2008, 12:07 pm
Looks like a great anhancement! Gonna test it right away!
David LaiMarch 30, 2009, 2:12 pm
Sujit KarMay 15, 2009, 4:24 am
Hi, I have downloaded the product and currently testing it. It is a great tool for any web developers. But personally I am facing a problem. I have my data in boring HTML tables. That data is dynamic, coming from database depending on the customer requirements. Now whenever I want the chart on the page, I need to convert the data to XML format. Is there any other way to design those charts otherwise. Please advice.
Sudipto ChoudhuryJuly 4, 2009, 5:17 am
FusionCharts only accepts data in XML format. I presume, it would be easier for you to build the XML since you are generating the data dynamically.
You can always build your own XML building classes to convert your data format to FusionCharts XML format.
Shamasis BhattacharyaNovember 5, 2009, 10:07 am
This is pretty interesting for both beginners and advanced users: the ability to parse non-standard HTML tags.
Have a look at the features of FusionCharts DOM at http://www.fusioncharts.com/DOM/features.asp