1 files changed, 47 insertions, 3 deletions
diff --git a/modules-available/statistics/templates/summary.html b/modules-available/statistics/templates/summary.html
index 3ede7bc5..751a9bed 100644
--- a/modules-available/statistics/templates/summary.html
+++ b/modules-available/statistics/templates/summary.html
@@ -23,17 +23,61 @@
 		</div>
 	</div>
 	<div>
+		{{#json}}
 		<canvas id="usagehist" style="width:100%;height:150px"></canvas>
 		<script type="text/javascript">
 			document.addEventListener("DOMContentLoaded", function() {
+
+				var markings = {{{markings}}};
+				var markMax = Math.max(...markings) * 3;
+				var showLegend = markMax > 0;
+				if (markMax < 8) markMax = 8;
+
+				var oldDraw = Chart.prototype._drawDatasets;
+
+				Chart.prototype._drawDatasets = function () {
+					if (this.chartArea) {
+						var ctx = this.ctx;
+						var chartArea = this.chartArea;
+
+						var meta = this.getDatasetMeta(0);
+
+						ctx.save();
+						var end = Math.min(meta.data.length, markings.length) - 1;
+						for (var i = 0; i < end; ++i) {
+							var start = meta.data[i].x;
+							var stop = meta.data[i+1].x;
+							ctx.fillStyle = 'rgba(16, 64, 255, ' + (!!markings[i] * .05 + markings[i] / markMax) + ')';
+							ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
+						}
+						ctx.restore();
+					}
+
+					// Perform regular chart draw
+					oldDraw.call(this);
+				};
+
 				var data = {{{json}}};
 				var sel = false;
-				new Chart(document.getElementById('usagehist').getContext('2d')).Line(data, { 
+				new Chart(document.getElementById('usagehist').getContext('2d'), {type: 'line', data: data, options: {
+					responsive: true,
 					animation: false,
-					pointHitDetectionRadius: 5
-				});
+					pointRadius: 0,
+					pointHitRadius: 6,
+					interaction: { mode: 'index' },
+					plugins: {
+						subtitle: {
+							display: showLegend,
+							text: '{{lang_graphLectureTitle}}',
+							position: 'bottom',
+						},
+						legend: {position: 'left' },
+					}
+				}});
+
 			}, false);
 		</script>
+		{{/json}}
 	</div>
 </div>