html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {x: "2010", y: "A", heat: 15},

      {x: "2011", y: "A", heat: 17},

      {x: "2012", y: "A", heat: 21},

      {x: "2013", y: "A", heat: 23},

      {x: "2010", y: "B", heat: 34},

      {x: "2011", y: "B", heat: 33},

      {x: "2012", y: "B", heat: 32},

      {x: "2013", y: "B", heat: 30},

      {x: "2010", y: "C", heat: 43},

      {x: "2011", y: "C", heat: 42},

      {x: "2012", y: "C", heat: 40},

      {x: "2013", y: "C", heat: 38},

      {x: "2010", y: "D", heat: 8},

      {x: "2011", y: "D", heat: 8},

      {x: "2012", y: "D", heat: 7},

      {x: "2013", y: "D", heat: 8}

    ];

​

    // create a chart and set the data

    var chart = anychart.heatMap(data);

​

    // configure the visual settings of the chart

    chart.hovered().fill("gray", 0.4);

    chart.selected().fill("gray", 0.6);

    chart.selected().hatchFill("forward-diagonal", "gray", 2, 20);

    chart.normal().stroke("gray");

    chart.hovered().stroke("gray");

    chart.selected().stroke("gray", 2);

​

    // set the chart title

    chart.title("Heat Map: Appearance");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});