- Chart Gallery
- Heat Map Charts
- Risk Matrix
Risk Matrix
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "heat-map",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 17,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#5d1b3e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Risk Matrix in Project Server",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 20,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"useHtml": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 13,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"width": null,
"height": null,
"align": "center",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": "#fce4ec",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 10,
"top": 10,
"bottom": 10,
"right": 10
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 15,
"top": 20,
"bottom": 15,
"right": 25
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"legend": {
"zIndex": 200,
"enabled": false,
"fontSize": 13,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#5d1b3e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "bottom",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "...",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"inverted": false,
"itemsLayout": "horizontal",
"iconSize": 15,
"width": null,
"height": null,
"maxWidth": null,
"maxHeight": null,
"position": "top",
"positionMode": "outside",
"drag": false,
"itemsFormat": null,
"titleFormat": null,
"itemsHAlign": "left",
"itemsSpacing": 15,
"itemsSourceMode": "categories",
"hoverCursor": "pointer",
"iconTextSpacing": 5,
"align": "center",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 10,
"top": 0,
"bottom": 10,
"right": 10
},
"background": {
"enabled": false
},
"title": {
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#5d1b3e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Title text",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"titleSeparator": {
"zIndex": 1,
"enabled": false,
"fill": "#fce4ec",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"paginator": {
"zIndex": 30,
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"orientation": "right",
"layout": "horizontal",
"background": {
"enabled": false
},
"padding": {
"left": 5,
"top": 0,
"bottom": 0,
"right": 0
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
}
},
"tooltip": {
"enabled": false,
"title": {
"zIndex": 1,
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": "#fce4ec",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 10,
"top": 10,
"bottom": 10,
"right": 10
}
},
"background": {
"zIndex": 0,
"enabled": true
}
}
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "none"
},
"maxBubbleSize": "20%",
"minBubbleSize": "5%",
"maxPointWidth": "100%",
"minPointLength": 0,
"baseline": 0,
"palette": {
"type": "distinct",
"items": [
"#f8bbd0",
"#ce93d8",
"#ab47bc",
"#d81b60",
"#880e4f",
"#ffd600",
"#ff6e40",
"#03a9f4",
"#5e35b1",
"#1976d2"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"diagonal-cross",
"pentagon",
"cross",
"v-line",
"star5",
"star4",
"trapezium",
"star7",
"star6",
"star10"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"normal": {
"stroke": "#fff",
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": true,
"minFontSize": 14
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "center",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"type": "circle",
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"fill": "#545f69",
"stroke": {
"color": "#fff",
"thickness": 6
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": true,
"fontColor": "#fff"
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": null,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#ffffff",
"thickness": 2
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": null,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"xScale": 0,
"yScale": 1,
"data": [
{
"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"
}
],
"isVertical": false,
"xAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": "none",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "top",
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "X-Axis",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": false,
"stroke": "#d7cacc",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#f1eaeb",
"length": 4,
"position": "outside"
},
"scale": 0
}
],
"yAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": "none",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "left",
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Y-Axis",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true,
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 15
}
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": false,
"stroke": "#d7cacc",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#f1eaeb",
"length": 4,
"position": "outside"
},
"scale": 1
}
],
"labelsDisplayMode": "drop",
"colorScale": 2,
"scales": [
{
"type": "ordinal",
"inverted": false,
"ticks": {
"maxCount": 100
},
"mode": "discrete"
},
{
"type": "ordinal",
"inverted": true,
"ticks": {
"maxCount": 100
},
"mode": "discrete"
},
{
"type": "ordinal-color",
"inverted": false,
"ticks": {
"maxCount": 100
}
}
],
"crossing": {
"stroke": "none"
},
"quarters": {},
"yCrossAxes": [
0
],
"xCrossAxes": [
0
],
"xScroller": {
"zIndex": 35,
"enabled": false,
"height": 16,
"minHeight": null,
"maxHeight": null,
"orientation": "bottom",
"inverted": false,
"autoHide": false,
"fill": "#f4efef",
"selectedFill": "#ece1e3",
"outlineStroke": "none",
"allowRangeChange": true,
"thumbs": {
"normal": {
"fill": "#E9E9E9",
"stroke": "#7c868e"
},
"hovered": {
"fill": "#d7cacc",
"stroke": "#beafb1"
},
"enabled": true,
"autoHide": false
},
"position": "after-axes"
},
"yScroller": {
"zIndex": 35,
"enabled": false,
"height": 16,
"minHeight": null,
"maxHeight": null,
"orientation": "right",
"inverted": true,
"autoHide": false,
"fill": "#f4efef",
"selectedFill": "#ece1e3",
"outlineStroke": "none",
"allowRangeChange": true,
"thumbs": {
"normal": {
"fill": "#E9E9E9",
"stroke": "#7c868e"
},
"hovered": {
"fill": "#d7cacc",
"stroke": "#beafb1"
},
"enabled": true,
"autoHide": false
},
"position": "after-axes"
},
"xZoom": {
"startRatio": 0,
"endRatio": 1,
"continuous": true
},
"yZoom": {
"startRatio": 0,
"endRatio": 1,
"continuous": true
}
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-heatmap.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/light_glamour.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('lightGlamour');
// 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'
}
];
}
</script>
</body>
</html>
Heat Map Chart looks like a table which cells are colored in accordance to the range of values they belong to. Usually, the higher the value (significance) is, the brighter the color of the cell. These charts are being predominantly used in biology, web-analytics and other analytics, geography or anywhere else where it’s necessary to show the hierarchy of values in some categories.
This Chart demonstrates the risk matrix of server heating because of an error. The higher the likelyhood is and the worse are the consequences, the higher is residual risk; the gradation of the risk is represented by colors of the Heat Map. The cell representing the maximum (extreme) possibility of server breaking is colored in bright orange and the cell representing the lowest possibility of this is colored in light blue. There are two axes; the vertical one holds the danger rates of an error consequence (getting higher to the bottom) and the horizontal one holds the rates of this error likelyhood. There are tooltips enabled in the Chart, so hover a point to see all its params (residual risk, danger rate of a consequence and the rate of the error likelyhood).