Choose an item

Create a Chart in jQuery Using FusionCharts

FusionCharts is a JavaScript charting library that enables you to create interactive charts, gauges, maps and dashboards in JavaScript. We have built a simple and lightweight jQuery plugin which provides bindings for FusionCharts. The jquery-fusioncharts plugin allows you to easily add rich and interactive charts to any jQuery project.

On this page, we'll see how to install FusionCharts and render a chart using the jquery-fusionCharts plugin.

Prerequisite

Before you begin, make sure your development environment includes Node.js and an npm package manager. You can skip this step and proceed on if you are including the dependencies from CDN or Local Files.

  • jQuery requires Node.js version 10.9.0 or later. To check your version, run node -v in a terminal/console window. To get Node.js, go to nodejs.org.

  • To download and install npm packages, you must have an npm package manager. Run npm -v in a terminal/console window, to check that if have the npm client installed.

Initialize npm, install webpack locally, and install the webpack-cli. Make sure you run npx webpack command in the terminal to ensure that the build is successful.

Follow the steps mentioned here to initialize a Javascript project through npm.

Installation and including dependencies

To install the FusionCharts package and the jquery-fusioncharts component include the following code in the html file

<head>
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- FusionCharts -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- jQuery-FusionCharts -->
    <script type="text/javascript" src="https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/develop/dist/fusioncharts.jqueryplugin.min.js"></script>
    <!-- Fusion Theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
Include the FusionCharts JavaScript files which can be downloaded from here.

<head>
    <!-- jQuery -->
    <script type="text/javascript" src="path/to/local/jquery.min.js"></script>
    <!-- FusionCharts -->
    <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
    <!-- jQuery-FusionCharts -->
    <script type="text/javascript" src="path/to/local/jquery-fusioncharts.js"></script>
    <!-- Fusion Theme -->
    <script type="text/javascript" src="path/to/local/fusioncharts.theme.fusion.js"></script>
</head>
You can install the jquery-fusioncharts and fusioncharts components through npm as shown below

    $ npm install jquery-fusioncharts fusioncharts --save
After installing the fusioncharts components, add the references for the dependencies within index.js. Import all the required dependencies to get started.

//Including FusionCharts Dependencies
var FusionCharts = require('fusioncharts');
var Charts = require('fusioncharts/fusioncharts.charts');
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');

Charts(FusionCharts); // Resolve Charts as dependency for FusionCharts

FusionTheme(FusionCharts); // Resolve Fusion theme as dependency for FusionCharts

jQueryFusionCharts(FusionCharts); //Resolve jQueryFusionCharts as dependency for FusionCharts

That completes the installation of FusionCharts and the jquery-fusioncharts plugin.

Preparing the data

Let's create a chart showing the "Countries With Most Oil Reserves". The data of the oil reserves present in various countries is shown in tabular form below.

Country No. of Oil Reserves
Venezuela 290K
Saudi 260K
Canada 180K
Iran 140K
Russia 115K
UAE 100K
US 30K
China 30K

Since we are plotting a single dataset, let us create a column 2D chart with 'countries' as data labels along the x-axis and 'No. of oil reserves' as data values along y-axis. Let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. So the above data in the tabular form will take the below shape.

// Preparing the chart data
const chartData = [
  {
    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"
  }
];

Configure your chart

Now that the data is ready, let's work on the styling, positioning and giving your chart a context.

// Chart Configuration
const chartConfigs = {
    type: "column2d",
    width: "700",
    height: "400",
    dataFormat: "json",
    chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subCaption: "In MMbbl = One Million barrels",
        xAxisName: "Country",
        yAxisName: "Reserves (MMbbl)",
        numberSuffix: "K",
        theme: "fusion"
    },
    // Chart Data - from step 2
    "data": chartData
};

The type attribute in the chartConfigs object signifies the type of chart being rendered. Have a look at different chart types with their aliases here.

Render the chart

Get ready to render your first chart finally with the steps below:


