Drilldown Chart
Overview
Creating a chart with drilldown in AnyChart is very easy and can be implemented using so-called event listeners and amazingly flexible API and data model. The very minimum you need is to create a chart, feed it proper data and then tell chart what to do when the point is clicked.
Step by Step Guide
Here is a sample we will be creating in this step by step tutorial, if you have some experience with AnyChart you can simply launch it and dig into the comments in the code:
For those who never worked with AnyChart and those who want to dig deeper, let's go through the creation of drill-down chart step by step.
Prepare Data
The first thing we need to have for a chart with drill-down is the data. There a lot of ways to load, organize and use data in AnyChart we will use one of the simpliest one for this basic sample.
The data for the drilldown chart can be organized in a tree-like structure, each row has x and value, and a field where the drilldown data set set is stored which can have any name, in our sample it is drillDown:
var data = [
{"x": 2015, "value": 2195081, "drillDown": [
{"x": "Q1", "value": 792026},
{"x": "Q2", "value": 610501},
{"x": "Q3", "value": 441843},
{"x": "Q4", "value": 350711}
]},
{"x": 2016, "value": 3257447, "drillDown": [
{"x": "Q1", "value": 1378786},
{"x": "Q2", "value": 571063},
{"x": "Q3", "value": 510493},
{"x": "Q4", "value": 797105}
]},
{"x": 2017, "value": 1963407, "drillDown": [
{"x": "Q1", "value": 499299},
{"x": "Q2", "value": 649963},
{"x": "Q3", "value": 571176},
{"x": "Q4", "value": 242969}
]}
];
Note: x and value are reserved names for AnyChart and it is the easiest way to go but you can use any names or even simple arrays using our data set mapping option, see more at Data Set Article.
Create a Chart
Now we have our data, now we simply feed this data set to a constructor that creates a chart and displays a chart on the page in some block-based element. You may be familiar with the basics, if not - please see AnyChart Quick Start.
Here is how you create a chart, set data and display it:
// create a chart
var chart = anychart.column(data);
// display chart in a div named 'container'
chart.container('container').draw();
Implement Drilldown
When chart has the data all that is left to do for us is to tell chart what to do when a point (single chart element, a column in this case) is clicked:
// when a 'pointClick' event happens
chart.listen('pointClick', function (e) {
// check if there is drillDown data available
if (e.point.get('drillDown')) {
// if so, assign to the only data series we have
chart.getSeries(0).data(e.point.get('drillDown'));
}
else {
// otherwise assign this series the initial
// dataset and return to the initial state
chart.getSeries(0).data(data);
}
});
That’s it, you can see it for yourself:
Basically the work is done, this foundation provides us with all we need and we will now tune the chart, add a drill-up button, and show that multilevel drilldown is also possible.
Tune the Chart
The basic chart is nice but we obviously need to tune it so it looks nice in this particular case. We will add three easy settings:
- Format Axis Labels so they show 'k' or 'm' for thousands and millions;
- Tune tooltips to show '$' sign;
- Change interactivity settings so the elements can't be selected.
We can do all this using this simple code:
// configure axis labels
chart.yAxis().labels().format('${%Value}{scale:(1000)(1000)|(k)(m)}');
// tune tooltips format
chart.tooltip().format('${%Value}');
// tune interactivity selection mode
chart.interactivity().selectionMode('none');
And now the chart looks and feels better:
Drill-Up Button
One thing you may want is to have a button on a chart that will take an end user a level up, this button may be implemented in several ways, we will show three of them.
First, you can create an interactive label with AnyChart and add it to a chart. To do so we need to add a label, configure how it looks and behaves, and modify drilldown behavior so the button appears when needed:
// configire drilldown on point click
chart.listen('pointClick', function (e) {
if (e.point.get('drillDown')) {
chart.getSeries(0).data(e.point.get('drillDown'));
chart.label(0).enabled(true);
}
});
// add chart label, set placement, color and text
chart.label(0, {enabled: false, position: 'rightTop', anchor: 'rightTop', padding: 5, offsetX: 5, offsetY: 5, text: "Back", background: {stroke: "1 black", enabled: true}});
// load initial data on label click
chart.label(0).listen('click', function() {
chart.getSeries(0).data(data);
chart.label(0).enabled(false);
});
That's it, with a miniscule amount of coding you have a drilldown column chart:
jQuery Option
With jQuery you need to create an element, assign proper styles and code reactions.
Here is the same sample as above but with a button created using jQuery: AnyChart Drilldown Chart sample with jQuery Button.
Pure HTML Option
You can go and create a button without use of anything, just pure HTML and JavaScript:
Here is the same sample as above but with a button created using pure HTML and JavaScript: AnyChart Drilldown Chart sample with HTML Button.
Improvements
The sample shown above is an illustration of idea and you can make tons of improvements depending on the nature of your task. We will showcase several of them below.
Multilevel Drilldown
The first modification is not a modification at all, it is a demonstration of the flexibility of concept shown in the basic sample: without changing anything in the code you can have multilevel drilldown chart. All you need to do is actually add multilevel data. Here is how the data will look like:
var data = [
{"x": "2015", "value": 2195081, "drillDown": [
{"x": "Q1", "value": 792026, "drillDown": [
{"x": "Jan", "value": 302000},
{"x": "Feb", "value": 190000},
{"x": "Mar", "value": 300026}]
},
{"x": "Q2", "value": 610501, "drillDown": [
{"x": "Apr", "value": 305000},
{"x": "May", "value": 100501},
{"x": "Jun", "value": 205000}]
},
{"x": "Q3", "value": 441843, "drillDown": [
{"x": "Jul", "value": 240000},
{"x": "Aug", "value": 51000},
{"x": "Sep", "value": 150843}]
},
{"x": "Q4", "value": 350711, "drillDown": [
{"x": "Oct", "value": 150000},
{"x": "Nov", "value": 100700},
{"x": "Dec", "value": 100011}
]}]}];
And if you feed such data to the code you'll be able to drill one more level down. And there is no limit, you can add more and more levels and it will still work.