JavaScript

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

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 Course1463300
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. <head>  
  3.    <title>Getting Started with FusionCharts</title>  
  4.    <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>  
  5.    <script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>   
  6.    <script type="text/javascript" src="fusioncharts/themes/zune.js"></script>  
  7.    <!-- Location of JavaScript files may be different according to user -->  
  8. </head>  
  9. <body>  
  10.    <!-- Container for Chart (div element) -->  
  11.    <div id="chart-container">Awesome Chart on its way!</div>  
  12. </body>  
  13. </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:
  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", "Value": "1050700"},  
  20.                     {"label": "Snacks", "value": "1250400"},  
  21.                     {"label": "Main Course", "value": "1463300"},  
  22.                     {"label": "Desserts", "value": "491000"}  
  23.                 ]  
  24.         }  
  25.     }).render();  
  26. });   
'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:
  1. <html>  
  2. <head>  
  3. <title>Getting Started with FusionCharts</title>  
  4. <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>  
  6. <script type="text/javascript" src="fusioncharts/themes/zune.js"></script>   
  7. <!-- Location of JavaScript files may be different according to user -->  
  8. <script type="text/javascript">  
  9. FusionCharts.ready(function() {  //FusionCharts Constructor  
  10.     var demoChart=new FusionCharts({   
  11.         //Instance  
  12.         type: "pie2d",  
  13.         renderAt: "chart-container", //ID of div element created in HTML  
  14.         height: "400",  
  15.         width: "400",  
  16.         dataFormat: "json",  
  17.         dataSource: {  
  18.             //Basic Chart Configuration & Cosmetics  
  19.               "chart": {  
  20.                 "caption": "Split of Food Sales by Category",  
  21.                 "subCaption": "Last Year",  
  22.                 "pieRadius": "75",  
  23.                 "showPercentValues": "1",  
  24.                 "theme": "zune"  
  25.             },  
  26.                "data": [  
  27.                     {"Label": "Starters", "Value": "1050700"},  
  28.                     {"label": "Snacks", "value": "1250400"},  
  29.                     {"label": "Main Course", "value": "1463300"},  
  30.                     {"label": "Desserts", "value": "491000"}  
  31.                 ]  
  32.         }  
  33.     }).render();  
  34. });  
  35. </script>   
  36. <!-- FusionCharts Constructor & Instance -->  
  37. </head>  
  38. <body>  
  39. <!-- Container for Chart (div element) -->  
  40. <div id="chart-container">Awesome Chart on its way!</div>  
  41. </body>  
  42. </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
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs