You are viewing documentation for an older version. For current documentation - click here.

All charts in the FusionCharts XT 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, the 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 XT, you can create endless levels of drill-down. It has been kept very generic to accommodate all types of requirements.

Using Simple Links

Using Simple links, you can 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:


Creating simple links using XML

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.

Creating links using JSON

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"  }
  ]
}

Using LinkedCharts

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.