Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

Month 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, 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.

Top