Now that we have caught your attention by implementing those messy JavaScripts and OBJECT/EMBED tags in such simple fashion, lets have a look at what's on for dinner!
Other than the myriad list of features available for FusionCharts, FusionCharts DOM adds the following features:
FusionCharts DOM facilitates the writing of simple HTML-like <fusioncharts> tag instead of complex JavaScript or Object/Embed tags. Just as one would include an image within an HTML document by writing <img src="my_image.jpg" width="320" height="240" /> code, similarly you can include FusionCharts within your documents using a code like <fusioncharts dataUrl="my_data.xml" width="320" height="240" ></fusioncharts>. Yes it is that simple!
The magic code here is the <fusioncharts></fusioncharts> tag. All such "fusioncharts" tags are converted to corresponding 'FusionCharts' flash object. (Everything is done silently and behind the scenes by the FusionChartsDOM javascripts.)
The chart parameters can be specified as attributes to this <fusioncharts> element. The attributes look just like any other HTML attribute: "width", "height", etc. Thus, if you want to specify the chart-type as "Pie3D" and also set the width to 320 pixels, the code would appear something like below:
<fusioncharts chartType="Pie3D" width="320" dataUrl="my_data.xml"></fusioncharts>
"chartType", "width" and "dataUrl" are the parameters that we have used here in format attributeName="myValue". The list of all valid attributes can be found in our "API and References" section.
More example codes on how to include FusionCharts using 'FusionCharts DOM' are provided in our "Getting Started" article
With FusionCharts DOM, your XML data can be directly provided inside your web pages. This is even as simple as typing in your HTML code.
The detailed procedure embed inline XML data is explained in the "Providing data from external XML Document" within the Getting Started section.
It may be so that you have a number of charts on your page and you would like to have a common set of look-and-feel for all your charts. The procedure to do that is to provide "default parameters" to your charts. The default parameters can be provided within the <script> ... </script> tag of your FusionChartsDOM.js include file.
Let us provide default parameters so that all FusionCharts within a particular web page appears as "Column3D" and with a dimension of 320x240 pixels. The code to do that is explained below:
<!-- begin FusionCharts include files -->
<script src="JavaScripts/FusionCharts.js" type="text/javascript"></script>
<script src="JavaScripts/FusionChartsDOM.js" type="text/javascript"
parameters="chartType: 'Column3D', width: '320', height: '240'"></script>
<!-- end FusionCharts include files -->
If you carefully look into the code, you will see that there is a new 'parameters' attribute to the <script src="JavaScripts/FusionChartsDOM.js" ...><script> tag. The format to provide values inside this tag is parameterName: 'parameterValue'. Multiple parameters can be specified by separating them using comma. The list of all valid attributes (chart parameters) can be found in our "API and References" section.
FusionChartsDOM has certain useful settings that can be modified to suit your needs. They allow you to change various FusionCharts DOM behaviors, such as "whether to display a message when error occurs" or "whether to generate chart Id automatically or not", etc. Specifying these are similar to specifying "default parameters" explained above. An example code that enables display of error messages would be like:
<!-- begin FusionCharts include files -->
<script src="JavaScripts/FusionCharts.js" type="text/javascript"></script>
<script src="JavaScripts/FusionChartsDOM.js" type="text/javascript"
settings="debugMode: '1';></script>
<!-- end FusionCharts include files -->
If you carefully look into the code, you will see that there is a new 'settings' attribute to the <script src="JavaScripts/FusionChartsDOM.js" ...><script> tag. The format to provide values inside this tag is parameterName: 'parameterValue'. Multiple parameters can be specified by separating them using comma.
The list of all valid settings can be found in our "API and References" section.