Blog Help & Support Contact About Login

 Show Nav

Drill Down Charts with History

Parent Child Drilldown

The parent child drilldown is a great example of utilizing ZingCharts built in drilldown features. You can define a target for the drilldown config. In this case we have a graphset of 3 graphs. The top level graph will define a target towards the second graph by id.

{
  ...
  "url":"//demos.zingchart.com/view/R45GETU8/kitchen_data_months.php?year=%scale-key-value&filepath=//demos.zingchart.com/view/R45GETU8", 
  "target":"graph=months"
}

Within the drilldown chart configuration returned from this php script, the next target will be graph=days for the final drilldown chart. You can find the final child configuration here.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Other Drilldown Use Cases

Outside of the standard history object drilldown chart, you can define your own drilldown very easily. You can use shapes and labels to create history buttons. Coupled with our API events and methods it is very easy to gain more control over your drilldown data. Lets look at a few use cases.

setseriesdata

One of the most simple and effective ways to have total control of your drilldown interactions is our API method setseriesdata. This demo utilizes the setseriesdata API method from ZingChart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

AJAX

How to gather drilldown data using AJAX and ZingChart. The following demo will load from 12,000 - 130,000 data points for each chart drilldown configuration.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

PHP Drilldown

This demo represents a typical REST API call for drilling down into charts. The url specified will take a query parameter and from there your REST API will return the appropriate chart configuration.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart