All charts in the FusionCharts v3 pack (barring zoom-line chart) support drill-down functionality.  This means that you can convert individual data plots (columns in column chart, pie slices in pie chart etc) or the whole chart into hotspots (or links). These items, when clicked, can open URLs, call JavaScript functions or load LinkedCharts.

Broadly, drill-down feature can be divided into two types:

1. Simple links : Drill-down to open simple URLs or call JavaScript functions (present on same page)
2. Chart links (LinkedCharts): Drill-down to detailed LinkedCharts

Using FusionCharts, you can create endless levels of drill-down. It has been kept very generic to accommodate all types of requirements.

Using Simple links, you provide a Url for the linked page (or JavaScript function) for each data item on chart (columns, line anchors, area anchors, pie slices etc.). Simple links can be in various formats:

• Simple links that open Url in the same page
• Simple links that open Url in a new browser window
• Links that open Url in a specified frame/iframe
• Links that open Url in a new pop-up window
• Links that invoke JavaScript functions (present either in FusionCharts JavaScript class or on the same web page)
• Set the whole chart as a hot-spot and apply any of the above simple-link features

You can convert a data plot into a link simply by introducing the link attribute into the <set> element. Here is an example:

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
  <set label='Jan' value='17400' link='DemoLinkPages/DemoLink1.html'/> <!-- Simple Link -->
  <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/> <!-- Link in new window -->
  <set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/> <!-- Link in a frame -->
  <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
    scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <!-- Link in a pop-up -->
  <set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/> <!-- JavaScript function as link -->
</chart>

The links defined in the XML exemplify all the simple link types like simple URL, Url in new page, frame, popup, and JavaScript.

Similarly if you are using JSON data instead of XML, you must add the link property to the data object in the following way:

{
  "chart":{
    "caption":"Monthly Sales Summary",
    "subcaption":"For the year 2006",
    "xaxisname":"Month",
    "yaxisname":"Sales",
    "numberprefix":"$"
  },
  "data":[
    { "label":"Jan", "value":"17400", "link":"DemoLinkPages/DemoLink1.html" },
    { "label":"Feb", "value":"19800", "link":"n-DemoLinkPages/DemoLink2.html" },
    { "label":"Mar", "value":"21800", "link":"F-detailsFrame-DemoLinkPages/DemoLink3.htm" },
    { "label":"Apr", "value":"23800", "link":"P-detailsPopUp,width=400,height=300,toolbar=no," +
         "scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html" },
    { "label":"May", "value":"29600", "link":"j-myJavaScriptFunction-parameters"  }
  ]
}

This is an easy way of building drill-down charts, where detailed charts can be made to replace the parent chart or, open up in a separate dialog. The feature also allows configuration of drill-down charts from a single data source. The process has been explained in detail in next page.