Sponsored

Beginner’s Guide to Quickly Integrating FusionCharts into Your Website

This article is sponsored FusionCharts.

Partner Content
February 21, 2022

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:

Using CDN
Via NPM
Using local files

Let’s begin.

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:

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:

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:

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

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:

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

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

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.

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

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: