html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

var data = [

{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}

];

​

// create heat map chart

var chart = anychart.heatMap(data);

​

// enable scrollers

chart.yScroller(true);

chart.xScroller(true);

​

// define Y zoom limits

chart.yZoom().setToValues("Part 1", "Part 4");

​

chart.container("container");

chart.draw();

});