Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
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: {
// Configuration of Chart
"chart": {
"caption": "Billionares By Country Wise[2022]",
"subCaption": "According to Forbes",
"xAxisName": "Country",
"yAxisName": "Billionares",
"theme": "fusion",
},
// Actual Chart Data
"data": chartData
}
};
FusionCharts.ready(function() {
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts!!</div>
</body>
</html>
If we run the above code in the browser, we will get a bar graph plotted as an output.
Explanation
In this code, we first created a JSON data that we will pass in the "data" property of the chartConfig that is required when we are creating an instance of the FusionChart object.
Besides that, we have a couple of properties present in the "chartConfig" object, especially the "chart" property in which we have different sub-properties like caption, subCaption that are all required when we are plotting a bar graph.
Example 2
In the above example, we created a bar chart with a simple JSON data, and rendered it to the browser. In the following example, we will create a more complex chart in which we will depict a fusion chart with multiple blocks. Consider the code shown below.
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">For Rendering!!</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 Devices Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "300000",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues": "1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"drawQuadrant": "1",
"quadrantLineAlpha": "80",
"quadrantLineThickness": "3",
"quadrantXVal": "50",
"quadrantYVal": "15000",
"quadrantLabelTL": "Low Price / High Sale",
"quadrantLabelTR": "High Price / High Sale",
"quadrantLabelBL": "Low Price / Low Sale",
"quadrantLabelBR": "High Price / Low Sale",
"yAxisLineThickness": "1",
"yAxisLineColor": "#999999",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "$50",
"x": "0"
},{
"label": "$100",
"x": "20",
"showverticalline": "1"
},{
"label": "$150",
"x": "40",
"showverticalline": "1"
},{
"label": "$200",
"x": "60",
"showverticalline": "1"
},{
"label": "$250",
"x": "80",
"showverticalline": "1"
}, {
"label": "$300",
"x": "100",
"showverticalline": "1"
}
]
}],
"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": "10500",
"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"
}
]
}],
"trendlines": [{
"line": [{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
},{
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}
]
}],
"vTrendlines": [{
"line": [{
"startValue": "44",
"isTrendZone": "0",
"color": "#0066cc",
"thickness": "1",
"dashed": "1",
"displayValue": "Gross Avg."
}]
}]
}
});
conversionChart.render();
});
</script>
</body>
</html>
Use the "Edit and Run" button to run this code and see the output. It will display a plot with multiple quadrants.
Explanation
In this example, we are trying to depict the sales of multiple mobile devices companies with the help of FusionCharts.
Here, the "dataset" property contains the actual JSON data that we will show in the graph, whereas the "categories" contain the data for the X and the Y-axis coordinates.
Conclusion
In this tutorial, we used a couple of examples to demonstrate how you can utilize the features available in FusionCharts library to create different charts in JavaScript.
512 Views
