ZingChart: Drilldown Charts
There are multiple ways to enable a drilldown effect in your charts. The two easiest ways are adding a history object and intercepting the node_click/shape_click events.
History Object
To enable drilldown using the history object, add the history: {} object to your chart JSON. Within your chart JSON, you should have a graphset array containing your primary graph object, which must have an id - more on that in a moment. The history object must be outside of the graphset - so your chart JSON should resemble the following:
{
history: {
// history configuration
},
graphset: [
{
id: "myChart",
// chart JSON
},
]
} Your chart must have an id so that we are able to target the chart to load the secondary chart data. For each series, add a url attribute with the URL of the drilldown chart data to load. Then, set the target to 'graph=myChart'. Your series should resemble the following:
series: [
{
values: [11],
url: "https://storage.googleapis.com/zingchart-com.appspot.com/child1.txt",
target: "graph=zc"
},
{
values: [44],
url: "https://storage.googleapis.com/zingchart-com.appspot.com/child2.txt",
target: "graph=zc"
},
{
values: [26],
url: "https://storage.googleapis.com/zingchart-com.appspot.com/child3.txt",
target: "graph=zc"
}
] That's it! Pretty easy, right?
Intercept the click event
Another way to accomplish drilldown is through a combination of API events and methods. The primary events used are node_click and shape_click - this will change depending on the chart type (for example, line charts have nodes, whereas maps have shapes). The primary method used is setdata, which will take an entire chart JSON to replace the current one.
The basic concept of using the click event is as follows: The user will click on a node/shape, which you will then intercept. Then, using the click event data, you will determine which node/shape was clicked. Based on that information, you will load a new chart with the drilldown information using setdata.
One application of this is our Drilldown USA Map. The code is shown below. Notice that there is also handling for a back button - this must be manually added.
zingchart.bind('myChart', 'shape_click', function(e) {
var shapeId = e.shapeid;
var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
// if shape is our back button and not the map
if (shapeId == 'back_button') {
// since we are using setdata, reload will reload the original chartJSON
zingchart.exec('myChart', 'reload');
return;
}
if (hasDrilldownData(newMapId)) {
drilldownConfig.shapes[0].options.name = newMapId;
zingchart.exec('myChart', 'setdata', {
data: drilldownConfig
});
}
});Check out the demo by clicking the chart below. From the USA map, if you click on any state, the county map of that state will be loaded. The back button takes you back to the USA map.
There are other ways to accomplish a drilldown effect, as mentioned on our Drilldown tutorial page in our documentation, but these two methods are the easiest in our opinion!