Post
Ask Question

Getting Started With FusionCharts

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
 
The 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 an 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:
  1. [    
  2.    {"Label": "Starters", "Value": "1050700"},    
  3.    {"label": "Snacks", "value": "1250400"},    
  4.    {"label": "Main Course", "value": "1463300"},    
  5.    {"label": "Desserts", "value": "491000"}    
  6. ]  
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:
  1. <html>  
  2.   
  3. <head>  
  4.     <title>Getting Started with FusionCharts</title>  
  5.     <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>  
  6.     <script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>  
  7.     <script type="text/javascript" src="fusioncharts/themes/zune.js"></script>  
  8.     <!-- Location of JavaScript files may be different according to user -->  
  9. </head>  
  10.   
  11. <body>  
  12.     <!-- Container for Chart (div element) -->  
  13.     <div id="chart-container">Awesome Chart on its way!</div>  
  14. </body>  
  15.   
  16. </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 many 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 the JSON data array created above. This is how it is done for our example:
  1. FusionCharts.ready(function () { //FusionCharts Constructor    
  2.     var demoChart = new FusionCharts({  
  3.         //Instance    
  4.         type: "pie2d",  
  5.         renderAt: "chart-container" //ID of div element created in HTML    
  6.         height: "400",  
  7.         width: "400",  
  8.         dataFormat: "json",  
  9.         dataSource: {  
  10.             //Basic Chart Configuration & Cosmetics    
  11.             "chart": {  
  12.                 "caption": "Split of Food Sales by Category",  
  13.                 "subCaption": "Last Year",  
  14.                 "pieRadius": "75",  
  15.                 "showPercentValues": "1",  
  16.                 "theme": "zune"  
  17.             },  
  18.             "data": [{  
  19.                     "Label": "Starters",  
  20.                     "Value": "1050700"  
  21.                 },  
  22.                 {  
  23.                     "label": "Snacks",  
  24.                     "value": "1250400"  
  25.                 },  
  26.                 {  
  27.                     "label": "Main Course",  
  28.                     "value": "1463300"  
  29.                 },  
  30.                 {  
  31.                     "label": "Desserts",  
  32.                     "value": "491000"  
  33.                 }  
  34.             ]  
  35.         }  
  36.     }).render();  
  37. }); 
'type' attribute defines the chart type we are going to plot - 'pie2d' in this example. The size of the chart is defined using 'height' and 'width' attributes. 'chart' object under 'dataSource' contains chart configuration options like caption, theme, the 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:
  1. <html>  
  2.   
  3. <head>  
  4.     <title>Getting Started with FusionCharts</title>  
  5.     <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>  
  6.     <script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>  
  7.     <script type="text/javascript" src="fusioncharts/themes/zune.js"></script>  
  8.     <!-- Location of JavaScript files may be different according to user -->  
  9.     <script type="text/javascript">  
  10.     FusionCharts.ready(function() { //FusionCharts Constructor    
  11.         var demoChart = new FusionCharts({  
  12.             //Instance    
  13.             type: "pie2d",  
  14.             renderAt: "chart-container", //ID of div element created in HTML    
  15.             height: "400",  
  16.             width: "400",  
  17.             dataFormat: "json",  
  18.             dataSource: {  
  19.                 //Basic Chart Configuration & Cosmetics    
  20.                 "chart": {  
  21.                     "caption": "Split of Food Sales by Category",  
  22.                     "subCaption": "Last Year",  
  23.                     "pieRadius": "75",  
  24.                     "showPercentValues": "1",  
  25.                     "theme": "zune"  
  26.                 },  
  27.                 "data": [{  
  28.                     "Label": "Starters",  
  29.                     "Value": "1050700"  
  30.                 }, {  
  31.                     "label": "Snacks",  
  32.                     "value": "1250400"  
  33.                 }, {  
  34.                     "label": "Main Course",  
  35.                     "value": "1463300"  
  36.                 }, {  
  37.                     "label": "Desserts",  
  38.                     "value": "491000"  
  39.                 }]  
  40.             }  
  41.         }).render();  
  42.     });  
  43.     </script>  
  44.     <!-- FusionCharts Constructor & Instance -->  
  45. </head>  
  46.   
  47. <body>  
  48.     <!-- Container for Chart (div element) -->  
  49.     <div id="chart-container">Awesome Chart on its way!</div>  
  50. </body>  
  51.   
  52. </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.

Summary

 
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! 


Similar Articles