Beginner’s Guide to Quickly Integrating FusionCharts into Your Website

This article is sponsored FusionCharts.

Share on twitter
Tweet
Share on facebook
Share
Share on whatsapp
WhatsApp
FusionCharts
Image: FusionCharts

Over the years, FusionCharts has become an immensely popular data visualization platform among business owners and web developers alike. Founded in 2002, FusionCharts is a data visualization library that helps web and mobile developers generate charts, gauges, and maps to power the dashboards. 

With the help of FusionCharts, developers can create charts effortlessly and then add advanced reporting capabilities such as unlimited drill-down and chart export in a matter of minutes. 

It can produce more than 90 different chart types and integrates with a large number of frameworks and platforms, giving a great deal of flexibility.

Let’s find out how to integrate FusionCharts into your website.

Steps to Integrate FusionCharts into Your Website

When it comes to integrating FusionCharts into your website, it can be done in three different ways:

  1. Using CDN 
  2. Via NPM
  3. Using local files

Let’s begin. 

Find your dream job

Integrating FusionCharts into a website using CDN (content delivery network)

Step 1: Include the FusionCharts core library

To integrate FusionCharts into your website using CDN, all you need to do is include the FusionCharts JavaScript from your CDN in your static HTML file. The code that goes into your HTML file is shown below:

<head>
    <!– Step 1 – Include the fusioncharts core library –>
<scripttype=”text/javascript”src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script>

Step 2: Include the FusionCharts theme

Once you have included the FusionCharts core library, add the FusionCharts theme file to apply the style to the charts. 

The code that goes into your HTML file is shown below:

<head>
    <!– Step 1 – Include the fusioncharts core library –>
    <script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script>
    <!– Step 2 – Include the fusion theme –>
    <script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js”></script>
</head>

Step 3: Prepare the data

Once you have installed the FusionCharts suite, you need to prepare the chart data. In the following example, the data of the coal reserves present in various countries is shown in tabular form:

CountryNo. of Coal Reserves
Venezuela290K
Saudi Arabia260K
Canada 180K
Iran140K
Russia115K
UAE100K
US30K
China30K

FusionCharts accepts the data in JSON format. So the above data in 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”
  }
];

Step 4: Configure your chart

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

  • Type: Type defines the chart type you are going to plot.
  • Height and width: The size of the chart is defined using ‘height’ and ‘width’ attributes.
  • Chart: The ‘chart’ object under ‘DataSource’ contains chart configuration options like caption, theme, and display formats for numbers. 
// Create a JSON object to store the chart configurations
const chartConfigs = {
  //Specify the chart type
  type: “column2d”,
  //Set the container object
  renderAt: “chart-container”,
  //Specify the width of the chart
  width: “100%”,
  //Specify the height of the chart
  height: “400”,
  //Set the type of data
  dataFormat: “json”,
  dataSource: {
    chart: {
      //Set the chart caption
      caption: “Countries With Most Coal Reserves [2017-18]”,
      //Set the chart subcaption
      subCaption: “In MMbbl = One Million barrels”,
      //Set the x-axis name
      xAxisName: “Country”,
      //Set the y-axis name
      yAxisName: “Reserves (MMbbl)”,
      numberSuffix: “K”,
      //Set the theme for your chart
      theme: “fusion”
    },
    // Chart Data from Step 2
    data: chartData
  }
};

Step 5: Render the chart

Now with all the pieces of the puzzle solved, it’s time to combine everything from above and render the chart. Here is the consolidated code to render the chart.

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!– Include fusioncharts core library –>
<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script>
<!– Include fusion theme –>
<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js”></script>
<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 chartConfig = {
    type: ‘column2d’,
    renderAt: ‘chart-container’,
    width: ‘100%’,
    height: ‘400’,
    dataFormat: ‘json’,
    dataSource: {
        // Chart Configuration
        “chart”: {
            “caption”: “Countries With Most Coal Reserves [2017-18]”,
            “subCaption”: “In MMbbl = One Million barrels”,
            “xAxisName”: “Country”,
            “yAxisName”: “Reserves (MMbbl)”,
            “numberSuffix”: “K”,
            “theme”: “fusion”,
            },
        // Chart Data
        “data”: chartData
        }
    };
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts(chartConfig);
    fusioncharts.render();
    });

</script>
</head>
<body>
<div id=”chart-container”>FusionCharts XT will load here!</div>
</body>
</html>

Once you have rendered the chart, you should be able to see it as shown below:

Integrating FusionCharts into a website via NPM

Step 1: Create a project folder

To integrate FusionCharts into your website, simply create a project folder using the following command:

$ mkdir projectName
$ cd projectName

Step 2: Install webpack

Once you have created a project folder, install the latest webpack release by running the following command:

$ npm install webpack webpack-cli –save-dev

