Creating Drill-Down Charts With FusionCharts

Introduction

When it comes to charts, people view or create charts because they want to see a bigger picture, explore data in-depth, and reach a decision or conclusion. FusionCharts JavaScript charts package supports drill-down charts and allows them to create endless levels to drill-down making drill-down charting a more generic solution for complex problems.

FusionCharts supports 2 types of drill-down:

Simple Links- This type of drill-down allows to open simple URLs or to invoke JavaScript functions constituting the following scenarios:

a. Open link in a new page.
b. Open link in the same page.
c. Open link in the frame.

d. Open link in a pop-up window.

e. Create a chart as a hotspot.
Chart Links- This type of drill-down involves moving to a linked-chart on a click i.e. next level of data when somebody clicks on a data-plot on parent chart.

Same Page

To create drill-down which opens a link on the same page, all we have to do is add a "link" attribute along with data array. This attribute belongs to the data object and is specific to each data plot.

Demo: Here is a demo on CodePen of simple-links opening on the same page.

The following is the code to create simple-links in the same page:

<html>
<head>
<title>FusionCharts - Creating Simple Links</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Sam's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in same page
"link": "http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html#defining-simple-links-that-open-in-the-same-page"
},
{
"label": "Jul",
"value": "920000",
"link": "http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

New Page

To create drill-down which opens a link in a new page, we follow the same process as above, but instead of 'link', we use "n-link".

Demo- To see CodePen demo of simple-link opening on a new-page.

Here's the code to achieve that:

<html>
<head>
<title>FusionCharts - Creating Simple Links: New Page</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Tom's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in new page
"link": "n-http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "n-http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "n-http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "n-http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "n-http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "n-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"
},
{
"label": "Jul",
"value": "920000",
"link": "n-http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "n-http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "n-http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "n-http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "n-http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "n-http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Pop-up Window

To create drill-down which opens a link in a new page, we follow the same process as above, but instead of 'link', we use "P-(pop-up detail)-link". Details contain information like the name of the pop-up window, size, scroll-options, etc. You can see more details on this documentation page.

Demo- To see Simple-Link with the pop-up window in action visit this CodePen page.

The following is the code required to achieve that:

<html>
<head>
<title>FusionCharts - Creating Simple Links: Pop-up Window</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Hardy's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in new page
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"
},
{
"label": "Jul",
"value": "920000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Frame

To create drill-down which opens a link in new page, we follow the same process as above, but instead of 'link', we use "F-drill-(frame_name(optional))-link". You can see more details on this documentation page.

Demo- To see simple-link with frames in action click here.

The following is the code required to achieve that:

<html>
<head>
<title>FusionCharts - Creating Simple Links: Frame</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Mark's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in new page
"link": "F-drill-http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "F-drill-http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "F-drill-http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "F-drill-http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "F-drill-http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "F-drill-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"
},
{
"label": "Jul",
"value": "920000",
"link": "F-drill-http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "F-drill-http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "F-drill-http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "F-drill-http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "F-drill-http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "F-drill-http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Hotspot

FusionCharts allows making whole chart area to act as a hotspot and set links to it redirecting to a URL either in the same page or on a new page. Chart can be made hotspot by adding the "clickURL" attribute in chart object of the chart. By default, it loads URL on the same page. To enable redirection to the new page we have to add prefix "n-" to the link value.

Demo- Click here to see simple-link with a hotspot in action.

The following is the code to create simple links making the whole chart as a hotspot:

<html>
<head>
<title>FusionCharts - Creating Simple Links: Hotspot</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Dean's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
//adding ClickURL: to make chart a hotspot
"clickURL": "n-http://gagansikri.in"
},
"data": [
{
"label": "Jan",
"value": "520000"
},
{
"label": "Feb",
"value": "710000"
},
{
"label": "Mar",
"value": "780000"
},
{
"label": "Apr",
"value": "650000"
},
{
"label": "May",
"value": "930000"
},
{
"label": "Jun",
"value": "530000"
},
{
"label": "Jul",
"value": "920000"
},
{
"label": "Aug",
"value": "580000"
},
{
"label": "Sep",
"value": "820000"
},
{
"label": "Oct",
"value": "510000"
},
{
"label": "Nov",
"value": "730000"
},
{
"label": "Dec",
"value": "620000"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Chart Links

FusionCharts allows you to create endless levels of drill-down using linked-charts in a single data source. Usually, the parent chart is a house for data with respect to every child's chart. Steps to create a linked chart are as below:

Gather Parent Data- It is data in JSON or XML for parent chart.
Append Data- Add data for all child charts with respect to parent chart using unique data identifiers. (Using "linkedData" object)

Additional properties can be added to the linked chart using FusionCharts API method - configureLink() and through various events.

Demo- To see Linked Chart in action click here. Here's the code to build this:

The following is the code required to achieve that:

<html>
<head>
<title>FusionCharts - Creating Simple Links: Frame</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Mark's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in new page
"link": "F-drill-http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "F-drill-http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "F-drill-http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "F-drill-http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "F-drill-http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "F-drill-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"
},
{
"label": "Jul",
"value": "920000",
"link": "F-drill-http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "F-drill-http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "F-drill-http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "F-drill-http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "F-drill-http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "F-drill-http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>

Conclusion

Drill-down is an important feature in any business dashboard. You can investigate something in more depth by linking relevant charts together using linked-charts.

FusionCharts allows drill-down in both charts and maps. If you want to explore further, you'll find below resources useful:

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!