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);

​

    // create and configure a color scale.

    var customColorScale = anychart.scales.ordinalColor();

    customColorScale.ranges([

      {less: 20},

      {from: 20, to: 40},

      {greater: 40}

    ]);

    customColorScale.colors(["lightgray", "#00ccff", "#ffcc00"]);

​

    // set the color scale as the color scale of the chart

    chart.colorScale(customColorScale);

​

    // enable legend

    chart.legend(true);

​

    // set the chart title

    chart.title("Heat Map: Color Scale (Ordinal)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});