Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,


            events: {
                drilldown: function (e) {
                    console.log('I am here');
                    if (!e.seriesOptions) {

                        var chart = this;
                        var drilldownSeries = {
                            name: 'Sales per employee',
                            borderWidth: 1,
                            data: [{
                                x: 0,
                                y: 0,
                                value: 10,
                                drilldown: 'foo'
                            }, {
                                x: 0,
                                y: 1,
                                value: 19,
                                drilldown: 'foo'
                            }, {
                                x: 0,
                                y: 2,
                                value: 8,
                                drilldown: 'foo'
                            }, {
                                x: 0,
                                y: 3,
                                value: 24,
                                drilldown: 'foo'
                            }, {
                                x: 0,
                                y: 4,
                                value: 67,
                                drilldown: 'foo'
                            }, {
                                x: 1,
                                y: 0,
                                value: 92,
                                drilldown: 'foo'
                            }, {
                                x: 1,
                                y: 1,
                                value: 58,
                                drilldown: 'foo'
                            }, {
                                x: 1,
               ...