Highcharts Demo

author(s): Torstein Hønsi

by Pavel Savushchyk

HTML

<script src="http://github.highcharts.com/valanipa/highcharts.js"></script>
<script src="http://github.highcharts.com/valanipa/modules/data.js"></script>
<script src="http://github.highcharts.com/valanipa/modules/heatmap.js"></script>


<div id="container" style="height: 400px; max-width: 400px; margin: 0 auto"></div>

JavaScript

function getRandomValue() {
    return Math.random() * 10;
}
function generateData() {
    var x = 0, y = 0,
        xMax = 100,
        yMax = 100,
        result = [];
    
    while (x > xMax) {
        while (y > yMax) {
            
            result.push([x,y, getRandomValue()]);
            
            y++;
        }
        x++;
    }
    return result;
}

$(function () {

    $('#container').highcharts({
        "chart":{
            "zoomType":"xy",
            "type":"heatmap"
        },
        "credits":{"enabled":false},"title":{"text":null},
        "xAxis":{
            "categories":[ 'Canada', 'USA', 'Mexico' ]
            },
        "yAxis":{
            categories: ['A', 'B', 'C'],
            title: null
        },
        colors: ['#0d233a', '#ccc'], // ... this is JRS palette
         colorAxis: {
            //min: 0,
            stops: [
                [0.1, '#910000'],
                [0.5, '#ffc90e'],
                [0.9, '#158349']
            ]
        },
        "plotOptions":{
            "series":{
                //"marker":{"enabled":true},
                //"tooltip":{}
            },
        },"series":[{
            "name":"Store Sales",
            borderWidth: 1,
            "data": generateData(),
            dataLabels: {
                enabled: true,
                color: 'black',
                style: {
                    textShadow: 'none',
                    HcTextStroke: null
                }
            }
        }],
        
        legend: {
            //align: 'right',
            //layout: 'vertical',
            margin: 0,
            //verticalAlign: 'top',
            //y: 25,
            //symbolHeight: 320
        }
    });
});

/*
[
                [0,0,2],
                [0,1,8],
                [0,2,1],
                [1,0,5],
                [1,1,2],
                [1,2,4],
                [2,0,7],
                [2,1,1],
                [2,2,4]
            ]
*/