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:

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, in which data is 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.