Heatmap Template

Created using Highcharts

by sparksterz

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 1000px; margin: 0 auto"></div>

JavaScript

//Calculate our data for the chart
var xScale = 7;
var yScale = 6;
var arrayBasedOnXScaleWithYValues = [[1,3,4,3,3,5,5],[3,3,3,4,2,4,3],[3,3,2,3,2,5,3],[2,3,2,3,2,1,1],[2,5,1,3,2,5,1],[4,3,3,5,1,5,1],[2,5,4,3,2,4,0],[1,5,1,4,4,4,0],[4,3,2,4,1,4,0],[1,3,3,3,3,2,4],[4,5,2,4,5,5,1],[3,3,3,3,2,5,4],[4,3,4,5,5,2,3],[2,3,1,3,2,4,5],[2,5,1,1,3,4,2],[5,3,3,3,1,5,3],[2,5,2,3,5,5,1],[1,3,4,3,1,5,2],[1,3,1,2,3,2,3],[3,3,2,3,3,2,3],[3,5,3,5,0,0,0],[2,5,3,3,4,5,2],[3,5,3,1,4,5,3],[3,5,2,3,1,2,2],[5,5,3,1,3,2,0],[1,5,1,1,4,5,1],[1,5,2,4,1,4,2],[5,5,4,4,1,1,0],[3,3,4,0,0,5,0],[3,3,3,3,4,5,5],[5,1,3,5,1,2,1],[3,5,2,3,3,5,1],[1,5,2,3,3,5,1],[1,5,1,3,3,4,0],[3,5,2,1,3,5,0],[3,5,1,1,4,5,1],[0,1,1,0,0,5,5],[5,3,1,3,1,4,3],[1,5,2,5,1,4,5],[5,5,1,3,3,4,0],[1,3,1,4,1,2,5],[0,5,3,3,1,4,3],[0,3,2,3,1,5,5],[3,3,3,3,3,4,1],[1,3,1,5,1,2,5],[0,5,1,0,0,5,0],[1,5,1,1,3,2,3],[5,5,2,2,4,2,1],[1,5,2,3,3,5,0],[4,5,1,1,3,5,1],[1,5,2,3,4,5,0],[1,5,2,1,1,4,1],[3,5,3,3,3,5,1],[5,3,1,0,0,5,2],[5,3,2,3,2,5,3],[3,5,2,3,1,2,0],[1,5,2,4,1,4,1],[3,3,1,1,3,2,1],[5,3,0,0,0,1,0],[3,5,2,3,1,5,2],[1,1,5,3,1,1,1],[3,5,3,1,5,1,1],[3,5,2,3,2,2,1],[5,3,5,4,4,4,1],[1,3,3,3,3,5,3],[5,1,1,0,0,5,5],[3,5,3,2,4,5,2],[1,3,3,3,4,5,1],[2,3,2,4,2,5,3],[1,5,1,3,1,4,1],[3,5,2,5,1,4,0],[3,3,3,1,2,5,3],[0,5,3,0,0,5,1],[1,5,2,3,1,2,1],[3,3,3,3,3,5,3],[3,5,3,3,1,4,1],[3,5,1,2,1,1,1]];

function create2DimensionalHeatMap(xScale, yScale, arrayBasedOnXScaleWithYValues)
{
	//Basically we want a heat map like this:
	
	//Where our X scale is our question
	//Our Y scale is their answer to the question
	//and the value in the cell is how many people answered that way
	
	// 0 20 2 6 17 3
	// 10 3 5 14 8 9
	// 11 8 12 6 6 2
	// 2 13 5 16 7 1
	// 11 8 12 6 6 11
	// 5 10 3 12 8 4
	
	//Set up our heat map ranges
	var xMax = xScale;
	var yMax = yScale;
	var heatMap = new Array();
	
	//Initialize all cells to zero
	for (i=0; i<xMax; i++) {
		heatMap[i] = new Array();
		for (j=0; j<yMax; j++) {
			heatMap[i][j] = 0;
		}
	}
	
	for(let arrayEntry of...