Getting Started with Data Visualization

Data visualization is on the rise nowadays. This step-by-step tutorial covers the process of creating your first data visualization using FusionCharts.

By Rohit Boggarapu, @4two2.

Data visualization is the art of presenting your data in the form on graphs & charts to communicate the information clearly and efficiently. As the data we have with us increases, so does the need to visualize it in better ways.

And that’s the reason I decided to write this article today. Even if you are new to data visualization, you will be be able to make any chart after reading this step-by-step tutorial.

Here is what we are building today: (live demo)

It is a 2D bubble chart built using FusionCharts’ JavaScript charts library. Bubble charts are used for visualization when there are three interdependent numeric parameters to be displayed on a chart. Although I am creating bubble chart as a demo in this tutorial, you can use this process to draw any of the 90+ charts available in FusionCharts’ library.

Now, let’s get started with the tutorial!

Four Steps to Visualize Data

This is a simple 4 step process that I use to make a JavaScript chart:

Step 1: Gathering and structuring data
Step 2: Including required JavaScript files
Step 3: Adding a chart container
Step 4: Rendering the chart

Step-1: Gathering and Structuring Data

In data visualization, data comes before visualization - both literally and figuratively. So first step is to collect the data you want to plot and then decide on the best chart type to represent that data.

Once we have the data, next step is to structure it in a way our charting library understands. FusionCharts understands both JSON & XML data, but I am going to only use JSON in this tutorial.

FusionCharts accepts data as an array of objects containing label and value. This is how it looks like:

[{
  "label": "The Departed",
  "value": "760089000"
}, {
  "label": "Gravity",
  "value": "85903456"
}...]

The example in above code snippet is all you need for plotting basic charts like bar & pie. But since we are plotting a chart which is little complex, we need to do something different to format our data.

Here’s a small trick I use to remember the exact data format: I find the chart type I want to plot in chart attributes page or examples gallery. There you can find a working sample with full source-code of any chart in the library. You can just copy format from there and vary it according to the data you have. You can see data format for a bubble chart on this page.

In our example, `dataset` array contains one object for each country. And there is a `category` array, under `categories`, which defines steps on X-axis. If you have any doubts, please visit live source code on JSFiddle to understand it better.

Step-2: Including Required JavaScript Files

Our project is dependent on 2 core FusionCharts’ JavaScript files - `fusioncharts.js` and `fusioncharts.charts.js`. Here is how we include them using HTML <script> tag:

<head><!-- JavaScript files from FusionCharts -->
  <script type="text/javascript" src="location/fusioncharts.js"></script>
  <script type="text/javascript" src="location/fusioncharts.charts.js"></script>
</head>

These files are necessary for rendering the bubble chart. You can add more files as well. Suppose you want to use a custom font on your chart. You can include relevant font file for that font here and set it using `baseFont` chart attribute.

Step-3: Adding a Chart Container

A container is an HTML element inside which our chart will sit. A <div> element is ideal for this:

<body>
  <div id="bubble-chart">A bubble chart will load here!</div>
</body>

I have given my <div> container the id bubble-chart. This will be used for identifying the container.

Step-4: Rendering the Chart

In this step, we need to create chart instance with `type` as `bubble` and define `width`, `height`, `dataSource`, and `dataFormat`. Here’s the JavaScript code to achieve that: (more explanation after code)

FusionCharts.ready(function () {
    var firstChart = new FusionCharts({
        type: 'bubble',
        renderAt: 'bubble-chart',
        width: '100%',
        height: '475',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Fertility Rate Vs Life Expectancy",
                "captionFontBold": "0",
                // more chart options
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "50",
                            "x": "50",
                            "showVerticalLine": "1"
                        }
                        // more categories
                    ]
                }
            ],
            "dataset": [
                {
                   "color":"#8CCA7A",
                   "data": [
                        {
                            "x": "48.2",
                            "y": "6.53",
                            "z": "33420000",
                            "name": "Afghanistan"
                        },
                        // more data
                    ]
                }
            ]
        }
    });
    firstChart.render(); // render method
});

In step-1, I covered the explanation for `categories` and `dataset`. Below is explanation for other things we are doing in the code:

Through `FusionCharts` constructor we created an instance for chart in the `firstChart` variable. Every chart on your page should have a unique variable.
Next we define chart `type` as `bubble` chart. Each chart has its own unique alias (or name). Our bubble chart has 100% width (will occupy full container width) and height of 475px.
`dataFormat` will be JSON as we are using JSON data. `dataSource` will have all the chart data and its cosmetics options.
As the last step, we call the render method on chart variable to render the chart.

If you didn’t mess up anywhere in the code, you should have a beautiful bubble chart with you. If not, don’t worry, and head over to the JSFiddle demo I created for this tutorial to understand where you went wrong.

Enhancing Design

You will find certain configuration options in my code (inside `chart` object) that I did not discuss above. All of those configurations are called chart attributes. They are there to enhance the look and feel of a chart.

There are literally hundreds of attributes to customize the design of your chart. Just go to chart attributes page and type the name of the chart you want to customize. It will show you all the things that can be adjusted.

Here is the page that contains all the attributes for bubble charts: http://www.fusioncharts.com/dev/chart-attributes.html?chart=bubble

More Resources

For exploring further, check out these resources:

Official documentation: check out the Developer Center if you ever get stuck or want to learn more about data visualization with FusionCharts.
Wrappers and plugins: If vanilla JavaScript is not part of your tech stack, you can try various plugins and wrappers available for technologies like AngularJS, jQuery, & PHP etc.

Hope you found my tutorial useful! If you have any questions, feel free to say hi on Twitter :)

Bio: Rohit is currently a software engineer at Adobe. He loves developing cool things and writing for the web. When not writing code, you will find him either practicing Yoga, or talking about it. He is always up for a quick chat on Twitter.

Related: