FusionCharts JQuery Plugin can be downloaded from here.
The FusionCharts jQuery plugin exposes methods for rendering charts, where the FusionCharts constructor object is passed as an argument to the rendering methods.
An additional feature provided by the jQuery plugin is the ability to convert a table containing numeric data into a relevant chart type. That is, instead of a JSON or XML data, your data source can be an HTML table.
The following example converts the table shown to a multi-series column chart:
2012 | 2013 | |
---|---|---|
January | 400 | 800 |
February | 600 | 320 |
March | 540 | 740 |
April | 430 | 650 |
May | 350 | 650 |
June | 420 | 750 |
July | 430 | 760 |
August | 490 | 550 |
September | 480 | 640 |
October | 450 | 650 |
November | 440 | 640 |
December | 600 | 820 |
The data structure for this example is shown below:
$("#dataTable").convertToFusionCharts({ type: "mscolumn2d", width: "700", height: "350", dataFormat: "htmltable", renderAt: "chart-container" }, { "chartAttributes": { caption: "Units sold for last 2 years", xAxisName: "Month", yAxisName: "Units", bgColor: "FFFFFF", theme: "fint" } });
The convertToFusionCharts
method is used to convert the data contained in the table to the JSON/XML format data consumed by the chart. It is important to provide a valid chart container in the renderAt
parameter in the chart configuration. If renderAt is not provided then the chart will be drawn next to the table. The return value of the function is a jQuery object containing all the newly created instances of FusionCharts.
Refer here for more details on this method.
There! You have now seen how you can render charts from HTML tables.