jQuery Plugin for FusionCharts

An easy-to-use, lightweight jQuery component for the FusionCharts JavaScript Charting Library

From Bootstrap to jQuery UI, we’ve got your back covered with our jQuery plugin. Use this plugin along with our core library and access all the features like events, macros, zooming, panning and so on without making your code look ugly.

Features

  • Works seamlessly across PCs, Macs, iPads, iPhones, and Android devices.
  • Easy to update chart type, data, and individual cosmetic properties at run-time.
  • Insert, prepend, and append multiple charts in an existing chart container.
  • This jQuery helper for FusionCharts can be used to render charts from data contained in HTML tables.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Setting up the FusionCharts jQuery Plugin

Include jquery.min.js, fusioncharts and jquery-fusioncharts in your project

<script type="text/javascript" src="path/to/local/jquery.min.js"></script>
<script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/local/fusioncharts.jqueryplugin.js"></script>

Step 2 : Rendering charts using jQuery

For example, render a column chart

$('document').ready(function () {
    $("#chart-container").insertFusionCharts({
        type: "column2d",
        width: "700",
        height: "400",
        dataFormat: "json",
        renderAt:"chart-container",
        dataSource: {
            "chart": {
                "caption": "Countries With Most Oil Reserves [2017-18]",
                "subCaption": "In MMbbl = One Million barrels",
                "xAxisName": "Country",
                "yAxisName": "Reserves (MMbbl)",
                "numberSuffix": "K",
                "theme":"fusion"
            },
            "data": [{
                "label": "Venezuela",
                "value": "290"
            }, {
                "label": "Saudi",
                "value": "260"
            }, {
                "label": "Canada",
                "value": "180"
            }, {
                "label": "Iran",
                "value": "140"
            }, {
                "label": "Russia",
                "value": "115"
            }, {
                "label": "UAE",
                "value": "100"
            }, {
                "label": "US",
                "value": "30"
            }, {
                "label": "China",
                "value": "30"
            }]
        }
    });
});

Licensing

FusionCharts jQuery plugin is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can download a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).