Highcharts Demo

author(s): Torstein Hønsi

by philfreo

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$('#container').highcharts({
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                console.log(e, e.point, e.point.name, e.point.category);
                if (!e.seriesOptions) {
                    var chart = this,
                        drilldowns = {
                            'Fruits': {
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            'Cars': {
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name || e.point.category];
                    
                    chart.showLoading();
                    
                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000);
                }
                
            }
        }
    },
    title: null,
    xAxis: {
        type: 'category',
        categories: [
            'Animals',
            'Fruits',
            'Cars'
        ]
    },
    
    series: [{
        data: [{
          //  name: 'Animals',
            y: 5
        }, {
          //  name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
          //  name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }]
});