FusionCharts can be easily and extensively used to create drill-down charts. All the charts (except for Zoom line chart) in FusionCharts v3 suite support drill down for data elements i.e., in each chart type, the data plot of that chart (columns in Column Charts, Pie slices in Pie Charts etc.) can act as hotspots for the chart.

Using the drill down functionality provided by FusionCharts, you can easily produce charts that enact "drill down" or "zoom in (data)" capabilities. Moreover, you can make the whole chart as a hot-spot for drill-down.

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

• Simple links : Drill-down to open simple URLs or call JavaScript functions (present on same page)
• 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 in FusionCharts v3, you can define the following types of links:

• Simple links that open in the same page
• Simple links that open in a new page
• Links that open in a specified frame
• Links that open in a new pop-up window
• Use the whole chart as a hotspot to use the simple link types named above
• Existing JavaScript functions (on the same page) to be invoked as links

We will progressively see each type of drill-down in this page.

Defining links for a chart

To define a simple link for any data plot, just define the link attribute for the <set> element as under:

<set ... value='2235' ... link='ShowDetails.asp%3FMonth%3DJan' ...> 

With the above XML, the data plot (be it column, pie or line/area anchor), when clicked, will take to the page ShowDetails.asp?Month=Jan, which might contain another chart to show detailed results for the month of January.

As you will note, the above link has been Url Encoded. FusionCharts expects all the links in Url Encoded format, if you have characters special characters (like ?,&, etc.) in your link. When the user clicks on the link, FusionCharts decodes it and invokes ShowDetails.asp?Month=Jan.

All the server side scripting languages provide a generic function to Url Encode any string - like in ASP and ASP.NET, we've Server.URLEncode(strURL) and so on.

XML 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'/> 
      <set label='Feb' value='19800' link='DemoLinkPages/DemoLink2.html'/> 
      <set label='Mar' value='21800' link='DemoLinkPages/DemoLink3.html'/> 
      <set label='Apr' value='23800' link='DemoLinkPages/DemoLink4.html'/> 
      <set label='May' value='29600' link='DemoLinkPages/DemoLink5.html'/> 
      <set label='Jun' value='27600' link='DemoLinkPages/DemoLink6.html'/> 
      </chart>

See it here!

« Back to top

Opening Links in New Window

Quite often, you might want to open the drill-down link in a new window instead of the same window. To have a link open in a new window, all you need to do is, add n- before any link. E.g.,

<set ... value='2235' ... link='n-ShowDetails.asp%3FMonth%3DJan'...> 

The above link, when clicked, would open in a new window.

XML Example:

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
      <set label='Jan' value='17400' link='n-DemoLinkPages/DemoLink1.html'/>
      <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/>
      <set label='Mar' value='21800' link='n-DemoLinkPages/DemoLink3.html'/>
      <set label='Apr' value='23800' link='n-DemoLinkPages/DemoLink4.html'/>
      <set label='May' value='29600' link='n-DemoLinkPages/DemoLink5.html'/>
      <set label='Jun' value='27600' link='n-DemoLinkPages/DemoLink6.html'/>
      </chart>

See it here!

« Back to top

Linking to Frames

FusionCharts allows you to open links in specified frames too. To do so, you just specify the name of the frame in the link itself. This feature can be very useful when creating simulated drill down reports and dashboards.

To open link in a specified frame, you need to set the link as under:

<set ... value='2235' link='F-FrameName-ShowDetails.asp%3FMonth%3DJan' ... >

The first character in the link is F, denoting that we need to open this link in a frame. Post F, we add a dash character (-) and then specify the name of frame in which we want the link to open. Soon after the frame name, we add another dash character and finally write the actual link which is to be opened. Again, the link needs to be URL Encoded.

Advanced Note : You can provide _parent as the name of the frame. The Url will get loaded in the frame or browser window which is the parent of the current window. Typically, the main browser space becomes the parent frame that contains all the frames. Hence, if you wish to remove all frames and load the Url freshly on the same location you can use _parent as the name of the frame.

XML Example:

 <chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='Jan' value='17400' 
 link='F-detailsFrame-../DemoLinkPages/DemoLink1.html'/>
<set label='Feb' value='19800' 
 link='F-detailsFrame-../DemoLinkPages/DemoLink2.html'/>
