When it comes to interactive charts, most users want to see the big picture. But they usually want the ability to explore data in more depth.

We wrote at length about zooming options recently, but chart drilldown is an additional option you can offer your users. It is a way to interact with charts to dig deeper into a detailed data set.

drilling into wall - metaphor chart drilldown

Drilldown and zooming are two different things:

  • Drilldown opens up a new data set to explore with more granularity

  • Zooming shows more detail within a single data set
    If drilldown is what you need to best serve up data to your users, then read on!

Chart Drilldown with History

A drilldown with history allows your users to focus in on the “data within the data” within a single chart area. History is appropriate to use when the chart type will change as the user drills down.

If the chart type stays the same during drilldown, it could be confusing to users which particular data set they are viewing.

The history buttons can be added by including the “history” object in your JSON.

"history":{  
   "y":"20",
   "height":"30",  
   "width":"45",    
},  

The contents of this object are telling ZingChart where you want the buttons to go and how big they should be.

Then for each series in your primary chart, include the “url” and “target” attributes so when users click on a series item, it will load the next chart/data set.

"series":[  
{  
   "text":"Dev Tools",  
   "values":[15],  
   "url":"/assets/dd/drilldown/Dev.txt",  
   "target":"graph=d1"  
},  

The "url" attribute points to an external .txt file that contains only the JSON for the chart to be loaded when that particular series item is clicked.

The "target" attribute uses a graph's id, so ZingChart knows where to load the new JSON packet. This is crucial if your chart contains multiple graphs in your "graphset" object.

This chart has three layers of charts, with each series in the second layer containing another set of "url" attributes to drill down even deeper.

Advanced Chart Drilldown Options

ZingChart offers many API methods allow users to interact with and manipulate charts. The API also provides a few drilldown options, as well. However, the API is not the only way to add drilldown options to your charts.

Parent/Child Drilldown

Three graph objects are used in the "graphset" object array to create this drilldown chart. The top level chart is just a standard chart, while the two below it contain unique IDs (to allow us to target each of them individually) and placeholder labels to provide information about the chart.

Unlike the previous example which uses static text files for each of the various charts, this chart uses PHP scripting to generate dynamic charts.

The "url" attribute in the top level chart is set to pass the x-axis value of the clicked node to our data-months.php file as a URL parameter through the use of ZingChart's %scale-key-value token.

"url": "data-months.php?year=%scale-key-value",  
"target": "graph=months"  

The contents of data-months.php and data-days.php consist primarily of standard ZingChart JSON, with PHP scripting sprinkled throughout to echo the "year" URL parameters to create the custom labels and to generate random data values.

Modal Drilldown Chart

This demo takes advantage of the “node_click” API event to fire custom functions dependent on which node is clicked.

For the sake of this example, each node in the chart is treated like an element in an array. It has an index (with 0 being the index of the first node) and can be accessed via “nodeindex”.

Upon clicking a node, we fire our custom function. In this example, our custom function uses the jQuery-UI library to create a dialog modal with it’s own chart inside.

By using the node_click event and the jQuery-UI library, we allow a more granular view into our data. The result is a more detailed and interactive chart without compromising visual simplicity.

Interactive Map Drilldown

You can use the ZingChart API to drilldown into maps. ZingChart maps are created with shapes. In the example below, we used the shape_click API event to get the ID of the map item that's been clicked.

Next, our function “loadData” calls zingchart.exec with ‘setdata’ and loads the next map.

To provide history functionality, we created a label that is connected to an API event. Upon clicking, it takes the user back to the previous map they viewed in our array.

Chart Drilldown - An Additional Way to Explore Data

ZingChart’s chart drilldown feature allows users to interact with your data visualizations in an important way. It provides a way for users to explore complex datasets with multiple levels of information to convey. By providing this capability to your users, you will:

  • Keep them engaged

  • Help them achieve their goals

  • Present them with dense data sets in a confined chart area

Are you using drilldown in your dataviz? Share your examples or questions for implementation in the comments section below.

Want some more in-depth knowledge on drilldown? Visit our drilldown docs page! For any additional questions visit our help center