Using FusionCharts DOM with JavaScript
FusionCharts DOM has an extremely efficient and object-oriented javascript. It behaves well with most other javascript frameworks. It has an extremely configurable architecture.
This architecture also conforms that the charts generated using FusionChartsDOM behaves exactly like charts would had they been generated any other way. However, with FusionChartsDOM, you have the added option of accessing your charts using the FusionChartsDOM javascript object. It also has some added error handling and automation routines that would help the javascipt developers to build friendlier scripts.
The process of FusionChartsDOM is so simple, that almost all your existing javascript implementations can be incorporated with FusionCharts DOM. This is illustrated by implementing the existing "Example Application" from the FusionCharts and JavaScript section.
Your chart will appear like below:
>
Application Description:
- We're building a chart to compare Quarterly sales of 4 products in a given year.
- The user can select which products to compare and the comparison will be reflected on the chart at client side (remember, this application is build purely in HTML and JavaScript - so it doesnt need any server or server side scripting language).
- The data for the entire application is stored in client-side JavaScript arrays, which we'll soon see.
- We've also provided a few chart configuration parameters like "Animate Chart" and "Show Values" to enrich end-user experience.
- Entire application is run using client side JavaScript functions, which we would soon explore.
Before we get to the code of the application, let's first see the process flow.
The process flow for this application can be enlisted as under:
- The HTML page loads with pre-defined JavaScript functions, data in JavaScript arrays and the chart object itself.
- The chart object is initialized with empty data. We register it with JavaScript with DOM Id as chart1Id.
- In the HTML code, we present a form to the user where he can select the products for which he wants to see the data. This form is disabled by default.
- In the FC_Rendered function, which is invoked when the chart is loaded, we enable this form so that user can now select the products.
- In FC_Rendered function itself, we also build the chart for first time showing data for all the 4 products.
- Now, when the user changes his product selection or changes a chart configuration (also present as HTML form elements), we update the chart XML data depending on product and options selected.
- To update the chart and build the XML, we've used various JavaScript functions in the page, like updateChart(), generateXML(), getProductXML().
The FusionChartsDOM Object
The heart of FusioCharts DOM is the javascript object FusionChartsDOM. An architectural overview of the object has been pictorially represented below. Further insight on these elements can be found at the API and Reference section.
