Highcharts Demo

author(s): Torstein Hønsi

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

$(function () {    

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category'
        },

        plotOptions: {
            column : {
                stacking : 'normal'
            }
        },

        series: [{
            name: 'Yearly Orders',
            data: [{
                name: 'Location 1',
                y: 100,
                drilldown: 'l1-wa'
            }, {
                name: 'Location 2',
                y: 150,
                drilldown: 'l2-wa'
            }]
        }],
        drilldown: {
            series: [{
                name: 'Widget A',
                type: 'line',
                id: 'l1-wa',
                data: [
                    {name: 'Qtr 1', y: 5},
                    {name: 'Qtr 2', y: 25},
                    {name: 'Qtr 3', y: 25},
                    {name: 'Qtr 4', y: 20}
                ]
            },{
                name: 'Widget B',
                type: 'line',
                id: 'l1-wb',
                data: [
                    {name: 'Qtr 1', y: 10},
                    {name: 'Qtr 2', y: 5},
                    {name: 'Qtr 3', y: 5},
                    {name: 'Qtr 4', y: 5}
                ]
            }, {
                name: 'Widget A',
                type: 'line',
                id: 'l2-wa',
                data: [
                    {name: 'Qtr 1', y: 25},
                    {name: 'Qtr 2', y: 5},
                    {name: 'Qtr 3', y: 5},
                    {name: 'Qtr 4', y: 15}
                ]
            },{
                name: 'Widget B',
                type: 'line',
                id: 'l2-wb',
                data: [
                    {name: 'Qtr 1', y: 30},
                    {name: 'Qtr 2', y: 30},
                    {name: 'Qtr 3', y: 15},
                    {name: 'Qtr 4', y: 25}
               ...