chartjs-plugin-zoom
chartjs-plugin-zoom copied to clipboard
Data is not distributed through out the whole x axis
I am loading data from the file that contain the time stamp and temperature reading.
Difference between two data point can be same or some time it can be a month or so.
Can we update the x axis scale so it min and max value matches the data received.
call back function of the zoom plug in is
let timer;
function update_chart({ chart }) {
clearTimeout(timer);
timer = setTimeout(() => {
var { min, max } = chart.scales.x;
// console.log(min);
// console.log(max);
console.log("Min Location: ", chart.scales.x2.min);
console.log("Max Location: ", chart.scales.x2.max);
var file_min = chart.scales.x2.min;
var file_max = chart.scales.x2.max;
file_min = makeCorrection(file_min);
file_max = makeCorrection(file_max);
console.log("Zoom level", chart.getZoomLevel());
var total_sample = (file_max - file_min) / 116;
console.log("Totoal samples: ", total_sample);
var offset = (total_sample / 50) * 116;
offset = makeCorrection(offset);
console.log("Offfset: ", offset);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = [], y1 = [], y2 = [], y3 = [], y4 = [], y5 = [], y6 = [], y7 = [], y8 = [], y9 = [], y10 = [];
var tex = this.responseText;
if (tex[0] == ">") {
window.alert(tex);
}
else {
dataray = tex.split('\n');
//console.log(dataray);
dataray.forEach(element => {
dat = element.split(';');
if (dat.length > 5) {
x.push(dat[0]);
y1.push(dat[1]);
y2.push(dat[2]);
y3.push(dat[3]);
y4.push(dat[4]);
y5.push(dat[5]);
y6.push(dat[6]);
y7.push(dat[7]);
y8.push(dat[8]);
y9.push(dat[9]);
y10.push(dat[10]);
}
});
if (x.length > 10)
{
myLineChart.data.labels = x;
myLineChart.data.datasets[0].data = y1;
myLineChart.data.datasets[1].data = y2;
myLineChart.data.datasets[2].data = y3;
myLineChart.data.datasets[3].data = y4;
myLineChart.data.datasets[4].data = y5;
myLineChart.data.datasets[5].data = y6;
myLineChart.data.datasets[6].data = y7;
myLineChart.data.datasets[7].data = y8;
myLineChart.data.datasets[8].data = y9;
myLineChart.data.datasets[9].data = y10;
myLineChart.stop();
myLineChart.update('none');
}
else
{
console.log("Not enoguh data to plot.....");
}
}
}
};
xhttp.open("GET", "/getfile?s=" + file_min + "&e=" + file_max + "&ge=" + offset, true);
xhttp.send();
}, 100);
}
without zoom
after zooming