InkStitch - data visualization/highcharts-heatmap-js-code
Jump to navigation
Jump to search
JS
Highcharts.chart("container", {
chart: {
type: "heatmap",
inverted: true,
spacingTop: 20,
width: 670,
height: "72%"
},
data: {
csv: document.getElementById("csv").innerHTML
},
title: {
text: "FRIENDLY STIC GRADING HEAT MAP",
align: "left",
style: {fontSize:"25pt", fontWeight:900}
},
// Y-AXIS (in the display since we inverted)
xAxis: {
tickLength: 0,
// set to true to see
labels: { enabled: false },
categories: [
"Dd",
"La",
"Ab",
"Ay",
"Ar",
"Is",
"Rn",
"An",
"Ls",
"Sr",
"En",
"An",
"Az",
"Ra",
"Hi",
"Ei",
"Na",
"Im",
"Lr",
"Ai",
"Ti",
"Ru",
"Os",
"Rt",
"En",
"Ln",
"Hr",
"Ri"
],
min: 0,
max: 27
},
// X AXIS in the display (inverted)
yAxis: {
title: null,
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
min: 1,
max: 12,
// tickInterval: 1,
// tickWidth: 10, // comment out later
reversed: false,
labels: {
// padding: 10,
align: "center",
reserveSpace: true,
style: {
fontSize: "20pt",
fontWeight: "bold",
color: "red"
}
}
},
colorAxis: {
min: 0,
max: 6,
// minColor: "yellow",
// maxColor: "red"
stops: [
[0.1, "Lavender"],
[0.83, "Gold"],
[0.9, "yellow"],
[0.975, "orange"],
[0.99, "red"]
]
},
legend: {
align: "right",
layout: "vertical",
margin: 0,
verticalAlign: "top",
y: 40,
symbolHeight: 365,
itemStyle: {
color: "red",
fontSize: "20pt"
}
},
tooltip: {
formatter: function() {
// return '<b>' + "STU=" + this.point.x + " Grade=" + this.point.y + "</b>";
return (
"<b>" +
this.series.xAxis.categories[this.point.x] +
"</b> has grade <br><b>" +
this.point.value +
"</b> for ex " +
this.point.y +
"</b>"
);
}
},
series: [
{
borderWidth: 2,
colsize: 1,
// below are the labels in the squares
dataLabels: { enabled: false, color: "white" }
}
]
});
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 128mm; width: 178mm;border:1px solid red"></div>
<!-- BE VERY CAREFUL WITH DATA. ONE SINGLE MISTAKE, e.g. "O" instead of "0" and your data will display freakingly -->
<pre id="csv" style="display: none">Name,Ex,Grade
0, 1, 5.75
0, 2, 5.75
0, 3, 5.25
0, 4, 5.5
0, 5, 5.5
0, 6, 5.5
0, 7, 5.5
0, 8, 6
0, 9, 5.5
0, 10, 5.75
0, 11, 6
0, 12, 5.5
1, 1, 6
1, 2, 5.75
1, 3, 5.75
1, 4, 5.25
1, 5, 5.25
1, 6, 5.25
1, 7, 5.75
1, 8, 6
1, 9, 5.75
1, 10, 5.75
1, 11, 6
1, 12, 6
2, 1, 5
2, 2, 5.5
2, 3, 5.25
2, 4, 4.5
2, 5, 5.25
2, 6, 4.5
2, 7, 5.25
2, 8, 5.75
2, 9, 5.75
2, 10, 6
2, 11, 5.75
2, 12, 5.5
3, 1, 6
3, 2, 6
3, 3, 5.5
3, 4, 0
3, 5, 5
3, 6, 5
3, 7, 5.5
3, 8, 5.75
3, 9, 5.5
3, 10, 5.75
3, 11, 5.75
3, 12, 5.75
4, 1, 5.5
4, 2, 5.75
4, 3, 5.5
4, 4, 5
4, 5, 4.75
4, 6, 4.5
4, 7, 5.25
4, 8, 5.75
4, 9, 5
4, 10, 5.25
4, 11, 5
4, 12, 6
5, 1, 6
5, 2, 5.75
5, 3, 6
5, 4, 5.75
5, 5, 5.75
5, 6, 5.75
5, 7, 5.75
5, 8, 5.5
5, 9, 5.75
5, 10, 5.5
5, 11, 5.25
5, 12, 5.75
6, 1, 5.5
6, 2, 6
6, 3, 5.5
6, 4, 5
6, 5, 5.25
6, 6, 5.25
6, 7, 6
6, 8, 5.75
6, 9, 6
6, 10, 5.75
6, 11, 5.75
6, 12, 5.75
7, 1, 6
7, 2, 5.75
7, 3, 5.75
7, 4, 5.75
7, 5, 5.5
7, 6, 5.5
7, 7, 0
7, 8, 0
7, 9, 0
7, 10, 0
7, 11, 0
7, 12, 0
8, 1, 4.5
8, 2, 5.5
8, 3, 5.25
8, 4, 5.25
8, 5, 5.25
8, 6, 5.0
8, 7, 5.5
8, 8, 6
8, 9, 6
8, 10, 6
8, 11, 6
8, 12, 6
9, 1, 6.0
9, 2, 5.5
9, 3, 5.75
9, 4, 5.25
9, 5, 5.25
9, 6, 5.5
9, 7, 5.25
9, 8, 5.5
9, 9, 5.5
9, 10, 5.5
9, 11, 6
9, 12, 5.75
10, 1, 6.0
10, 2, 5.5
10, 3, 6.0
10, 4, 5.5
10, 5, 6.0
10, 6, 6.0
10, 7, 6
10, 8, 5.5
10, 9, 6
10, 10, 5.75
10, 11, 6
10, 12, 6
11, 1, 6.0
11, 2, 5
11, 3, 5.25
11, 4, 5.5
11, 5, 5.25
11, 6, 5.25
11, 7, 4.75
11, 8, 5
11, 9, 5.5
11, 10, 5.5
11, 11, 6
11, 12, 6
12, 1, 5.75
12, 2, 5.5
12, 3, 5.25
12, 4, 5.0
12, 5, 5.5
12, 6, 5.5
12, 7, 5.5
12, 8, 5.75
12, 9, 5.25
12, 10, 5
12, 11, 5.5
12, 12, 5.5
12, 1, 5
13, 2, 5.75
13, 3, 4.5
13, 4, 4.75
13, 5, 4.5
13, 6, 4.5
13, 7, 5.25
13, 8, 5
13, 9, 5
13, 10, 5
13, 11, 5.75
13, 12, 5.75
14, 1, 6.0
14, 2, 5.5
14, 3, 5.5
14, 4, 5.5
14, 5, 5.75
14, 6, 5.25
14, 7, 5.75
14, 8, 5.75
14, 9, 6
14, 10, 6
14, 11, 6
14, 12, 6
15, 1, 6.0
15, 2, 5.75
15, 3, 5.25
15, 4, 5.75
15, 5, 5.75
15, 6, 6.0
15, 7, 5.25
15, 8, 5.75
15, 9, 5.75
15, 10, 5.75
15, 11, 5.75
15, 12, 5.75
16, 1, 6.0
16, 2, 6
16, 3, 5.5
16, 4, 5.0
16, 5, 5.75
16, 6, 5.75
16, 7, 5.25
16, 8, 5.5
16, 9, 5.25
16, 10, 5.25
16, 11, 6
16, 12, 5.75
17, 1, 6.0
17, 2, 6
17, 3, 6.0
17, 4, 5.75
17, 5, 5.75
17, 6, 6.0
17, 7, 6
17, 8, 5.5
17, 9, 5.25
17, 10, 5.25
17, 11, 5.75
17, 12, 0
18, 1, 5.75
18, 2, 5.75
18, 3, 5.75
18, 4, 5.25
18, 5, 5.75
18, 6, 5.75
18, 7, 5.75
18, 8, 5.5
18, 9, 5.75
18, 10, 5.5
18, 11, 5.75
18, 12, 5.75
19, 1, 5.75
19, 2, 5.75
19, 3, 4.75
19, 4, 5.25
19, 5, 5.0
19, 6, 5.25
19, 7, 4.75
19, 8, 5
19, 9, 5.25
19, 10, 5.75
19, 11, 5.75
19, 12, 5.25
20, 1, 6.0
20, 2, 5.25
20, 3, 5.75
20, 4, 5.75
20, 5, 5.75
20, 6, 5.5
20, 7, 4.75
20, 8, 5.5
20, 9, 6
20, 10, 5.75
20, 11, 6
20, 12, 6
21, 1, 6.0
21, 2, 5.5
21, 3, 5.25
21, 4, 4.5
21, 5, 4.75
21, 6, 4.5
21, 7, 4.75
21, 8, 4.75
21, 9, 5.25
21, 10, 5.25
21, 11, 5
21, 12, 5.25
22, 1, 5.75
22, 2, 4.75
22, 3, 5.0
22, 4, 4.75
22, 5, 4.75
22, 6, 5.0
22, 7, 5
22, 8, 5.25
22, 9, 4.75
22, 10, 5.25
22, 11, 5.25
22, 12, 5.25
23, 1, 6.0
23, 2, 6
23, 3, 6.0
23, 4, 5.0
23, 5, 6.0
23, 6, 6.0
23, 7, 5.25
23, 8, 5.25
23, 9, 5.25
23, 10, 5.25
23, 11, 6
23, 12, 5.75
24, 1, 5.25
24, 2, 5.5
24, 3, 5.5
24, 4, 5.75
24, 5, 5.5
24, 6, 5.75
24, 7, 5.75
24, 8, 5.75
24, 9, 6
24, 10, 6
24, 11, 6
24, 12, 6
25, 1, 5.25
25, 2, 5.5
25, 3, 0
25, 4, 0
25, 5, 0
25, 6, 0
25, 7, 5.25
25, 8, 5.5
25, 9, 0
25, 10, 0
25, 11, 0
25, 12, 0
26, 1, 6
26, 2, 5.75
26, 3, 0
26, 4, 0
26, 5, 0
26, 6, 0
26, 7, 5
26, 8, 5.5
26, 9, 6
26, 10, 5.25
26, 11, 6
26, 12, 6
27, 1, 6
27, 2, 6
27, 3, 5.25
27, 4, 4.5
27, 5, 5.5
27, 6, 5.25
27, 27, 0
27, 8, 0
27, 9, 0
27, 10, 0
27, 11, 0
27, 12, 0
</pre>