jQuery Charts and Graphs Plugin

Easy to use jQuery chart plugin for FusionCharts JavaScript Charting Library.

We understand not everybody loves coding in vanilla JavaScript, and that’s why we made an easy to use plugin for one of the most famous JavaScript library - jQuery. You can use our jQuery Charts with our core library to add interactive JavaScript charts to your web and mobile applications.

Download Plugin View it on Github


  • Works seamlessly across PCs (including IE6/7/8), 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.
  • Using jQuery chart plugin render charts from data contained in HTML tables.


Simply open up a github issue with your question/bug report/suggestion.


Step 1: Include fusioncharts.jqueryplugin.js

In your HTML, include fusioncharts.jqueryplugin.js after all other scripts:

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

Step 2: Select a DOM using jQuery selector inside your module as follows


Step 3: Use the insertFusionCharts method

(function () {
        type: "column2d",
        width: "500",
        height: "300",
        dataFormat: "json",
        dataSource: {
            "chart": {
                "caption": "Monthly revenue",
                "subCaption": "Last Year",
                "xAxisName": "Month",
                "yAxisName": "Revenues",
                //Making the chart export enabled in various formats
                "exportEnabled" :"1",
                "numberPrefix": "$",
                "theme": "fint"

            "data": [{
                "label": "Jan",
                    "value": "420000"
            }, {
                "label": "Feb",
                    "value": "810000"
            }, {
                "label": "Mar",
                    "value": "720000"
            }, {
                "label": "Apr",
                    "value": "550000"
            }, {
                "label": "May",
                    "value": "910000"
            }, {
                "label": "Jun",
                    "value": "510000"
            }, {
                "label": "Jul",
                    "value": "680000"
            }, {
                "label": "Aug",
                    "value": "620000"
            }, {
                "label": "Sep",
                    "value": "610000"
            }, {
                "label": "Oct",
                    "value": "490000"
            }, {
                "label": "Nov",
                    "value": "900000"
            }, {
                "label": "Dec",
                    "value": "730000"


And your chart should display when you load the page.


jQuery-FusionCharts 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 an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .