Adding HTML5 Charts to Your Website

Data visualization is a hot topic nowadays. Just look at the Google Trends graph below to understand its steady rise in popularity over the years.

As the data that we have with us increases, so does the need to make sense of it. And what better way to do it than visualizing it? Plotting a chart from the raw data let you see patterns that were never visible before. So, if you design or build websites then sooner or later you are going to feel the need to have interactive charts on your website. And that’s the reason I decided to write a detailed tutorial on this topic.

For this tutorial I am going to use FusionCharts™ JavaScript charts library. Although the package offers more than 90 different chart types, there is a unique pattern that is followed across the charts. If you understand that pattern, you can make any chart for your website. I am going to pick 2 charts from different sub-categories to explain the process. Even if you have never made any chart before, you will be able to follow this step-by-step tutorial to make some stunning charts today.

One quick note before we dive in: don’t worry if you don’t follow everything in this article. I have included live samples with full source code for both the examples I use (and one extra for practice at the end). So you can browse through those to have a better understanding.

Now, without further ado, let’s get started!

5 Steps to Making a Chart in HTML5

Like with everything else in life, there’s a set process behind creating HTML5 charts. To make it easier to digest, I have divided the complete process into 5 steps:

• Step 1 – Preparing the data
• Step 2 – Including JavaScript files
• Step 3 – Creating a chart container
• Step 4 – Creating chart instance and rendering the chart
• Step 5 – Customising the design

You can make any chart with FusionCharts if you follow above 5 steps. Now I am going to take an example of simple column chart to explain all the steps in detail. This is what we are going to make (live version here):

Note: Before you start reading below tutorial make sure you have downloaded FusionCharts trial license (commercial use) or personal license (non-commercial use).

Step 1 – Preparing the Data

We can use data in either JSON or XML format. For this demo I am going to use JSON as it has become the default format in web apps. FusionCharts accepts JSON data as an array of objects containing label and value.

Suppose you have data in two columns. Then content in the first column will become “label”and content in the second column will become value. This is how the first two objects inside the data array will look like:

[{
    “label”: “January”,
    “value”: “420000”
}, {
    “label”: “February”,
    “value”: “810000”
}...]

Thats all the formatting we need to plot a column chart. In fact this is good enough for many chart types. If you are unsure about the data format required for a chart, search for that particular chart in the charts gallery. Here you have live samples of 800+ charts. Find what you need and see the formatting required.

Step 2 – Including JavaScript Files

Once you have the data ready, its time to include all the JavaScript dependencies. For a column chart we just need the core library – fusioncharts.js. For other charts there are other files that are required, but fusioncharts.js will take care of those for you.

fusioncharts.js will go inside HTML using