You are viewing documentation for an older version. For current documentation - click here.
Creating Drill-Down Charts

FusionWidgets XT can be easily and extensively used to create drill-down charts. All the charts in the FusionWidgets XT suite support drill-down for data elements, i.e., in each chart type, the data plot of that chart (slices in Funnel and Pyramid charts) can act as hotspots for the chart. Using the drill-down functionality provided by FusionWidgets XT, you can easily produce charts that enact "drill-down" capabilities. Moreover, you can make the whole chart as a hot-spot for drill-down.

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

Using Simple links In FusionWidgets XT, you can define the following types of links:

We will progressively see each type of drill-down in this page and in the pages that follow. Moreover, later in this section, we will learn how Chart links (LinkedCharts) work.

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, when clicked, will take you 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 XT 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, FusionWidgets XT 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.
Example data: 
<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>
{
  "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": "DemoLinkPages/DemoLink2.html"
    },
    {
      "label": "Mar",
      "value": "21800",
      "link": "DemoLinkPages/DemoLink3.html"
    },
    {
      "label": "Apr",
      "value": "23800",
      "link": "DemoLinkPages/DemoLink4.html"
    },
    {
      "label": "May",
      "value": "29600",
      "link": "DemoLinkPages/DemoLink5.html"
    },
    {
      "label": "Jun",
      "value": "27600",
      "link": "DemoLinkPages/DemoLink6.html"
    }
  ]
}

See it live!
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, will open in a new window.

Example XML/JSON:

 
<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>
{
  "chart": {
    "caption": "Monthly Sales Summary",
    "subcaption": "For the year 2006",
    "xaxisname": "Month",
    "yaxisname": "Sales",
    "numberprefix": "$"
  },
  "data": [
    {
      "label": "Jan",
      "value": "17400",
      "link": "n-DemoLinkPages/DemoLink1.html"
    },
    {
      "label": "Feb",
      "value": "19800",
      "link": "n-DemoLinkPages/DemoLink2.html"
    },
    {
      "label": "Mar",
      "value": "21800",
      "link": "n-DemoLinkPages/DemoLink3.html"
    },
    {
      "label": "Apr",
      "value": "23800",
      "link": "n-DemoLinkPages/DemoLink4.html"
    },
    {
      "label": "May",
      "value": "29600",
      "link": "n-DemoLinkPages/DemoLink5.html"
    },
    {
      "label": "Jun",
      "value": "27600",
      "link": "n-DemoLinkPages/DemoLink6.html"
    }
  ]
}

See it live!

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 the 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" ... } ... } .