Stacked Column Chart Drilldown
Highchart
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div class="jumbotron">Jumbotron</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a>
</li>
<li><a href="#chart" data-toggle="tab">Chart</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">Some text ...</div>
<div class="tab-pane" id="chart">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div>
JavaScript
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if (e.target.hash === "#chart") {
config = {
chart: {
type: 'column',
events: {
drilldown: function (event) {
// alert("drilldown fired ...");
App.drilldown(event, this);
}
}
},
tooltip: {
pointFormat: 'Name: {series.name} ' +
'<br/>Relative: <b>{point.percentage:.1f}%</b>' +
'<br/>Absolute: <b>{point.y}</b>'
},
title: {
text: 'Title'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
turboThreshold: 10000
},
column: {
stacking: 'normal',
dataLabels: {
// enabled: true,
// inside: true,
// rotation: 270
}
}
},
series: [{
name: "Test",
data: [{
name: "One",
y: 12,
drilldown: true
}, {
name: "Two",
y: 13,
drilldown: true
}, {
name: "Three",
y: 22,
drilldown: true
}, {
name: "Four",
y: 14,
drilldown: true
...