Table of Contents
<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 .
<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.
!-- 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.
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
Looks like a great anhancement! Gonna test it right away!
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.
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