Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

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: 'Highcharts multi-series drilldown'
        },
        subtitle: {
            text: 'Click columns to drill down to single series. Click categories to drill down both.'
        },
        xAxis: {
            type: 'category'
        },

        plotOptions: {
            series: {
                stacking: 'normal',
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            name: '2010',
            data: [{
                name: 'Republican',
                y: 5,
                drilldown: 'republican-2010'
            }, {
                name: 'Democrats',
                y: 2,
                drilldown: 'democrats-2010'
            }, {
                name: 'Other',
                y: 4,
                drilldown: 'other-2010'
            }]
        }, {
            name: '2014',
            data: [{
                name: 'Republican',
                y: 4,
                drilldown: 'republican-2014'
            }, {
                name: 'Democrats',
                y: 4,
                drilldown: 'democrats-2014'
            }, {
                name: 'Other',
                y: 4,
                drilldown: 'other-2014'
            }]
        },{
		name : 'Bookings Value',
		type : 'spline',
		color : '#eb9898',
		pointPadding : 0.399,
		pointPlacement : 0.004,
		marker : {
		lineWidth : 5,
		lineColor : '#eb9898',
		fillColor : '#eb9898'
	},
	data : [6, 3, 5, 2, 4],
 }
        ],
        drilldown: {
            series: [{
                id: 'republican-2010',
                data: [
                    ['East', 4],
                    ['West', 2],
                    ['North', 1],
                    ['South', 4]
                ]
            }, {
                id:...