Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create your first chart with FusionCharts.js?
FusionCharts is a JavaScript library that you can use when you want to create charts and maps and put them in your web application. In this tutorial, we will show how you can use FusionChart.js to create two different charts.
Before we learn how to create charts, the first important thing is to know how we can install FusionCharts onto our local machines.
Installing FusionCharts
There are multiple ways with which we can install FusionCharts.
Using CDN
You can use the CDN link given below to directly gain access to the files of FusionCharts.
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
Install from NPM
You can use NPM to install the library into your code as a dependency. Use the following command to install FusionCharts.
npm install --save fusioncharts
The above command will save FusionCharts as a dev dependency in your project.
Now that we know how to install FusionCharts, let's explore a couple of examples of charts that we will create using FusionCharts.
Example 1: Creating a Column Chart
The first example is a simple bar graph that we will create with the help of FusionCharts that depicts the count of billionaires by country-wise. Consider the code shown below.
index.html
<html>
<head>
<title>FusionChart Example - 1</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
const chartData = [{
"label": "United States",
"value": "735"
}, {
"label": "Mainland China",
"value": "539"
}, {
"label": "India",
"value": "166"
}, {
"label": "Germany",
"value": "134"
}, {
"label": "Russia",
"value": "83"
}, {
"label": "Hong Kong",
"value": "67"
}, {
"label": "Canada",
"value": "64"
}, {
"label": "Brazil",
"value": "62"
}, {
"label": "Italy",
"value": "52"
}, {
"label": "Taiwan",
"value": "51"
}];
const chartConfig = {
type: 'column2d',
renderAt: 'chart-container',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Billionaires By Country Wise [2022]",
"subCaption": "According to Forbes",
"xAxisName": "Country",
"yAxisName": "Billionaires",
"theme": "fusion"
},
"data": chartData
}
};
FusionCharts.ready(function() {
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts Loading...</div>
</body>
</html>
If we run the above code in the browser, we will get a column chart displaying billionaire counts by country.
Explanation
In this code, we first created a JSON data array that we pass in the "data" property of the chartConfig object. The chartConfig contains essential properties:
- type: Specifies the chart type (column2d for column chart)
- renderAt: The HTML element ID where the chart will render
- dataSource: Contains chart configuration and data
- chart: Contains styling and labeling properties like caption, axis names, and theme
Example 2: Creating a Bubble Chart
In the second example, we will create a more complex bubble chart that analyzes mobile device sales with multiple data dimensions.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<title>FusionChart - Example 2</title>
</head>
<body>
<div id="chart-container">Chart Loading...</div>
<script>
FusionCharts.ready(function() {
var conversionChart = new FusionCharts({
type: 'bubble',
renderAt: 'chart-container',
width: '600',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Analysis of Mobile Device Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "3000000",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"showValues": "1",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"drawQuadrant": "1",
"quadrantLineAlpha": "80",
"quadrantLineThickness": "3",
"quadrantXVal": "50",
"quadrantYVal": "1500000",
"quadrantLabelTL": "Low Price / High Sales",
"quadrantLabelTR": "High Price / High Sales",
"quadrantLabelBL": "Low Price / Low Sales",
"quadrantLabelBR": "High Price / Low Sales"
},
"categories": [{
"category": [{
"label": "$50",
"x": "0"
},{
"label": "$100",
"x": "20"
},{
"label": "$150",
"x": "40"
},{
"label": "$200",
"x": "60"
},{
"label": "$250",
"x": "80"
}, {
"label": "$300",
"x": "100"
}]
}],
"dataset": [{
"color": "#00aee4",
"data": [{
"x": "35",
"y": "1500000",
"z": "24",
"name": "Xiaomi"
},{
"x": "80",
"y": "1850000",
"z": "26",
"name": "Samsung"
},{
"x": "45",
"y": "1945000",
"z": "19",
"name": "Nokia"
},{
"x": "65",
"y": "105000",
"z": "8",
"name": "OnePlus"
},{
"x": "100",
"y": "905000",
"z": "5",
"name": "Apple"
},{
"x": "32",
"y": "2200000",
"z": "10",
"name": "Asus"
},{
"x": "44",
"y": "1300000",
"z": "9",
"name": "Vivo"
}]
}]
}
});
conversionChart.render();
});
</script>
</body>
</html>
This code creates a bubble chart with quadrants that help visualize the relationship between price, sales volume, and profit contribution for different mobile brands.
Explanation
In this bubble chart example:
- x-axis: Represents average price of devices
- y-axis: Represents units sold
- z-value: Represents profit contribution (bubble size)
- quadrants: Divide the chart into four sections for better analysis
- dataset: Contains the actual data points for each brand
- categories: Define the scale and labels for the x-axis
Key Features of FusionCharts
- Wide variety of chart types (column, bar, line, pie, bubble, etc.)
- Responsive design that works across devices
- Customizable themes and styling options
- Interactive features like tooltips and drill-down
- Easy integration with popular frameworks
Conclusion
FusionCharts provides a powerful and flexible solution for creating interactive charts in web applications. With its simple configuration approach and extensive customization options, you can create professional-looking visualizations with minimal code.
696 Views