<set label='Mar' value='21800' 
 link='F-detailsFrame-../DemoLinkPages/DemoLink3.html'/>
<set label='Apr' value='23800' 
 link='F-detailsFrame-../DemoLinkPages/DemoLink4.html'/>
<set label='May' value='29600' 
 link='F-detailsFrame-../DemoLinkPages/DemoLink5.html'/>
<set label='Jun' value='27600' 
 link='F-detailsFrame-../DemoLinkPages/DemoLink6.html'/>
</chart>

In this example, the main frame-set is contained in FrameExample.html, which has two vertical frame pane- one on top containing the chart (FramePages\FrameChart.html) and one on bottom to show the linked frame pages. The bottom pane by default shows FramePages\LowerFrame.html which contains the message "Click on columns above to view details ".

The setup looks as under:

See it live!

The HTML code of FrameExample.html is as under:

 <html>
    <head>
       <title>
          FusionCharts Frame Drill-down example
       </title>
    </head>
    <frameset rows="350,*" cols="*" frameborder="YES" border="1" 
    framespacing="0">
       <frame src="FramePages/FrameChart.html" name="chartFrame" 
        scrolling="NO" noresize >
       <frame src="FramePages/LowerFrame.html" name="detailsFrame"
       scrolling="Auto" noresize>
    </frameset>
 </html>

The top frame (FramePages\FrameChart.html) contains the chart and is named as chartFrame. The bottom frame responds to click events from the chart - it's named as detailsFrame, and we use this name in our XML data links.

When the user now clicks on the chart links, they open up in detailsFrame frame pane, which is what we exactly wanted to.

Note: Internally the chart decodes a Url that you set as link. Before invoking the link it again encodes the Url. If you are passing multilingual characters via a Url or do not want this decode-encode mechanism to be handled by chart you can set unescapeLinks='0' in <chart> element of the chart's XML data. If you are using JSON data, you need to use { "chart" : { "unescapeLinks" : "0" ... } ... } .

« Back to top

Opening links in pop-up windows

FusionCharts also allows you to open your links in pop up windows. To open a link in pop-up window, you need to define the link as under:

 <set .. value='235' link="P-detailsWin,width=400,height=300,
 toolbar=no,scrollbars=no, 
 resizable=no-ShowDetails.asp%3FMonth%3DJan" />

Here, we've:

• Prefixed the link with P- so as to denote that the link is to be opened in a new pop-up window.
• Specified a name for the new window. In this case it's detailsWin. If you want all the links to open in the same pop-up, use the same window name across all links. However, if you want each link to open in a new pop-up, specify a different window name for each link.
• After the name of the pop up window comes the list of attributes for the new window separated by commas. Possible list of attributes is defined below.
• Finally, the actual link to be invoked is defined after a dash (-). Again, the link is URL Encoded.

Possible attributes for new window

• height Specifies the height of the window in pixels. Value = number
• width Specifies the width of the window in pixels. Value = number

• resizable When enabled, allows the user to manually resize the window by dragging its edges or corners. Value = yes or no, 1 or 0.

• scrollbars Specifies whether or not to display the horizontal and vertical scrollbars that normally appear when the page content is larger than the screen. Value = yes or no, 1 or 0.
• menubar Specifies whether or not to display a menu bar at the top of the window. Value = yes or no, 1 or 0.
• toolbar Specifies whether or not to display the main tool-bar (with the back, forward, stop etc. buttons). Value = yes or no, 1 or 0.
• location Specifies whether or not to display the location bar (the Address Bar in Internet Explorer) - where URLs are typed and displayed. Value = yes or no, 1 or 0.
• directories Specifies whether or not to display any additional tool-bar (e.g the Links Bar in Internet Explorer). Value = yes or no, 1 or 0.
• status Specifies whether or not to display the status bar at the foot of the window. Value = yes or no, 1 or 0.
• left Specifies the distance in pixels of the new window from the left edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenX). Value = number
• top Specifies the distance in pixels of the new window from the top edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenY). Value = number
• fullscreen When enabled causes the window to open in full-screen mode (Internet Explorer only.) Value = yes or no, 1 or 0.

