Heatmap with Highstock and Highcharts

by Himanshu Joshi

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/modules/heatmap.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": 10,
            "marginBottom": 40,
            "height": 450
        },
        "title": {
            "text": ""
        },
        "xAxis": {
            "categories": [],
            'labels':{
                'enabled': false   
            }
        },
        "yAxis": {
            "categories": [],
            "title": null,
            'labels':{
                'enabled': false   
            }
        },
        "colorAxis": {
            "min": 0,
            "max": 25
        },
        "legend": {
            enabled:false
        },
        "tooltip": {
            enabled:false            
        },
        "plotOptions": {
            "heatmap": {
                "borderColor": "#FFFFFF",
                "point": {
                    "events": {
                        
                    }
                }
            }
        },
        "series": [
            {
                "name": "Sales per employee",
                "borderWidth": 1,
                "data": [
                    {
                         x:0,
                         y:0,
                         value:1,
                         misc:18,
                         color:'#CFEE91'
                    },
                    {
                        x:0,
                        y:1,
                        value:2,
                        misc:4,
                        color:'#A9D947'
                    },
                    {
                        x:0,
                        y:2,
                        value:3,
                        misc:4,
                         color:'#7FBF00'
                    },
                    {
                        x:0,
                        y:3,
                        value:4,
                        misc:4,
                         color:'#6BA100'
                    },
                    {
     ...