A Tutorial on Drill-down FusionCharts in jQuery
Visualizing Data Makes It Easier To Read
When dealing with data analysis, most companies rely on MS Excel or Google Sheets. While those are powerful tools, it’s difficult to notice trends, much less make any sense out of large rows of spreadsheet data. Dealing with data presented this way isn’t very interesting, but once you add visualization to that data, things become easier to manage, and that’s the topic of today’s tutorial – making interactive charts using jQuery.
I will use FusionCharts’ JavaScript chart library for this project as it offers a large library of 90+ charts, is compatible with every browser, and is pretty easy to work with. It also offers a dedicated plugin for jQuery that will make our job easier.
I will start by making a basic chart using FusionCharts’ core JavaScript library and its jQuery charts plugin, then I will add the drill-down capability to it. Drill-down allows you to go from one chart to another by clicking on a data plot.
The term ‘data plot’ is contextual; it refers to a column in a column chart, lines in a line chart, pie slices in a pie chart. By clicking on a data plot from the parent chart, you are presented with a child chart, showing the relative data one level deeper.
Understanding FusionCharts
Before we start the tutorial, let’s cover the basic anatomy of FusionCharts. Every chart is composed of these key elements:
Caption: The title on the chart. It explains what is being charted.
Sub-caption: The text beneath the caption specifying additional chart information, oftentimes it states a timeframe from which the data was collected.
Legend: This displays a symbol for each data plot on the chart. A particular plot can be enabled or disabled by clicking on its respective legend icon.
Data plot: These are data representations on the chart. A data plot can be a column in a column chart, lines in a line chart, or pie slices in a pie chart.
Tooltip: Text that appears when you hover over a data plot, used to convey additional information about that particular data plot.Making a Drill-down Chart
Before we start, here’s a screenshot of the chart we will be making in this tutorial. You can see the JSFiddle here or access the full source code of the project on my GitHub repo.
Step 1: Including JavaScript Files and Creating the Chart Container
First, we need to include all the JS files that our project is dependent on by using the <script> tag. If the page does not already exist, please create a blank HTML doc and include below files in the <head> section. Now we need the following four files:
Minified jQuery
FusionCharts’ main JS library (include both fusioncharts.js and fusioncharts.charts.js)
FusionCharts’ jQuery plugin
Our <head> section will now look like this:<!– jQuery –>
<script type=”text/javascript” src=”jquery.min.js”></script><!– FusionCharts JS file –>
<script type=”text/javascript” src=”js/fusioncharts.js”></script>
<script type=”text/javascript” src=”js/fusioncharts.charts.js”></script><!– jQuery charts plugin –>
<script type=”text/javascript” src=”js/jquery-plugin.js”></script><!– custom theme file (optional) –>
<script type=”text/javascript” src=”js/toptal.js”></script>
Now that we have all the dependencies included, it’s time to create the container <div> for the chart and embed it in our page with the following HTML code:<div id=”drill-down-chart”>drill-down chart will load here</div>
Now, we can select it using jQuery’s $ selector inside the code:$(“#drill-down-chart”)
Note: If you have more than one chart on your page, you will need a separate container for each chart with a unique id.Step 2: Getting and Structuring Data
FusionCharts accepts data in both JSON and XML formats, but I’ve chosen to use JSON as it’s become the standard format for data exchange across web apps. The JSON data array for a basic chart contains an object for each data plot, and inside each data plot object we define its respective label and value. That structure looks like:
“data”: [{
“label”: “Q1”,
“value”: “850000”,
}, {
“label”: “Q2”,
“value”: “2070000”,
},…
// more data objects ]
As we plot our drill-down chart, its JSON gets more complex. The link between parent and child charts requires one more key-value pair inside each object of data array. The new key (unsurprisingly, called link) will contain the id of the child chart that you will get when its parent data plot is clicked. The format for defining the child chart id is newchart-dataFormat-childId. Since we’re using JSON, we know that whatever we link will look like newchart-json-childId. Here is how we define it for our chart:“data”: [{
“label”: “Q1”,
“value”: “850000”,
“link”: “newchart-json-q1”
}, {
“label”: “Q2”,
“value”: “2070000”,
“link”: “newchart-json-q2”
}, …
// more data objects]
Step 3: Inserting Chart DataOnce you have the data ready, it’s time to insert the chart on your page using the insertFusionCharts method provided by the jQuery plugin:
$(“#drill-down-chart”).insertFusionCharts({
type: ‘column2d’,
id: “mychart”,
width: ‘100%’,
height: ‘450’,
dataFormat: ‘json’,
dataSource: {
“chart”: {
“caption”: “Quarterly Revenue for 2015”,
“paletteColors”: “#9EA5FC”,
“xAxisName”: “Quarter (Click to drill down)”,
“yAxisName”: “Revenue (In USD)”,
// more chart configuration options
},“data”: [
// see step-2 for explanation
],“linkedData”: [
// explained in step-4
]
}
})
Let’s break down the above code snippet: