jQuery Charts Plugin

Easy to use jQuery plugin for adding interactive charts and graphs to your website.

We understand not everybody loves coding in vanilla JavaScript, and that’s why we have developed this easy to use plugin for one of the most famous JavaScript library - jQuery. You can use our jQuery charts plugin with our core library to add interactive JavaScript charts to your web and mobile applications with only a few lines of code. You will have access to all the rich features of FusionCharts like events, macros, zooming, panning, annotations, image-exporting etc. Explore the examples below to learn more about our plugin and you can even start making charts today with the quick start guide at the bottom of the page!

Download Plugin View it on Github

Select Chart Types

Features

  • 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.
  • This jQuery charts plugin can be used to render charts from data contained in HTML tables.

Community

Support

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

Along with jQuery plugin, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files

QuickStart

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

$("#chart-container")

Step 3: Use the insertFusionCharts method


(function () {
    
    $("#chart-container").insertFusionCharts({
        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.

Licensing

jQuery-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include core FusionCharts library in your page. This jQuery charts plugin project provides no direct functionality. Evaluation version can be downloaded from this page. You will still need to purchase a FusionCharts license for using it in commercial environment (FusionCharts is free for non-commercial and personal use).