show time labels only on first chart
This commit is contained in:
l_samenv
@ -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');
|
||||
|
||||
Reference in New Issue
Block a user