html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // create heatMap

  var chart = anychart.heatMap([

    {x: "Rare",             y: "Insignificant",  heat: 0, fill: "#9ACD32"},

    {x: "Rare",             y: "Minor",          heat: 0, fill: "#9ACD32"},

    {x: "Rare",             y: "Moderate",       heat: 0, fill: "#9ACD32"},

    {x: "Rare",             y: "Major",          heat: 0, fill: "#9ACD32"},

    {x: "Rare",             y: "Extreme",        heat: 0, fill: "#9ACD32"},

    {x: "Unlikely",         y: "Insignificant",  heat: 0, fill: "#9ACD32"},

    {x: "Unlikely",         y: "Minor",          heat: 0, fill: "#9ACD32"},

    {x: "Unlikely",         y: "Moderate",       heat: 0, fill: "#9ACD32"},

    {x: "Unlikely",         y: "Major",          heat: 1, fill: "#FFFF00"},

    {x: "Unlikely",         y: "Extreme",        heat: 1, fill: "#FFFF00"},

    {x: "Possible",         y: "Insignificant",  heat: 0, fill: "#9ACD32"},

    {x: "Possible",         y: "Minor",          heat: 0, fill: "#9ACD32"},

    {x: "Possible",         y: "Moderate",       heat: 1, fill: "#FFFF00"},

    {x: "Possible",         y: "Major",          heat: 1, fill: "#FFFF00"},

    {x: "Possible",         y: "Extreme",        heat: 1, fill: "#FFFF00"},

    {x: "Likely",           y: "Insignificant",  heat: 0, fill: "#9ACD32"},

    {x: "Likely",           y: "Minor",          heat: 1, fill: "#FFFF00"},

    {x: "Likely",           y: "Moderate",       heat: 1, fill: "#FFFF00"},

    {x: "Likely",           y: "Major",          heat: 2, fill: "#FF6347"},

    {x: "Likely",           y: "Extreme",        heat: 2, fill: "#FF6347"},

    {x: "Almost\nCertain",  y: "Insignificant",  heat: 0, fill: "#9ACD32"},

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

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

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

    {

      x: "Almost\nCertain",

      y: "Extreme",

      heat: 3,

      fill: "#FF0000",

      hoverFill: "#AA0000",

      stroke: {color: "#AA0000"},

      hoverStroke: {color: "#550000"},

      hoverLabel:{fontColor: "#FFF"}

    }

  ]);

​

  chart.title("Risk Matrix in Project Server");

​

  // adjust chart labels

  var labels = chart.labels();

  // display labels

  labels.enabled(true);

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

  chart.container("container");

  chart.draw();

});