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

In case of including Fusioncharts dependencies from CDN or Local Files, you can skip this step and get started with the code mentioned in the below steps.

  • jQuery requires Node.js and NPM installed your machine. Please check it by running node -v and npm -v respectively. If either of them returns command not found, then please go to Node.js website to install it properly.

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 jQuery project through npm. If you choose to install fusioncharts package via npm, make sure you have Node.js and NPM installed in your system. Please check it by running node -v and npm -v respectively. To get Node.js, go to the official website.

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>
Follow the steps mentioned here to initialize a jQuery project through npm.
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.

// Create a JSON object to store the chart configurations
const chartConfigs = {
  type: "column2d", //Set the chart type
  width: "700", //Set the chart width
  height: "400", //Set the chart height
  dataFormat: "json", //Set the type of data
  chart: {
    caption: "Countries With Most Oil Reserves [2017-18]", //Set the chart caption
    subCaption: "In MMbbl = One Million barrels", //Set the chart subcaption
    xAxisName: "Country", //Set the x-axis name
    yAxisName: "Reserves (MMbbl)", //Set the y-axis name
    numberSuffix: "K",
    theme: "fusion" //Set the theme for your chart
  },
  // Chart Data - from step 2
  data: chartData
};

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.