How to create your first chart with FusionCharts.js?

JavascriptProgramming ScriptsWeb Development

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.

raja
Updated on 11-Oct-2022 13:16:25

Advertisements