- Create comprehensive sales reports: Show a chart at the top with summarized sales info for say 5 years. Then allow the user to click on any of these years for more details in the same page, without any page refreshes. See a demo.
- Build flight selectors: Give the user a map and show all the possible routes he can fly. When he clicks on a particular route, show him all the flights for that route. Wouldn’t it save a lot of time otherwise wasted in selecting a city in the ‘From’ and then again in the ‘To’ field. See a demo.
Now that we are done with the securty issues, let us take an example straightaway to understand how the chart swf and FusionCharts.js act in conjunction. This example illustrates 3 concepts:
- How to make use of the APIs exposed by the chart? In this example, we will make use of the setDataXML API to set the data for the chart.
- How to track events raised by the chart? Here, we will display an alert box when the chart has finished rendering, using the FCRendered_event.
Don’t worry if you can’t make head or tail of the APIs and events we are talking about – we will discuss them in details later on.
So the HTML for the page having the chart embedded in it would be:
var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");The parameters passed to it in order are: URL of the swf file of the chart type, its DOM ID, chart width and height, debugMode and registerWithJS – both of which accept boolean values.
Now, we’ve provided a basic XML data document to the chart using its setDataXML method. Finally, we render the chart, and track the same to display an alert box when the chart has finished rendering and raises the FC_Rendered event.
Events exposed by the chart
Now that we have a basic grasp of things, let us take a look at the events that FusionCharts v3.1 exposes. Barring the first 2, everything has been newly introduced in FusionCharts v3.1:
- FC_Loaded(DOMId): Raised when the chart SWF has finished downloading in the user’s browser. Typical Use: To hide any loader components that you might have on your page.
- FC_DataLoaded(DOMId): Raised when the data of the chart has finished loading – both in dataXML or dataURL method. Typical Use: To further process data in any other components in your page.
- FC_DataLoadError(DOMId): Raised when there was an error in loading data from the specified URL
- FC_NoDataToDisplay(DOMId): Raised when the XML data loaded by the chart didn’t contain any data to display
- FC_DataXMLInvalid(DOMId): When the XML data loaded by the chart was invalid (wrong XML structure)
The last 3 events are typically used to show an error message to the user, or to take a corrective measure.
All the events can be tracked the same way as the FC_Rendered event was tracked using the DOMId of the chart in the example earlier.
All the charts in the FusionCharts expose a number of APIs which allow you to print the chart, export the chart as image/PDF, get an attribute or the entire data of the chart and the like.
These APIs are not a part of FusionCharts.js, but built into the chart swfs themselves and as such, you do not need to include FusionCharts.js in your HTML code to make use of these APIs.
The APIs exposed by all charts in FusionCharts with their respective functions are:
- setDataURL(strDataURL:String): Changes the data of the chart to the new specified URL. The URL has to be relative to the chart. More details here.
- setDataXML(strDataXML:String): Changes the data of the chart to the specified XML string. More details here. http://www.fusioncharts.com/developers/documentation/Contents/JS_setDataXML.html
- print(): Prints the chart. More details here.
- exportChart(exportSettings: Object): Calls the export chart routine to save the chart as PDF/image. To get more details on this, pleas check out the Exporting as Image/PDF section in the online documentation.
- getXML(): Returns the XML data of chart as string. More details here.
- getChartAttribute(attrName: String): Returns the value of the attribute as specified in chart’s XML data > <chart> element. More details here.
- signature(): A string representing the signature of SWF. For FusionCharts v3 charts, it’s FusionCharts/3.1
- hasRendered(): A boolean value indicating whether the chart has rendered. Boolean value indicating whether the chart has finished rendering
- getDataAsCSV(): Returns the data of chart as CSV string. More details here.
Except the first 2 APIs, all the other APIs have been newly introduced in FusionCharts v3.1.
With this post concludes the How to get the most out of v3.1 series. We hope this indeed helps you get the best out of our products. If there is any feature you want us to go into further details, just let us know in the Comments section and we will be onto it.