Jquery Plugin For Charting Library – Fusioncharts

FusionCharts is a JavaScript charting library form which you can create line, column, area, bar, pie, doughnut and many more charts as you need. Also, you can find 3d interactive charts within this plugin.

Features:

• It can be installed with NPM.
• Supports 2d and 3d charts without extra coding.
• Supports column and line combination chart at the same time.
• Fetch data remotely from a JSON file or URL
• Change the data dynamically and watch the chart update automatically
• Update the chart with new attributes

Install with npm

$ npm install jquery-fusioncharts --save

How to use it:

1. Include the Javascript fusioncharts.js and fusioncharts.theme.fusion.js at the bottom of the web page.

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

2. Add the basic HTML to the page.

<div id="chart-container"></div>

3. Initialize the plugin and we’re ready to go.

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "column2d",
    renderAt: "chart-container", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion" //Specifying which theme to use
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
  }).render();
});

Plugin’s default options:

Please visit the official website for more information.