Adding Drill Down to Charts

In FusionCharts, you can create drill down charts, where individual data plots act as hotspots. Viewers can click on an individual plot (in the original or parent chart) to open a new (descendant) chart, containing additional data relevant to the plot. All charts in FusionCharts support the drill down functionality, except for the Zoom Line chart. With a large enough data set, you can create endless levels of drill down, as per your requirements.

For quick reference, learn how you can customize Drilldown Charts:

Using j-prefix

FusionCharts lets you place a JavaScript function (evaluated as a standard JavaScript function) name after the j- prefix. You can pass a single string type parameter to the function. You can only pass one JavaScript function as a link through this process.

Alert Box

When you build a drill down chart, you can configure it to display an alert box, when the viewer clicks on any of the data plots. You can display any kind of text in this alert box, such as a context sensitive message, or the data value of the plot.

In the sample, you can see a drill down chart configured to display an alert box whenever the viewer clicks on a data plot. The alert box displays the data value of the plot.

Text Area

In FusionCharts, when you build a drill down chart, you can place a text area below the chart to display context sensitive information. This helps the viewer gain additional information about any data plot.

In the example, you can see a drill down chart with a text area right below it. When the viewer clicks on one of the data plots, this text area displays the underlying data of the plot in the form of a string.

In a drill down chart built with FusionCharts, you can display a modal box whenever the viewer clicks on a data plot. This modal box can display context sensitive data about the plot.

In the example, when the viewer clicks on any data plot, a modal box pops up and displays the underlying data of the plot. The box is equipped with an OK button, which the viewer can click to return to the chart.

Open Another URL on Drill Down

When you build a drill down chart, you can link a web page (either on your local server, or on the World Wide Web) to each data plot. A viewer clicking on any of the data plots is taken to the corresponding linked page.

In the example, you can see a drill down chart displaying data regarding the oil reserves of different countries. Each data plot is linked to a page on the web, which contains detailed information about the oil reserves of that particular country.

To know more about this feature, click here.

Using Data URL Method

In FusionCharts, when you build a drill down chart, you can use the data URL method to link an external data source to the data plots. Whenever the viewer clicks on a data plot, a new chart showcasing the linked data is displayed.

In the example, you can see that each data plot is linked to an external data source. Whenever the viewer clicks on a data plot, a new chart opens right below the initial chart, and the page automatically scrolls down to the new chart. The new chart also has a Close button on the top right corner that the viewer can click on, to close the new chart.

To know more about this feature, click here.

Using Data String Method

In FusionCharts, when you build a drill down chart, you can use the data string method to open a new chart whenever the viewer clicks on a data plot. The new chart contains additional information about the data plot.

In the example, you can see that whenever the viewer clicks on a data plot, a new chart opens right below the initial chart, and the page automatically scrolls down to the new chart. The new chart also has a Close button on the top right corner that the viewer can click on, to close the new chart.

To know more about this feature, click here.

Using Linked Charts

In FusionCharts, you can configure the link between a parent chart and a descendant chart to perform different actions. You can, for instance, open a new chart with a chart type different from the parent chart, whenever the viewer clicks on a data plot.

Different Charts in Child Container

In FusionCharts, when you configure a drill down chart, you can set a descendant chart of a different type from the parent chart, which loads when the viewer clicks on a data plot.

For instance, in the given sample, you can see that when the viewer clicks on a data plot of the column (parent) chart, a pie (descendant) chart opens right below the column chart, with detailed data about the data plot.

Using Modal Popup

You can configure a drill down (parent) chart to open a new (descendant) chart in a popup, when the viewer clicks on a data plot. The new chart displays additional information about the data plot that the viewer clicks.

For instance, in the example, you can see a parent chart with data about “Top 4 most widely used mobile operating systems of 2014”. When the viewer clicks on a data plot (say, iOS), a new chart opens with data about the number of users of the 3 latest versions of iOS. The new chart also has a Close button. The viewer can click on that to return to the parent chart.

Click URL

In FusionCharts, you can configure a drill down chart to direct the viewer to a link, when the viewer clicks on a data plot. The link can have additional information regarding the data plot.

For instance, in the example, you can see a Spline chart plotted with data regarding the average monthly temperature in the US state of Texas. When the viewer clicks on one of the data plots, it automatically takes the user to a website, which shows the temperature in Texas at that moment.

To know more about this feature, click here.

Using Thumbnails

In FusionCharts, when you build charts of different types with the same data, you can display all of the charts as thumbnails on the page. That way, viewers can quickly maximize any of the charts, by clicking its corresponding thumbnail.

For instance, in the example, you can see the thumbnails for three different charts (Column, Pie, and Bar) given as thumbnails. The viewer can click on any of the thumbnails to instantly view the corresponding chart.

To know more about this feature, click here.

Drill Down Event API

In FusionCharts, you can use the drill down event API to quickly generate descendant charts using data from a data source (like a CSV file or a spreadsheet), when the viewer clicks on a node in the parent chart.

For instance, in the given example, whenever the viewer clicks on one of the data plots in the parent chart, the chart fetches data for the descendant chart from a CSV file and renders the chart instantly.