Sample XML:

 <chart caption='Monthly Sales Summary' subcaption='For the year 2006' 
 xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
    <set label='Jan' value='17400' 
 link='P-detailsPopUp,width=400,height=300,
 toolbar=no, scrollbars=no,
 resizable=no-DemoLinkPages/DemoLink1.html'/>
    <set label='Feb' value='19800' 
 link='P-detailsPopUp,width=400,height=300,
 toolbar=no, scrollbars=no,
 resizable=no-DemoLinkPages/DemoLink2.html'/>
    <set label='Mar' value='21800' 
 link='P-detailsPopUp,width=400,height=300,
 toolbar=no, scrollbars=no,
 resizable=no-DemoLinkPages/DemoLink3.html'/>
    <set label='Apr' value='23800' 
 link='P-detailsPopUp,width=400,height=300,
 toolbar=no, scrollbars=no,
 resizable=no-DemoLinkPages/DemoLink4.html'/>
    <set label='May' value='29600' 
 link='P-detailsPopUp,width=400,height=300,
 toolbar=no, scrollbars=no,
 resizable=no-DemoLinkPages/DemoLink5.html'/>
    <set label='Jun' value='27600'
 link='P-detailsPopUp,width=400,height=300,
 toolbar=no, scrollbars=no,
 resizable=no-DemoLinkPages/DemoLink6.html'/>
 </chart>

See it here!

« Back to top

Full chart as a hotspot

Starting FusionCharts v3, you can also set the full chart as a single hotspot. This is useful, when you want to show a small thumbnail of the chart, which when clicked opens a detailed bigger chart.

To set the entire chart as a hotspot, just specify the target link in clickURL attribute of <chart> element as under:

<chart ... clickURL='DetailedChart.html' ...>

You can again specify the link in five ways:

• Simple link opening in same window
• Simple link opening in new window
• Link to another frame
• Link opening in a new pop-up window
• Existing JavaScript functions (on the same page) to be invoked as links

If you set the entire chart as hotspot, the other links on the chart (individual links for data plot) wouldn't work.

Example XML:

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$' clickURL='n-http://www.fusioncharts.com'>
      <set label='Jan' value='17400' />
      <set label='Feb' value='19800' />
      <set label='Mar' value='21800' />
      <set label='Apr' value='23800' />
      <set label='May' value='29600' />
      <set label='Jun' value='27600' />
      </chart>

See it here!

Note: Internally the chart decodes a Url that you set as link. Before invoking the link it again encodes the Url. If you are passing multilingual characters via a Url or do not want this decode-encode mechanism to be handled by chart you can set unescapeLinks='0' in element of the chart's XML data. If you are using JSON data, you need to use { "chart" : { "unescapeLinks" : "0" ... } ... } .

« Back to top

Using JavaScript functions as Links

Instead of using simple links, you can also set JavaScript links using FusionCharts. That is, you can invoke a JavaScript function present in the same page (in which the chart is present) when the end viewer clicks a data element on the chart.

FusionCharts provides two ways of set JavaScript functions as links:

• J- Prefix :
  Just place the function name the j- notation. The function will be evaluated as a standard JavaScript function and anything placed after the function name separated by a - (dash) will be passed as a single String parameter to the function. e.g.,
  

  <set label='USA' value='235' link="j-myJS-USA,235"/>

  In the above code snippet, myJS refers to a custom JavaScript function present in the HTML page that embeds this chart and USA,235 is the parameter value passed to the function. You can pass only a single string parameter to this function. When you now click the data item (column, pie, bar etc.) for this particular data, myJS function would be invoked and 'USA, 235' would be passed to the function as the function parameter. Here, we've passed the data label and value just for demonstration purposes. In actual charts, you can pass identifier numbers or strings of each data. When the user clicks on the link, these identifiers can be sent back to your JavaScript function for further actions (like loading detailed data for that identifier using AJAX or anything - the possibilities are endless).

• JavaScript: prefix :
  provide single or multiple JavaScript functions or statements after JavaScript: prefix. e.g.,
  

  <set label='USA' value='235' link="JavaScript: isJavaScriptCall=true; alert('hi JS!'); myJS('USA',235);"/>

  In the above code snippets, we have set the value of variable isJavaScriptCall to true. Next, we call JavaScript alert. Finally, we call myJS which refers to a custom JavaScript function present in the HTML page that embeds this chart. You can also specify any number of parameters for this function. When you now click the data item (column, pie, bar etc.) for this particular data, myJS function would be invoked and 'USA' would be passed as the first parameter (string) and 235 would be passed as second parameter (numeric) to the function.
  