Step 3: Install the FusionCharts package

Install the FusionCharts package via NPM by running the command below:

$ npm install fusioncharts

After installing the FusionCharts package, create the following directory structure, files, and their contents:

  • Create an src folder inside the project directory. Within the src folder, create an index.js file. 
  • Create a dist folder inside the project directory. Within the dist folder, create an index.html file.

The directory structure will look like this:

Step 4: Import the required dependencies

After installing the FusionCharts components, you need to import all the required dependencies to get started.

// Include the core fusioncharts file from core
import FusionCharts from ‘fusioncharts/core’;
// Include the chart from viz folder
import Column2D from ‘fusioncharts/viz/column2d’;
// Include the fusion theme
import FusionTheme from ‘fusioncharts/themes/es/fusioncharts.theme.fusion’;
// Add the chart and theme as dependency
// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);

Step 5: Preparing the data

Once you have installed the FusionCharts suite, you need to prepare the chart data. In the following example, the data of the coal reserves present in various countries is shown in tabular form:

CountryNo. of Coal Reserves
Venezuela290K
Saudi Arabia260K
Canada 180K
Iran140K
Russia115K
UAE100K
US30K
China30K

FusionCharts accepts the data in JSON format. So the above data in 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”
  }
];

Step 6: Configure your chart

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

  • Type: Type defines the chart type you are going to plot.
  • Height and width: The size of the chart is defined using ‘height’ and ‘width’ attributes.
  • Chart: The ‘chart’ object under ‘DataSource’ contains chart configuration options like caption, theme, and display formats for numbers. 
// Create a JSON object to store the chart configurations
const chartConfigs = {
  //Specify the chart type
  type: “column2d”,
  //Set the container object
  renderAt: “chart-container”,
  //Specify the width of the chart
  width: “100%”,
  //Specify the height of the chart
  height: “400”,
  //Set the type of data
  dataFormat: “json”,
  dataSource: {
    chart: {
      //Set the chart caption
      caption: “Countries With Most Coal Reserves [2017-18]”,
      //Set the chart subcaption
      subCaption: “In MMbbl = One Million barrels”,
      //Set the x-axis name
      xAxisName: “Country”,
      //Set the y-axis name
      yAxisName: “Reserves (MMbbl)”,
      numberSuffix: “K”,
      //Set the theme for your chart
      theme: “fusion”
    },
    // Chart Data from Step 2
    data: chartData
  }
};

Step 7: Render the chart

Once you have properly configured the chart, you need to render it.

The FusionCharts package for npm can be used in two ways:

  • FusionCharts ES Module
  • FusionCharts CJS Module

In index.js you will need to include the essential files and import the FusionCharts dependency. Here is the consolidated code for ES6 and CJS.

ES6 

// Include the core fusioncharts file from core  –
import FusionCharts from ‘fusioncharts/core’;

// Include the chart from viz folder
// E.g. – import ChartType from fusioncharts/viz/[ChartType]
import Column2D from ‘fusioncharts/viz/column2d’;

// Include the fusion theme
import FusionTheme from ‘fusioncharts/themes/es/fusioncharts.theme.fusion’;

// Add the chart and theme as dependency
// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);

//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 chartConfig = {
type: ‘column2d’,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘400’,
dataFormat: ‘json’,
dataSource: {
// Chart Configuration
“chart”: {
“caption”: “Countries With Most Coal Reserves [2017-18]”,
“subCaption”: “In MMbbl = One Million barrels”,
“xAxisName”: “Country”,
“yAxisName”: “Reserves (MMbbl)”,
“numberSuffix”: “K”,
“theme”: “fusion”,
},
// Chart Data
“data”: chartData
}
};

// STEP 4 – Create an Instance with chart options and render the chart
var chartInstance = new FusionCharts(chartConfig);
chartInstance.render();

CJS

var FusionCharts = require(‘fusioncharts’);

// Require charts from fusioncharts
var Charts = require(‘fusioncharts/fusioncharts.charts’);

// Require theme from fusioncharts
var FusionTheme = require(‘fusioncharts/themes/fusioncharts.theme.fusion’);

