Highcharts Demo

author(s): Torstein Hønsi

by Jozef Vaclavik

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/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: 80
        },


        title: {
            text: 'heatmap'
        },

        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        },

        yAxis: {
            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            title: null
        },

        colorAxis: {
            min: 0,
            max: 100,
            stops: [
              [0, "#711F20"],
              [0.45, "#CC7772"],
              [0.46, "#4870A0"],
              [0.55, "#648ABA"],
              [0.56, "#799B5F"],
              [1, "#A3E960"]
            ]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [
				[0, 0, 1],
				[0, 1, 2],
				[0, 2, 3],
				[0, 3, 4],
				[0, 4, 5],
				[0, 5, 6],
				[0, 6, 7],
				[0, 7, 8],
				[0, 8, 9],
				[0, 9, 10],
				[1, 0, 11],
				[1, 1, 12],
				[1, 2, 13],
				[1, 3, 14],
				[1, 4, 15],
				[1, 5, 16],
				[1, 6, 17],
				[1, 7, 18],
				[1, 8, 19],
				[1, 9, 20],
				[2, 0, 21],
				[2, 1, 22],
				[2, 2, 23],
				[2, 3, 24],
				[2, 4, 25],
				[2, 5, 26],
				[2, 6, 27],
				[2, 7, 28],
				[2, 8, 29],
				[2, 9, 30],
				[3, 0, 31],
				[3, 1, 32],
				[3, 2, 33],
				[3, 3, 34],
				[3, 4, 35],
				[3, 5, 36],
				[3, 6, 37],
				[3, 7, 38],
				[3, 8, 39],
				[3, 9,...