<html>
    <head>
        <!-- Include jQuery -->
        <script type="text/javascript" src=" https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Include fusioncharts core library file -->
        <script type="text/javascript" src=" https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
        <!-- Include fusion theme file -->
        <script type="text/javascript" src=" https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
        <!-- Include fusioncharts jquery plugin -->
        <script type="text/javascript" src=" https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/develop/dist/fusioncharts.jqueryplugin.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //STEP 2 - Chart Data
            const chartData = [{
                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"
            }]
            //STEP 3 - Chart Configurations
            const chartConfigs = {
                type: "column2d",
                width: "700",
                height: "400",
                dataFormat: "json",
                dataSource: {
                    // Chart Configuration
                    "chart": {
                        "caption": "Countries With Most Oil Reserves [2017-18]",
                        "subCaption": "In MMbbl = One Million barrels",
                        "xAxisName": "Country",
                        "yAxisName": "Reserves (MMbbl)",
                        "numberSuffix": "K",
                        "theme": "fusion",
                    },
                    // Chart Data
                    "data": chartData
                }
            }
            // Create a chart container
            $('document').ready(function () {
                $("#chart-container").insertFusionCharts(chartConfigs);
            });
        </script>
        <div id="chart-container">FusionCharts will render here</div>
    </body>
</html>



<html>
    <head>
        <!-- Include jQuery -->
        <script type="text/javascript" src="path/to/local/jquery-3.3.1.min.js"></script>
        <!-- Include fusioncharts core library file -->
        <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
        <!-- Include fusion theme file -->
        <script type="text/javascript" src="path/to/local/themes/fusioncharts.theme.fusion.js"></script>
        <!-- Include fusioncharts jquery plugin -->
        <script type="text/javascript" src="path/to/local/fusioncharts.jqueryplugin.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //STEP 2 - Chart Data
            const chartData = [{
                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"
            }];
          //STEP 3 - Chart Configurations
            const chartConfigs = {
                type: "column2d",
                width: "700",
                height: "400",
                dataFormat: "json",
                dataSource: {
                    // Chart Configuration
                    "chart": {
                        "caption": "Countries With Most Oil Reserves [2017-18]",
                        "subCaption": "In MMbbl = One Million barrels",
                        "xAxisName": "Country",
                        "yAxisName": "Reserves (MMbbl)",
                        "numberSuffix": "K",
                        "theme": "fusion",
                    },
                    // Chart Data
                    "data": chartData
                }
            }
            // Create a chart container
            $('document').ready(function () {
                $("#chart-container").insertFusionCharts(chartConfigs);
            });
        </script>
        <div id="chart-container">FusionCharts will render here</div>
    </body>
</html>
Step 1: In index.js include the necessary files and import the fusioncharts dependency. The consolidated code is shown below:

var FusionCharts = require('fusioncharts');
var Charts = require('fusioncharts/fusioncharts.charts');
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');
$('document').ready(function () {
    Charts(FusionCharts); // Resolve Charts as dependency for FusionCharts
    FusionTheme(FusionCharts);  // Resolve Fusion theme as dependency for FusionCharts
    jQueryFusionCharts(FusionCharts); //Resolve jQueryFusionCharts as dependency for FusionCharts
    //STEP 2 - Chart Data
    const chartData = [{
        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"
    }];
    //STEP 3 - Chart Configurations
    const chartConfigs = {
        type: "column2d",
        width: "700",
        height: "400",
        dataFormat: "json",
        dataSource: {
            // Chart Configuration
            "chart": {
                "caption": "Countries With Most Oil Reserves [2017-18]",
                "subCaption": "In MMbbl = One Million barrels",
                "xAxisName": "Country",
                "yAxisName": "Reserves (MMbbl)",
                "numberSuffix": "K",
                "theme": "fusion",
            },
            // Chart Data
            "data": chartData
        }
    }
    $("#chart-container").insertFusionCharts(chartConfigs);
});
Step 2: Specify the chart container within the index.html file.

<!DOCTYPE html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <div id="chart-container">Fusioncharts will render here</div>
    <script src="main.js"></script>
  </body>
</html>
Step 3: Run npx webpack command in the terminal. Once the build is successful, open the index.html file to see your chart.

See your chart

You should be able to see the chart as shown below.

FusionCharts will load here..

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix it accordingly. If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using jquery-fusioncharts is ready.