diff options
Diffstat (limited to 'modules-available/statistics/templates/summary.html')
-rw-r--r-- | modules-available/statistics/templates/summary.html | 50 |
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> |