// Add charts and themes as dependency
Charts(FusionCharts);
FusionTheme(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 chartConfig = {
type: ‘column2d’,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘400’,
dataFormat: ‘json’,
dataSource: {
// Chart Configuration
“chart”: {
“caption”: “Countries With Most Coal Reserves [2017-18]”,
“subCaption”: “In MMbbl = One Million barrels”,
“xAxisName”: “Country”,
“yAxisName”: “Reserves (MMbbl)”,
“numberSuffix”: “K”,
“theme”: “fusion”,
},
// Chart Data
“data”: chartData
}
};

// STEP 4 – Create an Instance with chart options and render
var chartInstance = new FusionCharts(chartConfig);
chartInstance.render();

Once you have included the essential files in the index.js and imported the FusionCharts dependency, 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=”index.js”></script>
  </body>
</html>

Finally, you need to run npx webpack command in the terminal. Once done, open the index.html file to see the chart. You should be able to see the chart as shown below:

Integrating FusionCharts into a website using local files

Step 1: Include the FusionCharts core library

For integrating FusionCharts into your website using local, all you need to do is include the FusionCharts JavaScript files in your static HTML file. The code that goes into your HTML file is shown below:

<head>
    <!– Step 1 – Include the fusioncharts core library –>
    <script type=”text/javascript” src=”path/to/local/fusioncharts.js”></script>

Step 2: Include the FusionCharts theme

Once you have included the FusionCharts core library, include the FusionCharts theme file to apply the style to the charts. The code that goes into your HTML file is shown below:

<head>
    <!– Step 1 – Include the fusioncharts core library –>
    <script type=”text/javascript” src=”path/to/local/fusioncharts.js”></script>
    <!– Step 2 – Include the fusion theme –>
    <script type=”text/javascript” src=”path/to/local/themes/fusioncharts.theme.fusion.js”></script>
</head>

Step 3: Prepare the data

Once you have installed the FusionChart suite, you need to prepare the chart data. In the following example, the data of the coal reserves present in various countries is shown in tabular form:

CountryNo. of Coal Reserves
Venezuela290K
Saudi Arabia260K
Canada 180K
Iran140K
Russia115K
UAE100K
US30K
China30K

FusionCharts accepts the data in JSON format. So the above data in 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”
  }
];

Step 4: Configure your chart

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

  • Type: Type defines the chart type you are going to plot.
  • Height and width: The size of the chart is defined using ‘height’ and ‘width’ attributes.
  • Chart: The ‘chart’ object under ‘DataSource’ contains chart configuration options like caption, theme, and display formats for numbers. 
// Create a JSON object to store the chart configurations
const chartConfigs = {
  //Specify the chart type
  type: “column2d”,
  //Set the container object
  renderAt: “chart-container”,
  //Specify the width of the chart
  width: “100%”,
  //Specify the height of the chart
  height: “400”,
  //Set the type of data
  dataFormat: “json”,
  dataSource: {
    chart: {
      //Set the chart caption
      caption: “Countries With Most Coal Reserves [2017-18]”,
      //Set the chart subcaption
      subCaption: “In MMbbl = One Million barrels”,
      //Set the x-axis name
      xAxisName: “Country”,
      //Set the y-axis name
      yAxisName: “Reserves (MMbbl)”,
      numberSuffix: “K”,
      //Set the theme for your chart
      theme: “fusion”
    },
    // Chart Data from Step 2
    data: chartData
  }
};

Step 5: Render the chart

Once you have configured your chart, you need to render it. The consolidated code to render the chart is shown below:

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!– Include fusioncharts core library –>
<script type=”text/javascript” src=”path/to/local/fusioncharts.js”></script>
<!– Include fusion theme –>
<script type=”text/javascript” src=”path/to/local/themes/fusioncharts.theme.fusion.js”></script>
<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 chartConfig = {
    type: ‘column2d’,
    renderAt: ‘chart-container’,
    width: ‘100%’,
    height: ‘400’,
    dataFormat: ‘json’,
    dataSource: {
        // Chart Configuration
        “chart”: {
            “caption”: “Countries With Most Coal Reserves [2017-18]”,
            “subCaption”: “In MMbbl = One Million barrels”,
            “xAxisName”: “Country”,
            “yAxisName”: “Reserves (MMbbl)”,
            “numberSuffix”: “K”,
            “theme”: “fusion”,
            },
        // Chart Data
        “data”: chartData
        }
    };
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts(chartConfig);
    fusioncharts.render();
    });

</script>
</head>
<body>
<div id=”chart-container”>FusionCharts XT will load here!</div>
</body>
</html>

Once you have rendered the chart, you should be able to see the chart as shown below:

Wrap up

FusionCharts not only helps you create interactive charts for web applications, but it also allows you to add smart reporting features like chart export, drill-down, selective display of data, and scroll and zoom to your charts. With extensive documentation and cross-browser support, the charting library tool also allows you to configure the chart the way you want it, be it visual or functional. While integrating FusionCharts into a site may seem intimidating, the process is fairly straightforward.

By following the above steps, you can effortlessly integrate FusionCharts into your website and create charts in no time!

Partner Content

Partner Content

Fossbytes caters to a vast and influential readership spread all across the world. Get your brand in front of millions of readers with our specially-crafted and attractive sponsored posts. To learn more, read our sponsored post guidelines.

Find your dream job

Work at your dream company with Fossbytes Jobs