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)
Now, let’s get started with the tutorial!
Four Steps to Visualize Data
- Step 1: Gathering and structuring data
- 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:
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.
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:
I have given my
<div> container the id bubble-chart. This will be used for identifying the container.
Step-4: Rendering the Chart
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.
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
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.
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.