JavaScript

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 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: 
  1. 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.
      
  2. 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:
  1. <html>  
  2. <head>  
  3. <title>FusionCharts - Creating Simple Links</title>  
  4. <script type="text/javascript" src="fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts.charts.js"></script>  
  6. <!-- Location of JavaScript files depends upon user -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function() {  
  9.    var simpleLinkChart=new FusionCharts({  
  10.        type: 'column2d',  
  11.         renderAt: 'chart-container',  
  12.         width: '650',  
  13.         height: '450',  
  14.         dataFormat: 'json',  
  15.         dataSource: {  
  16.             "chart": {  
  17.                 "caption": "Monthly revenue for 2015",  
  18.                 "subCaption": "Sam's SuperMart",  
  19.                 "xAxisName": "Month",  
  20.                 "yAxisName": "Revenues (In USD)",  
  21.                 "numberPrefix": "$",  
  22.                 "paletteColors": "#0075c2",  
  23.                 "bgColor": "#ffffff",  
  24.                 "borderAlpha": "20",  
  25.                 "canvasBorderAlpha": "0",  
  26.                 "usePlotGradientColor": "0",  
  27.                 "plotBorderAlpha": "10",  
  28.                 "placevaluesInside": "1",  
  29.                 "rotatevalues": "1",  
  30.                 "valueFontColor": "#ffffff",                  
  31.                 "showXAxisLine": "1",  
  32.                 "xAxisLineColor": "#999999",  
  33.                 "divlineColor": "#999999",                 
  34.                 "divLineIsDashed": "1",  
  35.                 "showAlternateHGridColor": "0",  
  36.                 "subcaptionFontBold": "0",  
  37.                 "subcaptionFontSize": "14"  
  38.             },              
  39.             "data": [  
  40.                 {  
  41.                     "label": "Jan",  
  42.                     "value": "520000",  
  43.                     //custom link: opens in same page  
  44.                     "link": "http://gagansikri.in"  
  45.                 },   
  46.                 {  
  47.                     "label": "Feb",  
  48.                     "value": "710000",  
  49.                     "link": "http://c-sharpcorner.com"  
  50.                 },   
  51.                 {  
  52.                     "label": "Mar",  
  53.                     "value": "780000",  
  54.                     "link": "http://fusioncharts.com"  
  55.                 },   
  56.                 {  
  57.                     "label": "Apr",  
  58.                     "value": "650000",  
  59.                     "link": "http://docs.fusioncharts.com"  
  60.                 },   
  61.                 {  
  62.                     "label": "May",  
  63.                     "value": "930000",  
  64.                     "link": "http://www.fusioncharts.com/javascript-chart-fiddles/"  
  65.                 },   
  66.                 {  
  67.                     "label": "Jun",  
  68.                     "value": "530000",  
  69.                     "link": "http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html#defining-simple-links-that-open-in-the-same-page"  
  70.                 },   
  71.                 {  
  72.                     "label": "Jul",  
  73.                     "value": "920000",  
  74.                     "link": "http://c-sharpcorner.com/members/gagan-sikri"  
  75.                 },   
  76.                 {  
  77.                     "label": "Aug",  
  78.                     "value": "580000",  
  79.                     "link": "http://fusioncharts.com"  
  80.                 },   
  81.                 {  
  82.                     "label": "Sep",  
  83.                     "value": "820000",  
  84.                     "link": "http://twitter.com/sikrigagan"  
  85.                 },   
  86.                 {  
  87.                     "label": "Oct",  
  88.                     "value": "510000",  
  89.                     "link": "http://gagansikri.in"  
  90.                 },   
  91.                 {  
  92.                     "label": "Nov",  
  93.                     "value": "730000",  
  94.                     "link": "http://docs.fusioncharts.com"  
  95.                 },   
  96.                 {  
  97.                     "label": "Dec",  
  98.                     "value": "620000",  
  99.                     "link": "http://fusioncharts.com"  
  100.                 }  
  101.             ]  
  102.         }  
  103.    }).render();   
  104. });  
  105. </script>  
  106. </head>  
  107. <body>  
  108. <div id="chart-container">Awesome Chart on its way!</div>  
  109. </body>  
  110. </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:
  1. <html>  
  2. <head>  
  3. <title>FusionCharts - Creating Simple Links: New Page</title>  
  4. <script type="text/javascript" src="fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts.charts.js"></script>  
  6. <!-- Location of JavaScript files depends upon user -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function() {  
  9.    var simpleLinkChart=new FusionCharts({  
  10.        type: 'column2d',  
  11.         renderAt: 'chart-container',  
  12.         width: '650',  
  13.         height: '450',  
  14.         dataFormat: 'json',  
  15.         dataSource: {  
  16.             "chart": {  
  17.                 "caption": "Monthly revenue for 2015",  
  18.                 "subCaption": "Tom's SuperMart",  
  19.                 "xAxisName": "Month",  
  20.                 "yAxisName": "Revenues (In USD)",  
  21.                 "numberPrefix": "$",  
  22.                 "paletteColors": "#0075c2",  
  23.                 "bgColor": "#ffffff",  
  24.                 "borderAlpha": "20",  
  25.                 "canvasBorderAlpha": "0",  
  26.                 "usePlotGradientColor": "0",  
  27.                 "plotBorderAlpha": "10",  
  28.                 "placevaluesInside": "1",  
  29.                 "rotatevalues": "1",  
  30.                 "valueFontColor": "#ffffff",                  
  31.                 "showXAxisLine": "1",  
  32.                 "xAxisLineColor": "#999999",  
  33.                 "divlineColor": "#999999",                 
  34.                 "divLineIsDashed": "1",  
  35.                 "showAlternateHGridColor": "0",  
  36.                 "subcaptionFontBold": "0",  
  37.                 "subcaptionFontSize": "14"  
  38.             },              
  39.             "data": [  
  40.                 {  
  41.                     "label": "Jan",  
  42.                     "value": "520000",  
  43.                     //custom link: opens in new page  
  44.                     "link": "n-http://gagansikri.in"  
  45.                 },   
  46.                 {  
  47.                     "label": "Feb",  
  48.                     "value": "710000",  
  49.                     "link": "n-http://c-sharpcorner.com"  
  50.                 },   
  51.                 {  
  52.                     "label": "Mar",  
  53.                     "value": "780000",  
  54.                     "link": "n-http://fusioncharts.com"  
  55.                 },   
  56.                 {  
  57.                     "label": "Apr",  
  58.                     "value": "650000",  
  59.                     "link": "n-http://docs.fusioncharts.com"  
  60.                 },   
  61.                 {  
  62.                     "label": "May",  
  63.                     "value": "930000",  
  64.                     "link": "n-http://www.fusioncharts.com/javascript-chart-fiddles/"  
  65.                 },   
  66.                 {  
  67.                     "label": "Jun",  
  68.                     "value": "530000",  
  69.                     "link": "n-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"  
  70.                 },   
  71.                 {  
  72.                     "label": "Jul",  
  73.                     "value": "920000",  
  74.                     "link": "n-http://c-sharpcorner.com/members/gagan-sikri"  
  75.                 },   
  76.                 {  
  77.                     "label": "Aug",  
  78.                     "value": "580000",  
  79.                     "link": "n-http://fusioncharts.com"  
  80.                 },   
  81.                 {  
  82.                     "label": "Sep",  
  83.                     "value": "820000",  
  84.                     "link": "n-http://twitter.com/sikrigagan"  
  85.                 },   
  86.                 {  
  87.                     "label": "Oct",  
  88.                     "value": "510000",  
  89.                     "link": "n-http://gagansikri.in"  
  90.                 },   
  91.                 {  
  92.                     "label": "Nov",  
  93.                     "value": "730000",  
  94.                     "link": "n-http://docs.fusioncharts.com"  
  95.                 },   
  96.                 {  
  97.                     "label": "Dec",  
  98.                     "value": "620000",  
  99.                     "link": "n-http://fusioncharts.com"  
  100.                 }  
  101.             ]  
  102.         }  
  103.    }).render();   
  104. });  
  105. </script>  
  106. </head>  
  107. <body>  
  108. <div id="chart-container">Awesome Chart on its way!</div>  
  109. </body>  
  110. </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:
  1. <html>  
  2. <head>  
  3. <title>FusionCharts - Creating Simple Links: Pop-up Window</title>  
  4. <script type="text/javascript" src="fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts.charts.js"></script>  
  6. <!-- Location of JavaScript files depends upon user -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function() {  
  9.    var simpleLinkChart=new FusionCharts({  
  10.        type: 'column2d',  
  11.         renderAt: 'chart-container',  
  12.         width: '650',  
  13.         height: '450',  
  14.         dataFormat: 'json',  
  15.         dataSource: {  
  16.             "chart": {  
  17.                 "caption": "Monthly revenue for 2015",  
  18.                 "subCaption": "Hardy's SuperMart",  
  19.                 "xAxisName": "Month",  
  20.                 "yAxisName": "Revenues (In USD)",  
  21.                 "numberPrefix": "$",  
  22.                 "paletteColors": "#0075c2",  
  23.                 "bgColor": "#ffffff",  
  24.                 "borderAlpha": "20",  
  25.                 "canvasBorderAlpha": "0",  
  26.                 "usePlotGradientColor": "0",  
  27.                 "plotBorderAlpha": "10",  
  28.                 "placevaluesInside": "1",  
  29.                 "rotatevalues": "1",  
  30.                 "valueFontColor": "#ffffff",                  
  31.                 "showXAxisLine": "1",  
  32.                 "xAxisLineColor": "#999999",  
  33.                 "divlineColor": "#999999",                 
  34.                 "divLineIsDashed": "1",  
  35.                 "showAlternateHGridColor": "0",  
  36.                 "subcaptionFontBold": "0",  
  37.                 "subcaptionFontSize": "14"  
  38.             },              
  39.             "data": [  
  40.                 {  
  41.                     "label": "Jan",  
  42.                     "value": "520000",  
  43.                     //custom link: opens in new page  
  44.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://gagansikri.in"  
  45.                 },   
  46.                 {  
  47.                     "label": "Feb",  
  48.                     "value": "710000",  
  49.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://c-sharpcorner.com"  
  50.                 },   
  51.                 {  
  52.                     "label": "Mar",  
  53.                     "value": "780000",  
  54.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"  
  55.                 },   
  56.                 {  
  57.                     "label": "Apr",  
  58.                     "value": "650000",  
  59.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://docs.fusioncharts.com"  
  60.                 },   
  61.                 {  
  62.                     "label": "May",  
  63.                     "value": "930000",  
  64.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://www.fusioncharts.com/javascript-chart-fiddles/"  
  65.                 },   
  66.                 {  
  67.                     "label": "Jun",  
  68.                     "value": "530000",  
  69.                     "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"  
  70.                 },   
  71.                 {  
  72.                     "label": "Jul",  
  73.                     "value": "920000",  
  74.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://c-sharpcorner.com/members/gagan-sikri"  
  75.                 },   
  76.                 {  
  77.                     "label": "Aug",  
  78.                     "value": "580000",  
  79.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"  
  80.                 },   
  81.                 {  
  82.                     "label": "Sep",  
  83.                     "value": "820000",  
  84.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://twitter.com/sikrigagan"  
  85.                 },   
  86.                 {  
  87.                     "label": "Oct",  
  88.                     "value": "510000",  
  89.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://gagansikri.in"  
  90.                 },   
  91.                 {  
  92.                     "label": "Nov",  
  93.                     "value": "730000",  
  94.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://docs.fusioncharts.com"  
  95.                 },   
  96.                 {  
  97.                     "label": "Dec",  
  98.                     "value": "620000",  
  99.                     "link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"  
  100.                 }  
  101.             ]  
  102.         }  
  103.    }).render();   
  104. });  
  105. </script>  
  106. </head>  
  107. <body>  
  108. <div id="chart-container">Awesome Chart on its way!</div>  
  109. </body>  
  110. </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:
  1. <html>  
  2. <head>  
  3. <title>FusionCharts - Creating Simple Links: Frame</title>  
  4. <script type="text/javascript" src="fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts.charts.js"></script>  
  6. <!-- Location of JavaScript files depends upon user -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function() {  
  9.    var simpleLinkChart=new FusionCharts({  
  10.        type: 'column2d',  
  11.         renderAt: 'chart-container',  
  12.         width: '650',  
  13.         height: '450',  
  14.         dataFormat: 'json',  
  15.         dataSource: {  
  16.             "chart": {  
  17.                 "caption": "Monthly revenue for 2015",  
  18.                 "subCaption": "Mark's SuperMart",  
  19.                 "xAxisName": "Month",  
  20.                 "yAxisName": "Revenues (In USD)",  
  21.                 "numberPrefix": "$",  
  22.                 "paletteColors": "#0075c2",  
  23.                 "bgColor": "#ffffff",  
  24.                 "borderAlpha": "20",  
  25.                 "canvasBorderAlpha": "0",  
  26.                 "usePlotGradientColor": "0",  
  27.                 "plotBorderAlpha": "10",  
  28.                 "placevaluesInside": "1",  
  29.                 "rotatevalues": "1",  
  30.                 "valueFontColor": "#ffffff",                  
  31.                 "showXAxisLine": "1",  
  32.                 "xAxisLineColor": "#999999",  
  33.                 "divlineColor": "#999999",                 
  34.                 "divLineIsDashed": "1",  
  35.                 "showAlternateHGridColor": "0",  
  36.                 "subcaptionFontBold": "0",  
  37.                 "subcaptionFontSize": "14"  
  38.             },              
  39.             "data": [  
  40.                 {  
  41.                     "label": "Jan",  
  42.                     "value": "520000",  
  43.                     //custom link: opens in new page  
  44.                     "link": "F-drill-http://gagansikri.in"  
  45.                 },   
  46.                 {  
  47.                     "label": "Feb",  
  48.                     "value": "710000",  
  49.                     "link": "F-drill-http://c-sharpcorner.com"  
  50.                 },   
  51.                 {  
  52.                     "label": "Mar",  
  53.                     "value": "780000",  
  54.                     "link": "F-drill-http://fusioncharts.com"  
  55.                 },   
  56.                 {  
  57.                     "label": "Apr",  
  58.                     "value": "650000",  
  59.                     "link": "F-drill-http://docs.fusioncharts.com"  
  60.                 },   
  61.                 {  
  62.                     "label": "May",  
  63.                     "value": "930000",  
  64.                     "link": "F-drill-http://www.fusioncharts.com/javascript-chart-fiddles/"  
  65.                 },   
  66.                 {  
  67.                     "label": "Jun",  
  68.                     "value": "530000",  
  69.                     "link": "F-drill-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"  
  70.                 },   
  71.                 {  
  72.                     "label": "Jul",  
  73.                     "value": "920000",  
  74.                     "link": "F-drill-http://c-sharpcorner.com/members/gagan-sikri"  
  75.                 },   
  76.                 {  
  77.                     "label": "Aug",  
  78.                     "value": "580000",  
  79.                     "link": "F-drill-http://fusioncharts.com"  
  80.                 },   
  81.                 {  
  82.                     "label": "Sep",  
  83.                     "value": "820000",  
  84.                     "link": "F-drill-http://twitter.com/sikrigagan"  
  85.                 },   
  86.                 {  
  87.                     "label": "Oct",  
  88.                     "value": "510000",  
  89.                     "link": "F-drill-http://gagansikri.in"  
  90.                 },   
  91.                 {  
  92.                     "label": "Nov",  
  93.                     "value": "730000",  
  94.                     "link": "F-drill-http://docs.fusioncharts.com"  
  95.                 },   
  96.                 {  
  97.                     "label": "Dec",  
  98.                     "value": "620000",  
  99.                     "link": "F-drill-http://fusioncharts.com"  
  100.                 }  
  101.             ]  
  102.         }  
  103.    }).render();   
  104. });  
  105. </script>  
  106. </head>  
  107. <body>  
  108. <div id="chart-container">Awesome Chart on its way!</div>  
  109. </body>  
  110. </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:
  1. <html>  
  2. <head>  
  3. <title>FusionCharts - Creating Simple Links: Hotspot</title>  
  4. <script type="text/javascript" src="fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts.charts.js"></script>  
  6. <!-- Location of JavaScript files depends upon user -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function() {  
  9.    var simpleLinkChart=new FusionCharts({  
  10.        type: 'column2d',  
  11.         renderAt: 'chart-container',  
  12.         width: '650',  
  13.         height: '450',  
  14.         dataFormat: 'json',  
  15.         dataSource: {  
  16.             "chart": {  
  17.                 "caption": "Monthly revenue for 2015",  
  18.                 "subCaption": "Dean's SuperMart",  
  19.                 "xAxisName": "Month",  
  20.                 "yAxisName": "Revenues (In USD)",  
  21.                 "numberPrefix": "$",  
  22.                 "paletteColors": "#0075c2",  
  23.                 "bgColor": "#ffffff",  
  24.                 "borderAlpha": "20",  
  25.                 "canvasBorderAlpha": "0",  
  26.                 "usePlotGradientColor": "0",  
  27.                 "plotBorderAlpha": "10",  
  28.                 "placevaluesInside": "1",  
  29.                 "rotatevalues": "1",  
  30.                 "valueFontColor": "#ffffff",                  
  31.                 "showXAxisLine": "1",  
  32.                 "xAxisLineColor": "#999999",  
  33.                 "divlineColor": "#999999",                 
  34.                 "divLineIsDashed": "1",  
  35.                 "showAlternateHGridColor": "0",  
  36.                 "subcaptionFontBold": "0",  
  37.                 "subcaptionFontSize": "14",  
  38.               //adding ClickURL: to make chart a hotspot  
  39.               "clickURL": "n-http://gagansikri.in"  
  40.             },              
  41.             "data": [  
  42.                 {  
  43.                     "label": "Jan",  
  44.                     "value": "520000"  
  45.                 },   
  46.                 {  
  47.                     "label": "Feb",  
  48.                     "value": "710000"  
  49.                 },   
  50.                 {  
  51.                     "label": "Mar",  
  52.                     "value": "780000"  
  53.                 },   
  54.                 {  
  55.                     "label": "Apr",  
  56.                     "value": "650000"  
  57.                 },   
  58.                 {  
  59.                     "label": "May",  
  60.                     "value": "930000"  
  61.                 },   
  62.                 {  
  63.                     "label": "Jun",  
  64.                     "value": "530000"  
  65.                 },   
  66.                 {  
  67.                     "label": "Jul",  
  68.                     "value": "920000"  
  69.                 },   
  70.                 {  
  71.                     "label": "Aug",  
  72.                     "value": "580000"  
  73.                 },   
  74.                 {  
  75.                     "label": "Sep",  
  76.                     "value": "820000"  
  77.                 },   
  78.                 {  
  79.                     "label": "Oct",  
  80.                     "value": "510000"  
  81.                 },   
  82.                 {  
  83.                     "label": "Nov",  
  84.                     "value": "730000"  
  85.                 },   
  86.                 {  
  87.                     "label": "Dec",  
  88.                     "value": "620000"  
  89.                 }  
  90.             ]  
  91.         }  
  92.    }).render();   
  93. });  
  94. </script>  
  95. </head>  
  96. <body>  
  97. <div id="chart-container">Awesome Chart on its way!</div>  
  98. </body>  
  99. </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: 
  1. Gather Parent Data: It is data in JSON or XML for parent chart.
  2. 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:
  1. <html>  
  2. <head>  
  3. <title>FusionCharts - Creating Simple Links: Frame</title>  
  4. <script type="text/javascript" src="fusioncharts.js"></script>  
  5. <script type="text/javascript" src="fusioncharts.charts.js"></script>  
  6. <!-- Location of JavaScript files depends upon user -->  
  7. <script type="text/javascript">  
  8. FusionCharts.ready(function() {  
  9.    var simpleLinkChart=new FusionCharts({  
  10.        type: 'column2d',  
  11.         renderAt: 'chart-container',  
  12.         width: '650',  
  13.         height: '450',  
  14.         dataFormat: 'json',  
  15.         dataSource: {  
  16.             "chart": {  
  17.                 "caption": "Monthly revenue for 2015",  
  18.                 "subCaption": "Mark's SuperMart",  
  19.                 "xAxisName": "Month",  
  20.                 "yAxisName": "Revenues (In USD)",  
  21.                 "numberPrefix": "$",  
  22.                 "paletteColors": "#0075c2",  
  23.                 "bgColor": "#ffffff",  
  24.                 "borderAlpha": "20",  
  25.                 "canvasBorderAlpha": "0",  
  26.                 "usePlotGradientColor": "0",  
  27.                 "plotBorderAlpha": "10",  
  28.                 "placevaluesInside": "1",  
  29.                 "rotatevalues": "1",  
  30.                 "valueFontColor": "#ffffff",                  
  31.                 "showXAxisLine": "1",  
  32.                 "xAxisLineColor": "#999999",  
  33.                 "divlineColor": "#999999",                 
  34.                 "divLineIsDashed": "1",  
  35.                 "showAlternateHGridColor": "0",  
  36.                 "subcaptionFontBold": "0",  
  37.                 "subcaptionFontSize": "14"  
  38.             },              
  39.             "data": [  
  40.                 {  
  41.                     "label": "Jan",  
  42.                     "value": "520000",  
  43.                     //custom link: opens in new page  
  44.                     "link": "F-drill-http://gagansikri.in"  
  45.                 },   
  46.                 {  
  47.                     "label": "Feb",  
  48.                     "value": "710000",  
  49.                     "link": "F-drill-http://c-sharpcorner.com"  
  50.                 },   
  51.                 {  
  52.                     "label": "Mar",  
  53.                     "value": "780000",  
  54.                     "link": "F-drill-http://fusioncharts.com"  
  55.                 },   
  56.                 {  
  57.                     "label": "Apr",  
  58.                     "value": "650000",  
  59.                     "link": "F-drill-http://docs.fusioncharts.com"  
  60.                 },   
  61.                 {  
  62.                     "label": "May",  
  63.                     "value": "930000",  
  64.                     "link": "F-drill-http://www.fusioncharts.com/javascript-chart-fiddles/"  
  65.                 },   
  66.                 {  
  67.                     "label": "Jun",  
  68.                     "value": "530000",  
  69.                     "link": "F-drill-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"  
  70.                 },   
  71.                 {  
  72.                     "label": "Jul",  
  73.                     "value": "920000",  
  74.                     "link": "F-drill-http://c-sharpcorner.com/members/gagan-sikri"  
  75.                 },   
  76.                 {  
  77.                     "label": "Aug",  
  78.                     "value": "580000",  
  79.                     "link": "F-drill-http://fusioncharts.com"  
  80.                 },   
  81.                 {  
  82.                     "label": "Sep",  
  83.                     "value": "820000",  
  84.                     "link": "F-drill-http://twitter.com/sikrigagan"  
  85.                 },   
  86.                 {  
  87.                     "label": "Oct",  
  88.                     "value": "510000",  
  89.                     "link": "F-drill-http://gagansikri.in"  
  90.                 },   
  91.                 {  
  92.                     "label": "Nov",  
  93.                     "value": "730000",  
  94.                     "link": "F-drill-http://docs.fusioncharts.com"  
  95.                 },   
  96.                 {  
  97.                     "label": "Dec",  
  98.                     "value": "620000",  
  99.                     "link": "F-drill-http://fusioncharts.com"  
  100.                 }  
  101.             ]  
  102.         }  
  103.    }).render();   
  104. });  
  105. </script>  
  106. </head>  
  107. <body>  
  108. <div id="chart-container">Awesome Chart on its way!</div>  
  109. </body>  
  110. </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
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs