html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  function heatMap(mode){

    // create heatMap

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

​

    // set labels display mode

    chart.labelsDisplayMode(mode);

    chart.title(mode);

    chart.xAxis(false);

    chart.yAxis(false);

​

    // create color scale

    var colorScale = anychart.scales.ordinalColor();

    // set range of heat parameters and corresponding colors

    colorScale.ranges([

      {equal: 0, color: "#9ACD32"},

      {equal: 1, color: "#FFFF00"},

      {equal: 2, color: "#FF6347"},

      {equal: 3, color: "#FF0000"}

    ]);

    // apply colorScale for colorizing heatMap chart

    chart.colorScale(colorScale);

​

    // adjust chart labels

    var labels = chart.labels();

    // display labels

    labels.enabled(true);

    // set minimum font size

    labels.minFontSize(12);

    // variable with list of labels

    var namesList = ["Low", "Medium", "High", "Extreme"];

    // format labels' content

    labels.format(function(){

      // get points heat

      var value = this.heat;

      // replace values with words

      return namesList[value];

    });

    // disable tooltip

    chart.tooltip(false);

    // manage chart position

    var padding = chart.padding();

    padding.bottom(0);

    padding.top(10);

​

    return chart;

  }

​

  var table = anychart.standalones.table();

  table.contents([

    [

      "Labels Display Mode"

    ],[

      heatMap("clip")

    ],[

      heatMap("drop")

    ],[

      heatMap("alwaysShow")

    ]

  ]);

​

  for (var i=1;i<4;i++){

    var row = table.getRow(i);

    row.minHeight(230);

  }

  var col = table.getCol(0);

  col.width(245);

  table.cellBorder(null);

  var row0 = table.getRow(0);

  row0.height(30);

  row0.hAlign("center");

​

  // set table container and initiate draw

  table.container("container");

  table.left((table.container().width()/2)-122);

  table.draw();

});

function data(){

  return anychart.data.set([

    {x: "Rare", y: "Insignificant", heat: 0},

    {x: "Rare", y: "Minor", heat: 0},

    {x: "Rare", y: "Moderate", heat: 0},

    {x: "Rare", y: "Major", heat: 0},

    {x: "Rare", y: "Extreme", heat: 0},

    {x: "Unlikely", y: "Insignificant", heat: 0},

    {x: "Unlikely", y: "Minor", heat: 0},

    {x: "Unlikely", y: "Moderate", heat: 0},

    {x: "Unlikely", y: "Major", heat: 1},

    {x: "Unlikely", y: "Extreme", heat: 1},

    {x: "Possible", y: "Insignificant", heat: 0},

    {x: "Possible", y: "Minor", heat: 0},

    {x: "Possible", y: "Moderate", heat: 1},

    {x: "Possible", y: "Major", heat: 1},

    {x: "Possible", y: "Extreme", heat: 1},

    {x: "Likely", y: "Insignificant", heat: 0},

    {x: "Likely", y: "Minor", heat: 1},

    {x: "Likely", y: "Moderate", heat: 1},

    {x: "Likely", y: "Major", heat: 2},

    {x: "Likely", y: "Extreme", heat: 2},

    {x: "Almost\nCertain", y: "Insignificant", heat: 0},

    {x: "Almost\nCertain", y: "Minor", heat: 1},

    {x: "Almost\nCertain", y: "Moderate", heat: 1},

    {x: "Almost\nCertain", y: "Major", heat: 2},

    {x: "Almost\nCertain", y: "Extreme", heat: 3}

  ]);

}