improve time axis labels
+ change poll interval to 1 sec
This commit is contained in:
l_samenv
@ -1413,29 +1413,14 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
|
||||
title: false, // former scaleLabel
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {'millisecond': 'HH:mm:ss.SSS', 'second': 'HH:mm:ss', 'minute': 'HH:mm','hour': 'dd HH:mm', 'day': 'dd MMM DD', 'week': 'MMM DD', 'month': 'MMM DD'},
|
||||
displayFormats: {'millisecond': 'HH:mm:ss.SSS', 'second': 'HH:mm:ss', 'minute': 'HH:mm','hour': 'EEE HH:mm', 'day': 'EEE dd.', 'week': 'MMM DD', 'month': 'MMM DD'},
|
||||
},
|
||||
ticks: {
|
||||
padding: -20,
|
||||
// TODO : change this callback so it considers that labels are timestamps (currenly considering them as formated). Change the signature (see README.md IMPORTANT)
|
||||
// callback: function(label, index, labels) {
|
||||
// let l = labels.length - 1;
|
||||
// if (index == 0 || index == l) return "";
|
||||
// if (index == 1 || index == l - 1) {
|
||||
// // skip first and / or last label, if too close to the end
|
||||
// let minstep = 0.05 * (labels[l].value - labels[0].value);
|
||||
// if (index == 1) {
|
||||
// if (labels[1].value - labels[0].value < minstep) return "";
|
||||
// } else {
|
||||
// if (labels[l].value - labels[l-1].value < minstep) return "";
|
||||
// }
|
||||
// }
|
||||
// hourofday = /\S+ (\d+:00)/.exec(label);
|
||||
// if (hourofday && hourofday[1] != '00:00') {
|
||||
// return hourofday[1];
|
||||
// }
|
||||
// return label;
|
||||
// }
|
||||
stepSize: 180000,
|
||||
//autoSkip: false,
|
||||
maxRotation: 0,
|
||||
// callback not used, this is better done in afterBuildTicks
|
||||
},
|
||||
afterBuildTicks: function(axis) {
|
||||
let ticks = axis.ticks
|
||||
@ -1447,15 +1432,28 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
|
||||
let start = 0;
|
||||
if (ticks[0].value - offset < axis.min) start = 1;
|
||||
let v = axis.min;
|
||||
result = [{value: v, major: false}];
|
||||
result = []; // [{value: v, major: false}];
|
||||
for (tick of ticks.slice(start)) {
|
||||
v = tick.value - offset;
|
||||
result.push({value: v, major: false});
|
||||
}
|
||||
v += step;
|
||||
if (v < axis.max) result.push({value:v, major: false});
|
||||
result.push({value: axis.max, major: false});
|
||||
return result;
|
||||
// result.push({value: axis.max, major: false});
|
||||
axis.ticks = result;
|
||||
// return result;
|
||||
},
|
||||
afterTickToLabelConversion_disabled: function(axis) {
|
||||
for (tick of axis.ticks) {
|
||||
s = tick.label.split(' ');
|
||||
if (s.length == 3) { // dd MMM HH:mm format
|
||||
if (s[-1] == '00:00') {
|
||||
tick.label = s.slice(0,2).join(' '); // date
|
||||
} else {
|
||||
tick.label = s[2]; // time
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid:{drawTicks:false},
|
||||
}
|
||||
@ -1494,120 +1492,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
|
||||
}
|
||||
)
|
||||
|
||||
// chart = new Chart(ctx, {
|
||||
// type: 'scatter',
|
||||
// options: {
|
||||
// responsive: true,
|
||||
// maintainAspectRatio: false,
|
||||
// animation:{duration:0},
|
||||
// scales: {
|
||||
// yAxes: [{ticks: {
|
||||
// beginAtZero: false,
|
||||
// mirror: true,
|
||||
// padding: -10,
|
||||
// //workaround for proper number format
|
||||
// callback: function(label, index, labels) {
|
||||
// if(index == 0 || index == labels.length-1)
|
||||
// return "";
|
||||
// return strFormat(label);
|
||||
// }
|
||||
// },
|
||||
// gridLines:{drawTicks:false},
|
||||
// scaleLabel: false, // {display: true, labelString: y_label},
|
||||
// type: scaleType,
|
||||
// position: 'right',
|
||||
// afterBuildTicks: function(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
|
||||
// },
|
||||
// }],
|
||||
// xAxes: [{
|
||||
// scaleLabel: false,//{display: true, labelString: x_label},
|
||||
// type: 'time',
|
||||
// time: {
|
||||
// displayFormats: {'millisecond': 'HH:mm:ss.SSS', 'second': 'HH:mm:ss', 'minute': 'HH:mm','hour': 'dd HH:mm', 'day': 'dd MMM DD', 'week': 'MMM DD', 'month': 'MMM DD'},
|
||||
// },
|
||||
// ticks: { padding: -20,
|
||||
// callback: function(label, index, labels) {
|
||||
// let l = labels.length - 1;
|
||||
// if (index == 0 || index == l) return "";
|
||||
// if (index == 1 || index == l - 1) {
|
||||
// // skip first and / or last label, if too close to the end
|
||||
// let minstep = 0.05 * (labels[l].value - labels[0].value);
|
||||
// if (index == 1) {
|
||||
// if (labels[1].value - labels[0].value < minstep) return "";
|
||||
// } else {
|
||||
// if (labels[l].value - labels[l-1].value < minstep) return "";
|
||||
// }
|
||||
// }
|
||||
// hourofday = /\S+ (\d+:00)/.exec(label);
|
||||
// if (hourofday && hourofday[1] != '00:00') {
|
||||
// return hourofday[1];
|
||||
// }
|
||||
// return label;
|
||||
// }
|
||||
// },
|
||||
// afterBuildTicks: function(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 start = 0;
|
||||
// if (ticks[0].value - offset < axis.min) start = 1;
|
||||
// let v = axis.min;
|
||||
// result = [{value: v, major: false}];
|
||||
// for (tick of ticks.slice(start)) {
|
||||
// v = tick.value - offset;
|
||||
// result.push({value: v, major: false});
|
||||
// }
|
||||
// v += step;
|
||||
// if (v < axis.max) result.push({value:v, major: false});
|
||||
// result.push({value: axis.max, major: false});
|
||||
// return result;
|
||||
// },
|
||||
// gridLines:{drawTicks:false},
|
||||
// }],
|
||||
// },
|
||||
// tooltips: false,
|
||||
// legend: false,
|
||||
// pan: {
|
||||
// enabled: true,
|
||||
// mode: 'xy',
|
||||
// speed: 10,
|
||||
// threshold: 10,
|
||||
// onPan: function({chart}) { graphs.panCallback(chart.graph);},
|
||||
// //onPanComplete: function({chart}){graphs.checkReload(chart.graph);redraw()},
|
||||
// onPanComplete: function({chart}){graphs.updateAuto();},
|
||||
// },
|
||||
// zoom: {
|
||||
// enabled: true,
|
||||
// drag: false,
|
||||
// mode: isTouchDevice ? 'xy': 'x',
|
||||
// speed: 0.1,
|
||||
// sensitivity: 1,
|
||||
// onZoom: function({chart}) { graphs.zoomCallback(chart.graph);},
|
||||
// //onZoomComplete: function({chart}){graphs.checkReload(chart.graph);redraw()},
|
||||
// onZoomComplete: function({chart}){graphs.onZoomCompleteCallback()},
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
//console.log('create legend')
|
||||
let legend = document.createElement('div');
|
||||
legend.classList.add('legend');
|
||||
@ -1975,15 +1859,11 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
|
||||
}
|
||||
mainstep *= info[1];
|
||||
}
|
||||
ax["time"] = {"unit":info[0]}
|
||||
// ax.time.unit = info[0];
|
||||
unit = info[0];
|
||||
rstep = Math.round(step / mainstep);
|
||||
ax.time.unit = unit;
|
||||
ax.ticks.stepSize = rstep;
|
||||
|
||||
ax.time["stepSize"] = Math.round(step / mainstep);
|
||||
// ax.time.stepSize = Math.round(step / mainstep);
|
||||
|
||||
//ax.ticks.unit = ax.time.unit;
|
||||
//ax.ticks.stepSize =ax.time.stepSize;
|
||||
//console.log('INFO', step, mainstep, info, ax, ax.time);
|
||||
ax.max = max;
|
||||
ax.min = min;
|
||||
}
|
||||
@ -2131,6 +2011,7 @@ function updateCharts2(graph){
|
||||
console.log('graphs.doUpdates skipped');
|
||||
return;
|
||||
}
|
||||
//console.log('G', graph);
|
||||
for(let key in graph){
|
||||
if (graph[key][0] != null) {
|
||||
// there is at least ONE valid datapoint
|
||||
|
||||
Reference in New Issue
Block a user