html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // Creates Heat Map

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

​

  // Sets chart settings and hover chart settings

  chart.stroke('#fff');

  chart

    .hovered()

    .stroke('6 #fff')

    .fill('#545f69')

    .labels({ fontColor: '#fff' });

​

  // Sets selection mode for single selection

  chart.interactivity().selectionMode('none');

​

  // Sets title

  chart

    .title()

    .enabled(true)

    .text('Risk Matrix in Project Server')

    .padding([0, 0, 20, 0]);

​

  // variable with list of labels

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

  // Sets adjust chart labels

  chart

    .labels()

    .enabled(true)

    .minFontSize(14)

    // Formats labels

    .format(function () {

      // replace values with words for points heat

      return namesList[this.heat];

    });

​

  // Sets Axes

  chart.yAxis().stroke(null);

  chart.yAxis().labels().padding([0, 15, 0, 0]);

  chart.yAxis().ticks(false);

  chart.xAxis().stroke(null);

  chart.xAxis().ticks(false);

​

  // Sets Tooltip

  chart.tooltip().title().useHtml(true);

  chart

    .tooltip()

    .useHtml(true)

    .titleFormat(function () {

      return '<b>' + namesList[this.heat] + '</b> Residual Risk';

    })

    .format(function () {

      return (

        '<span style="color: #CECECE">Likelihood: </span>' +

        this.x +

        '<br/>' +

        '<span style="color: #CECECE">Consequence: </span>' +

        this.y

      );

    });

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});

​

function getData() {

  return [

    {

      x: 'Rare',

      y: 'Insignificant',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Rare',

      y: 'Minor',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Rare',

      y: 'Moderate',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Rare',

      y: 'Major',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Rare',

      y: 'Extreme',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Unlikely',

      y: 'Insignificant',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Unlikely',

      y: 'Minor',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Unlikely',

      y: 'Moderate',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Unlikely',

      y: 'Major',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Unlikely',

      y: 'Extreme',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Possible',

      y: 'Insignificant',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Possible',

      y: 'Minor',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Possible',

      y: 'Moderate',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Possible',

      y: 'Major',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Possible',

      y: 'Extreme',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Likely',

      y: 'Insignificant',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Likely',

      y: 'Minor',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Likely',

      y: 'Moderate',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Likely',

      y: 'Major',

      heat: 2,

      fill: '#ef6c00'

    },

    {

      x: 'Likely',

      y: 'Extreme',

      heat: 2,

      fill: '#ef6c00'

    },

    {

      x: 'Almost\nCertain',

      y: 'Insignificant',

      heat: 0,

      fill: '#90caf9'

    },

    {

      x: 'Almost\nCertain',

      y: 'Minor',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Almost\nCertain',

      y: 'Moderate',

      heat: 1,

      fill: '#ffb74d'

    },

    {

      x: 'Almost\nCertain',

      y: 'Major',

      heat: 2,

      fill: '#ef6c00'

    },

    {

      x: 'Almost\nCertain',

      y: 'Extreme',

      heat: 3,

      fill: '#d84315'

    }

  ];

}