Categories: News & Announcements

FusionCharts DOM – A new way to include FusionCharts in your HTML

Till now, to include a chart/map created by FusionCharts in your HTML page, you had three options:
  1. 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.
  2. Or, use the FusionCharts JavaScript class (FusionCharts.js) that we provide as part of download. Example here. This class provides a better way to include of FusionCharts in your web page, overcame the Internet Explorer “Click to activate” issue, handled a lot of cross-browser issues and also provided additional API to interact with the charts. This has been the recommended method of embedding FusionCharts. The downside of this method was that developers needed to have naive knowledge of JavaScript syntax to use it, though we have provided a lot of examples that can just be replicated.
  3. Use the language specific API that we’ve provided for ASP, PHP, ASP.NET, ColdFusion, JSP, Ruby On Rails etc. in the download pack itself. This API allows you to write the code in your programming language to embed the chart. Behind the scenes, the API generates HTML or JavaScript code as explained above in points 1 & 2.
In an effort to make this entire process even better and easier, we released FusionCharts DOM a few days ago.

What is FusionCharts DOM?

Essentially, FusionCharts DOM is a JavaScript file (FusionChartsDOM.js) that you need to include in your HTML page, along with the standard FusionCharts JavaScript class (FusionCharts.js). You can download both the files here.

How to use it?

Once you’ve downloaded and included the 2 JavaScript files in your page, to create a chart, all you need to do is use the <fusioncharts></fusioncharts> tag in your HTML code. Consider the code below: 
<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: 
!-- script in <head> -->
<script type="text/javascript" src="../docs/JavaScripts/FusionChartsDOM.js"
        parameters="chartType: 'Line', width: '200', height: '200'"></script>
...
<!-- fusioncharts HTML tags in <body> -->
<fusioncharts dataUrl="data/CISCO.xml"></fusioncharts>
<fusioncharts dataUrl="data/IBM.xml"></fusioncharts>
<fusioncharts dataUrl="data/JAVA.xml"></fusioncharts>
<fusioncharts dataUrl="data/INTL.xml"></fusioncharts>
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

FusionCharts DOM supports all the other events and parameters that are supported by FusionCharts. If you’ve already integrated FusionCharts in your applications and wish to switch to DOM, the transition is seamless and does not break your existing JavaScript too. You can just replace the existing chart inclusion code with the new DOM style code.

Related links

FusionCharts DOM may be downloaded here . Or, you may read the online documentation here.
sanket

View Comments

  • Hi,
    There is a problem when loading multiple charts on the same page using the Javascript DOM. If you go to their online demos example from the link you provided, you can see this problem happening where one chart is stuck at "Loading Data".
    I'm thinking that this is caused by a synchronization problem so one solution could be to turn rendering off at load time and have a javascript call possibly to load each chart synchronisely.

  • 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.

  • Hi Sujit,
    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.

Leave a Comment
Share
Published by
sanket
Tags: domhtmlintegrationjavascript
16 years ago

Recent Posts

Pie Charts: A Slice of Data You Can’t Ignore

Ever had a data set that seemed more complicated than a Rubik's cube? You’re not…

3 months ago

Venn Diagrams: A Simple Yet Powerful Tool for Visualizing Relationships

We’ve all seen them in textbooks or presentations—those overlapping circles that simplify complex information into…

3 months ago

Announcing FusionCharts v4.1: Elevate Your Data Visualization Experience!

We’re excited to announce the upcoming release of FusionCharts v4.1—a groundbreaking step forward in the…

4 months ago

Bubble Maps: Visualizing Data Like Never Before

Have you ever been overwhelmed by a massive data set and wondered, "How do I…

4 months ago

Stock Charts: Mastering the Art of Visualizing Financial Data

If you’ve ever tried to make sense of the stock market, you’ve probably come across…

4 months ago

What is a Bar Chart Used For?

Imagine you’re comparing the sales performance of your top product lines across different regions, or…

6 months ago