Drill-Down Charts > Simple Example

FusionWidgets can be easily and extensively used to create drill-down charts. All the charts in FusionWidgets v3 suite support drill down for data elements i.e., in each chart type, the data plot of that chart (columns in Column Charts, dials in angular chart, funnel slices in funnel charts etc.) can act as hotspots for the chart. Using the drill down functionality provided by FusionWidgets, you can easily produce charts that enact "drill down" or "zoom in (data)" capabilities.

In FusionWidgets v3, you can define the following types of link for the data plot:

  • 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
  • Existing JavaScript functions (on the same page) to be invoked as links

All the examples discussed here in this section is present in Download Package > Code > DrillDown folder. The examples use Column 2D chart from FusionCharts v3 suite to generalize and simplify all examples, as it uses a common and simple XML structure.

 

Defining links for a Chart

To define a simple link for any data plot, just define the link attribute for the respective element (like <set> element in data-streaming charts or <dial> element in angular chart):

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

With the above XML, the data plot (column in data-streaming charts), 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. FusionWidgets expects all the links in URL Encoded format, if you have special characters (like ?,&, etc.) in your link. When the user clicks on the link, FusionWidgets 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.
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.