From 91c1f7c3bb010a7611fec32763c613dacede0983 Mon Sep 17 00:00:00 2001 From: Markus Zolliker Date: Wed, 25 Sep 2024 09:23:04 +0200 Subject: [PATCH] show time labels only on first chart --- client/jsFiles/SEAWebClientGraphics.js | 248 +++++++++++++------------ 1 file changed, 125 insertions(+), 123 deletions(-) diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index f657fa6..7d9dacb 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/client/jsFiles/SEAWebClientGraphics.js @@ -1364,135 +1364,137 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){ let ctx = canvas.getContext("2d"); let self = this; - chart = new Chart(ctx, - { - type: 'scatter', - options: { - responsive: true, - maintainAspectRatio: false, - animation:{duration:0}, - scales: { - y:{ - beginAtZero: false, - ticks:{ - mirror: true, - padding: -10, - callback: function(label, index, labels) { - if(index == 0 || index == labels.length-1) - return ""; - return strFormat(label); - } - }, - grid:{drawTicks:false}, - title: false, //Former scaleLabel - type: scaleType, - position: 'right', - afterBuildTicks: function(axis) { - let ticks = axis.ticks - if (scaleType == "logarithmic" && ticks.length <= 4) { - y1 = ticks[0]; - y0 = ticks.slice(-1)[0]; - span = y1 - y0; - step = Math.abs(span * 0.3).toExponential(0); - if (step[0] > '5') { - step = '5' + step.substr(1); - } else if (step[0] > '2') { - step = '2' + step.substr(1); - } - step = Number.parseFloat(step); - ticks = [y1]; - for (let yt = Math.ceil(y1 / step) * step; yt > y0; yt -= step) { - ticks.push(yt); - } - ticks.push(y0); - } - return ticks - }, - }, - x:{ - title: false, // former scaleLabel - type: 'time', - time: { - displayFormats: {'millisecond': 'HH:mm:ss.SSS', 'second': 'HH:mm:ss', 'minute': 'HH:mm','hour': 'EEE d. HH:mm', 'day': 'EE d.', 'week': 'd. MMM yy', 'month': 'MMM yy'}, - }, - ticks: { - padding: -20, - // stepSize: 180000, - autoSkip: true, - maxRotation: 0, - // callback not used, this is better done in afterBuildTicks - }, - afterBuildTicks: function(axis) { - let ticks = axis.ticks - - if (!ticks || ticks.length <= 2) return ticks; - first = ticks[0].value; - step = ticks[1].value - first; - offset = (first - axis._adapter.startOf(first, 'day')) % step; - let result = []; - let v = axis.min; - for (tick of ticks) { - v = tick.value - offset; - if (v > axis.min + step / 2) { - result.push({value: v, major: false}); - } - } - v += step; - if (v < axis.max) result.push({value:v, major: false}); - axis.ticks = result; - // return result; - }, - beforeFit: function(axis) { // called after ticks are autoskipped - prevday = ''; - for (tick of axis.ticks) { - s = tick.label.split(' '); - if (s.length == 3) { // format with day - // show date only on first label of a day - day = s.slice(0, 2).join(' '); - if (day != prevday) { - prevday = day; - } else { - tick.label = s[2]; // time - } - } - } - }, - grid:{drawTicks:false}, + let chart_options = { + responsive: true, + maintainAspectRatio: false, + animation:{duration:0}, + scales: { + y:{ + beginAtZero: false, + ticks:{ + mirror: true, + padding: -10, + callback: function(label, index, labels) { + if(index == 0 || index == labels.length-1) + return ""; + return strFormat(label); } }, - plugins:{ - tooltip: false, - legend: false, - zoom:{ - pan: { - enabled: true, - mode: 'xy', - speed: 10, - threshold: 10, - onPan: function({chart}) { graphs.panCallback(chart.graph);}, - onPanComplete: function({chart}){graphs.updateAuto();}, - }, - zoom: { - wheel:{ - enabled: true - }, - pinch:{ - enabled: true - }, - mode: isTouchDevice ? 'xy': 'x', - speed: 0.1, - sensitivity: 1, - onZoom: function({chart}) { graphs.zoomCallback(chart.graph);}, - onZoomComplete: function({chart}){graphs.onZoomCompleteCallback()}, + grid:{drawTicks:false}, + title: false, //Former scaleLabel + type: scaleType, + position: 'right', + afterBuildTicks: function(axis) { + let ticks = axis.ticks + if (scaleType == "logarithmic" && ticks.length <= 4) { + y1 = ticks[0]; + y0 = ticks.slice(-1)[0]; + span = y1 - y0; + step = Math.abs(span * 0.3).toExponential(0); + if (step[0] > '5') { + step = '5' + step.substr(1); + } else if (step[0] > '2') { + step = '2' + step.substr(1); + } + step = Number.parseFloat(step); + ticks = [y1]; + for (let yt = Math.ceil(y1 / step) * step; yt > y0; yt -= step) { + ticks.push(yt); + } + ticks.push(y0); + } + return ticks + }, + }, + x:{ + title: false, // former scaleLabel + type: 'time', + time: { + displayFormats: {'millisecond': 'HH:mm:ss.SSS', 'second': 'HH:mm:ss', 'minute': 'HH:mm','hour': 'EEE d. HH:mm', 'day': 'EE d.', 'week': 'd. MMM yy', 'month': 'MMM yy'}, + }, + ticks: { + padding: -20, + // stepSize: 180000, + autoSkip: true, + maxRotation: 0, + // callback not used, this is better done in afterBuildTicks + }, + afterBuildTicks: function(axis) { + let ticks = axis.ticks + + if (!ticks || ticks.length <= 2) return ticks; + first = ticks[0].value; + step = ticks[1].value - first; + offset = (first - axis._adapter.startOf(first, 'day')) % step; + let result = []; + let v = axis.min; + for (tick of ticks) { + v = tick.value - offset; + if (v > axis.min + step / 2) { + result.push({value: v, major: false}); } } - - } - - + v += step; + if (v < axis.max) result.push({value:v, major: false}); + axis.ticks = result; + // return result; + }, + beforeFit: function(axis) { // called after ticks are autoskipped + prevday = ''; + for (tick of axis.ticks) { + s = tick.label.split(' '); + if (s.length == 3) { // format with day + // show date only on first label of a day + day = s.slice(0, 2).join(' '); + if (day != prevday) { + prevday = day; + } else { + tick.label = s[2]; // time + } + } + } + }, + grid:{drawTicks:false}, } + }, + plugins:{ + tooltip: false, + legend: false, + zoom:{ + pan: { + enabled: true, + mode: 'xy', + speed: 10, + threshold: 10, + onPan: function({chart}) { graphs.panCallback(chart.graph);}, + onPanComplete: function({chart}){graphs.updateAuto();}, + }, + zoom: { + wheel:{ + enabled: true + }, + pinch:{ + enabled: true + }, + mode: isTouchDevice ? 'xy': 'x', + speed: 0.1, + sensitivity: 1, + onZoom: function({chart}) { graphs.zoomCallback(chart.graph);}, + onZoomComplete: function({chart}){graphs.onZoomCompleteCallback()}, + } + } + } - ) + + + } + + if (gindex != 0) { + // show time labels only on first chart + chart_options.scales.x.ticks.callback = function () { return ''; } + } + + chart = new Chart(ctx, {type: 'scatter', options: chart_options}) //console.log('create legend') let legend = document.createElement('div');