Creating Drill-Down Charts With FusionCharts

Gagan Sikri
8y
7.6k
0
3

Article

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 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 new page.
b. Open link in same page.
c. Open link in frame.
d. Open link in a pop-up window.
e. Create chart as 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.

Simple Links

Same Page:

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

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

The following is the code to create simple-links in 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 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 in 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 new page, we follow the same process as above, but instead of 'link', we use "P-(pop-up detail)-link". Details contain information like name of pop-up window, size, scroll-options, etc. You can see more details on this documentation page.

Demo: To see Simple-Link with 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 to make whole chart area to act like a hotspot and set links to it redirecting to a URL either in same page or in a new page. Chart can be made hotspot by adding "clickURL" attribute in chart object of chart. By default it loads URL in same page. To enable redirection to new page we have to add prefix "n-" to the link value.

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

The following is the code to create simple links making whole chart as 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, parent chart is house for data with respect to every child 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 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:

PS:

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!

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all