html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart 

    var chart = anychart.heatMap(getData());

​

    // enable scrollers

    chart.yScroller(true);

    chart.xScroller(true);

​

    // set scrollers orientation

    chart.xScroller().orientation("top");

    chart.yScroller().orientation("left");

​

    // create ordinalColor scale

    var colorScale = anychart.scales.ordinalColor();

    // set range of heat parameter's values and corresponding colors

    colorScale.ranges([

{less: 7, color: "#33CC33"},

{from: 7, to: 22, color: "#CCFF66"},

{from: 22, to: 32, color: "#EB9E33"},

{greater: 32, color: "#FF3300"}

    ]);

​

    // apply colorScale for colorizing heatMap chart

    chart.colorScale(colorScale);

​

    // display the chart

    chart.container("container");

    chart.draw();

});

​

// get data function

function getData(){

    return [

{y: "Part 1", x: "Mobile", heat: 15},

{y: "Part 2", x: "Mobile", heat: 17},

{y: "Part 3", x: "Mobile", heat: 21},

{y: "Part 4", x: "Mobile", heat: 23},

{y: "Part 5", x: "Mobile", heat: 20},

{y: "Part 6", x: "Mobile", heat: 33},

{y: "Part 7", x: "Mobile", heat: 19},

{y: "Part 1", x: "WebMail", heat: 34},

{y: "Part 2", x: "WebMail", heat: 33},

{y: "Part 3", x: "WebMail", heat: 32},

{y: "Part 4", x: "WebMail", heat: 30},

{y: "Part 5", x: "WebMail", heat: 20},

{y: "Part 6", x: "WebMail", heat: 7},

{y: "Part 7", x: "WebMail", heat: 21},

{y: "Part 1", x: "Desktop", heat: 43},

{y: "Part 2", x: "Desktop", heat: 42},

{y: "Part 3", x: "Desktop", heat: 40},

{y: "Part 4", x: "Desktop", heat: 38},

{y: "Part 5", x: "Desktop", heat: 24},

{y: "Part 6", x: "Desktop", heat: 36},

{y: "Part 7", x: "Desktop", heat: 23},

{y: "Part 1", x: "Undetected", heat: 6},

{y: "Part 2", x: "Undetected", heat: 8},

{y: "Part 3", x: "Undetected", heat: 7},

{y: "Part 4", x: "Undetected", heat: 8},

{y: "Part 5", x: "Undetected", heat: 15},

{y: "Part 6", x: "Undetected", heat: 4},

{y: "Part 7", x: "Undetected", heat: 9}

    ];    

}