Getting Started With FusionCharts

Gagan Sikri
8y
8k
0
3

Article

Introduction

FusionCharts is a comprehensive JavaScript charting library packed with 90+ charts and 1000+ maps. It works well across all modern browsers (including IE 6) and has some pretty cool features like client-side image export, events, themes and annotations, etc. It also has open-source plugins/wrappers for popular web technologies like AngularJS, jQuery, ASP.NET and PHP.

Enough for the intro, now it's time to get started with code!

Creating Your First Chart

Don't worry if you are new to FusionCharts or dataviz in general, as it is easy to get started. All you need to do is follow my step-by-step tutorial to make your first chart:

Step 1: Gathering Data

First step is to decide what you want to plot. Gather your data and choose a chart type you would like to use. I am going to use random data for the purpose of this tutorial to plot a pie-chart.

FusionCharts renders charts using JavaScript and supports XML and JSON data formats. I will take example with JSON data format as it is the most commonly used format nowadays:

Use Case: Split of Food Sales by Category. Here's the tabular data that we are going to plot:

Category	Sales
Starters	1050700
Snacks	1250400
Main Course	1463300
Desserts	491000

And this is the JSON data array for the tabular data shown above:

[
{"Label": "Starters", "Value": "1050700"},
{"label": "Snacks", "value": "1250400"},
{"label": "Main Course", "value": "1463300"},
{"label": "Desserts", "value": "491000"}
]

Step 2: Preparing HTML

For simple applications like displaying interactive charts on a standard web page, we will need to include JavaScript files from FusionCharts core package using <script> tag. The actual chart needs a container inside which it will be displayed. For our purposes we are going to use a <div> tag.

Here's the HTML code for our demo:

<html>
<head>
<title>Getting Started with FusionCharts</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/zune.js"></script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Step 3: JavaScript

This is the heart of the application. This is where FusionCharts does its magic and allows us to be creative with our data. Since this is a basic tutorial I won't go into much details here. Because once you get a grip of working with FusionCharts you can start figuring things out on your own using their live example gallery as it comes with complete source code of every chart.

The final step to render the chart is to include instance from FusionCharts constructor and specify JSON data array created above. This is how it is done for our example:

FusionCharts.ready(function() { //FusionCharts Constructor
var demoChart=new FusionCharts({
//Instance
type: "pie2d",
renderAt: "chart-container" //ID of div element created in HTML
height: "400",
width: "400",
dataFormat: "json",
dataSource: {
//Basic Chart Configuration & Cosmetics
"chart": {
"caption": "Split of Food Sales by Category",
"subCaption": "Last Year",
"pieRadius": "75",
"showPercentValues": "1",
"theme": "zune"
},
"data": [
{"Label": "Starters", "Value": "1050700"},
{"label": "Snacks", "value": "1250400"},
{"label": "Main Course", "value": "1463300"},
{"label": "Desserts", "value": "491000"}
]
}
}).render();
});

'type' attribute defines the chart type we are going to plot - 'pie2d' in this example. Size of the chart is defined using 'height' and 'width' attributes. 'chart' object under 'dataSource' contains chart configuration options like caption, theme, radius of pie and display formats for numbers etc.

Putting Everything Together

Now with all the pieces of the puzzle solved, it's time to combine everything from above and see the hard work of our efforts. You can see the working CodePen demo here and this is the final code for our example:

<html>
<head>
<title>Getting Started with FusionCharts</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/zune.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() { //FusionCharts Constructor
var demoChart=new FusionCharts({
//Instance
type: "pie2d",
renderAt: "chart-container", //ID of div element created in HTML
height: "400",
width: "400",
dataFormat: "json",
dataSource: {
//Basic Chart Configuration & Cosmetics
"chart": {
"caption": "Split of Food Sales by Category",
"subCaption": "Last Year",
"pieRadius": "75",
"showPercentValues": "1",
"theme": "zune"
},
"data": [
{"Label": "Starters", "Value": "1050700"},
{"label": "Snacks", "value": "1250400"},
{"label": "Main Course", "value": "1463300"},
{"label": "Desserts", "value": "491000"}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Conclusion

I just scratched the surface of what FusionCharts offers, but I hope this was enough to get you started. I will explore more advanced topics in future tutorials. If you are interested in exploring further on your own, you will find below resources helpful:

Free Trial: FusionCharts offers an unlimited free-trial. There is no feature restriction. You'll need this if you want to play around with it further.
Documentation: Documentation is a developer's best friend. Head over to the documentation page to better learn how to used FusionCharts' advanced features.

PS: I will be hanging around in the comments section below. So don't be shy and feel free to shoot any questions you might have about this article or you can even just say hi!

Up Next

Ebook Download

View all

JavaScript Interview Q & A

Read by 40 people

Download Now!

Learn

View all