chartjs-plugin-zoom icon indicating copy to clipboard operation
chartjs-plugin-zoom copied to clipboard

Data is not distributed through out the whole x axis

Open arslan437 opened this issue 2 years ago • 0 comments

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 Screenshot 2022-06-13 084809

after zooming Screenshot 2022-06-13 084901

arslan437 avatar Jun 13 '22 04:06 arslan437