Every day we create a staggering 2.5 quintillion bytes of data [1] worldwide. The numbers are enormous and growing. The availability of so much raw information is reason enough for any individual or organization to start leveraging data to identify future prospects, find new opportunities, understand current trends and plan ahead. Stepping up your data visualization game should be one of your first steps towards gaining key insights and turning raw numbers into knowledge. FusionCharts can help you do exactly that.
FusionCharts is a graphing and charting library. It helps you create meaningful, effective, and powerful data presentations. To get you started, we put together a step-by-step guide to show how can generate your first set of data charts using the FusionCharts library. It is easier than you think. For example here is a single HTML file that displays the data using a bar chart, line chart, and map. Open the HTML file in a web browser and you will see this:
Table of Contents
<title>FusionCharts</title> <style> .chart-container { width: 40%; float: left; padding: 20px; border: 2px solid lightblue; } </style> <center><h1>My first Bar Chart, Line Chart and Map</h1></center> <center><h2>With Awesome FusionCharts Library</h2></center>
<!-- 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>
const continentData = [ { id: "NA", label: "North America", value: "16.3", showLabel: "1" }, { id: "SA", label: "South America", value: "12.0", showLabel: "1" }, { id: "AS", label: "Asia", value: "30.0", showLabel: "1" }, { id: "EU", label: "Europe", value: "6.7", showLabel: "1" }, { id: "AF", label: "Africa", value: "20.3", showLabel: "1" }, { id: "AU", label: "Australia", value: "5.2", showLabel: "1" } ];
var chartConfig = { type: "", renderAt: "", dataFormat: "json", dataSource: { chart: { caption: "Percentage of Land Area on Planet Earth", subCaption: "Data Source: www.enchantedlearning.com", xAxisName: "Continent", yAxisName: "% Land Area", numberSuffix: "%", theme: "fusion" }, data: continentData }
function renderBar(){ chartConfig.type = 'column2d'; chartConfig.renderAt = 'bar-chart-container'; var fusioncharts = new FusionCharts(chartConfig); fusioncharts.render(); } FusionCharts.ready(renderBar);In the body of the HTML file specify the corresponding div tag as:
<div class="chart-container" id="bar-chart-container">FusionCharts XT will load here!</div>Note, we have added the class as ‘chart-container’ for formatting two charts side by side. This is optional.
function renderLine(){ chartConfig.type = 'line'; chartConfig.renderAt = 'line-chart-container'; var fusioncharts = new FusionCharts(chartConfig); fusioncharts.render(); } FusionCharts.ready(renderLine)The corresponding div tag in the HTML file is:
<div class="chart-container" id="line-chart-container">FusionCharts XT will load here!</div>
function renderMap(){ chartConfig.type = 'world'; chartConfig.renderAt = 'map-container'; var fusioncharts = new FusionCharts(chartConfig); fusioncharts.render(); } FusionCharts.ready(renderMap);Also, add the following div tag to the body of the HTML file:
<center> <div id="map-container">FusionCharts XT will load here!</div> </center>You can explore more map options and map types to customize various features.
<html> <head> <title>FusionCharts</title> <style> .chart-container { width: 40%; float: left; padding: 20px; border: 2px solid lightblue; } </style> <center><h1>My first Bar Chart, Line Chart and Map</h1></center> <center><h2>With Awesome FusionCharts Library</h2></center> <!-- 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"> // Specify data const continentData = [ { id: "NA", label: "North America", value: "16.3", showLabel: "1" }, { id: "SA", label: "South America", value: "12.0", showLabel: "1" }, { id: "AS", label: "Asia", value: "30.0", showLabel: "1" }, { id: "EU", label: "Europe", value: "6.7", showLabel: "1" }, { id: "AF", label: "Africa", value: "20.3", showLabel: "1" }, { id: "AU", label: "Australia", value: "5.2", showLabel: "1" } ]; var chartConfig = { type: "", renderAt: "", dataFormat: "json", dataSource: { chart: { caption: "Percentage of Land Area on Planet Earth", subCaption: "Data Source: www.enchantedlearning.com", xAxisName: "Continent", yAxisName: "% Land Area", numberSuffix: "%", theme: "fusion" }, // Connect the data data: continentData } }; function renderBar(){ chartConfig.type = 'column2d'; chartConfig.renderAt = 'bar-chart-container'; var fusioncharts = new FusionCharts(chartConfig); fusioncharts.render(); } function renderLine(){ chartConfig.type = 'line'; chartConfig.renderAt = 'line-chart-container'; var fusioncharts = new FusionCharts(chartConfig); fusioncharts.render(); } function renderMap(){ chartConfig.type = 'world'; chartConfig.renderAt = 'map-container'; var fusioncharts = new FusionCharts(chartConfig); fusioncharts.render(); } FusionCharts.ready(renderBar); FusionCharts.ready(renderLine) FusionCharts.ready(renderMap); </script> </head> <body> <!-- Add all the containers --> <div class="chart-container" id="bar-chart-container">FusionCharts XT will load here!</div> <div class="chart-container" id="line-chart-container">FusionCharts XT will load here!</div> <center> <div id="map-container">FusionCharts XT will load here!</div> </center> </body> </html>
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…