Rendering Charts from HTML Tables

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.