Rendering Charts from HTML Tables

The FusionCharts jQuery helper 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 helper 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: "fusion"
    }
});COPY

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 is 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.