Advanced Note: Syntax of JavaScript links having J- prefix

j-{user function name}-{parameter}

The {user function name} is a user-defined function. It will receive the parameters as a single de-limiter separated string.

The {parameters} is a de-limiter separated value field. The parameter field should not be enclosed within quotes. Using this method, you can just pass one parameter from chart to your JavaScript. So, when you need to pass multiple parameters, combine them using a delimiter in XML, and then in your JavaScript method split it again.

The classical notation will be evaluated faster since no String decomposition takes place. However, the new syntax removes all the problems with nested quotation marks.

Let's quickly put up an example for these kind of links. We'll create a simple 2D Column chart indicating "ABC Bank Branches" in Asia. Each column when clicked would pass its label and value to our custom JavaScript function myJS, which (for the sake of demonstration) would just write it out in an alert box.

We create JSExample.html for this example in DrillDown folder. It contains the following HTML code:

<html>
  <head>
    <title>JavaScript Link Example</title>
    <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
    <SCRIPT LANGUAGE="JavaScript"><!--
      function myJS(myVar){
          window.alert(myVar);
      }
    // --></SCRIPT>
  </head>
  <body bgcolor="#ffffff">
    <div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
    <script type="text/javascript"><!--
        var myChart = new FusionCharts("../FusionCharts/Column2D.swf", 
        "myChartId", "500", "300", "1", 
        "1");
       myChart.setXMLUrl("JSExample.xml");
       myChart.render("chartdiv");
    // --></script>
  </body>
</html>

See it here!

Here, we've a defined a function myJS which will respond to the clicks generated from the chart. Additionally, it's important to set the registerWithJS attribute in constructor to 1 (the last attribute in the line which initializes a FusionCharts chart in the page).

Let's see how the function can be called using the two methods of defining JavaScript links:

Using J- in JavaScript link

And now, JSExample.xml looks as under:

<chart caption='ABC Bank Branches' subCaption='(In Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
    <set label='Hong Kong' value='235' link='j-myJS-Hong Kong, 235'/>
    <set label='Japan' value='123' link='j-myJS-Japan, 123'/>
    <set label='Singapore' value='129' link='j-myJS-Singapore, 129'/> 
    <set label='Malaysia' value='121' link='j-myJS-Malaysia, 121'/>
    <set label='Taiwan' value='110' link='j-myJS-Taiwan, 110'/> 
    <set label='China' value='90' link='j-myJS-China, 90'/>  
    <set label='S. Korea' value='86' link='j-myJS-S.Korea, 86'/>  
</chart>

As you can see above, for each data item, we've defined a JavaScript link that points to the custom function myJS. To this function, we're passing the name and value of the data item.

When you view the chart and click on a column, you'll see something like under:

Note: The above mentioned way of using JavaScript functions as links is supported by all the major browsers.

Using JavaScript: in JavaScript link

Using this method, the JSExample.xml would look like this:

<chart caption='ABC Bank Branches' subCaption='(In Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
    <set label='Hong Kong' value='235' link="JavaScript:myJS('Hong Kong,235');"/> 
    <set label='Japan' value='123' link="JavaScript:myJS('Japan, 123');"/>
    <set label='Singapore' value='129' link="JavaScript:myJS('Singapore, 129');"/> 
    <set label='Malaysia' value='121' link="JavaScript:myJS('Malaysia, 121');"/> 
    <set label='Taiwan' value='110' link="JavaScript:myJS('Taiwan, 110');"/> 
    <set label='China' value='90' link="JavaScript:myJS('China, 90');"/> 
    <set label='S. Korea' value='86' link="JavaScript:myJS('S.Korea, 86');"/> 
</chart>

As you can see above, for each data item, we used JavaScript:, instead of j-, which points to the custom function myJS, and the function call is written exactly with as in JavaScript notation. Apart from this, everything else remains same.

Note: In certain rare cases after chart export, Internet Explorer fails to invoke JavaScript functions as links using this method. So we recommend using j- method.

« Back to top