Auto Update of this ChartJS Script

Question

I have received this piece of code to generate a chart based on data pulled from "data.php". The chart renders fine without any issues. I cannot seem to get it updating each 5 seconds.

I tried auto refreshing the whole page, but this does not seem to be productive, since you will have to scroll back down to the chart.

$(document).ready(function () {

    /**
     * call the data.php file to fetch the result from db table.
     */
    $.ajax({
        url: "http://xx.xx.xx.xx/link/going2/data.php",
        type: "GET",
        success: function (data) {
            console.log(data);

            var VALUE = {
                iface1: [],
                iface2: [],
                iface3: [],
                iface4: [],
                iface5: [],
                iface6: []
            };

            var len = data.length;

            for (var i = 0; i < len; i++) {
                if (data[i].INTERFACE == "iface1") {
                    VALUE.iface1.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface2") {
                    VALUE.iface2.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface3") {
                    VALUE.iface3.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface4") {
                    VALUE.iface4.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface5") {
                    VALUE.iface5.push(data[i].VALUE);
                } else if (data[i].INTERFACE == "iface6") {
                    VALUE.iface6.push(data[i].VALUE);
                }
            }

            //get canvas
            var t = new Date();
            var ctx = $("#line-chartcanvas");
            var data = {
                labels: [ (Removed to make code shorter)],
                datasets: [{
                    label: "cable-upstream 1/0.0",
                    data: VALUE.iface1,
                    backgroundColor: 'rgba(0, 0, 255, 1.0)',
                    borderColor: 'rgba(0, 0, 255, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/1.0",
                    data: VALUE.iface2,
                    backgroundColor: 'rgba(0, 128, 0, 1.0)',
                    borderColor: 'rgba(0, 128, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/2.0",
                    data: VALUE.iface3,
                    backgroundColor: 'rgba(255, 0, 0, 1.0)',
                    borderColor: 'rgba(255, 0, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/12.0",
                    data: VALUE.iface4,
                    backgroundColor: 'rgba(128, 0, 0, 1.0)',
                    borderColor: 'rgba(128, 0, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/13.0",
                    data: VALUE.iface5,
                    backgroundColor: 'rgba(0, 0, 0, 1.0)',
                    borderColor: 'rgba(0, 0, 0, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, {
                    label: "cable-upstream 1/14.0",
                    data: VALUE.iface6,
                    backgroundColor: 'rgba(128, 0, 128, 1.0)',
                    borderColor: 'rgba(128, 0, 128, 0.5)',
                    fill: false,
                    lineTension: 0,
                    pointRadius: 2
                }, ]
            };

            var options = {
                animation: false,
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Service Group 1",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom"
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            max: 30,
                            min: 15,
                            stepSize: 0.5,
                            callback: function (value, index, values) {
                                return value + " dBmV";
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Signal to Noise'
                        }
                    }]
                }
            };

            var chart = new Chart(ctx, {
                type: "line",
                data: data,
                options: options
            });
        },
        error: function (data) {
            console.log(data);
        }
    });
});

I expect this chart refreshing each 5 seconds (not refreshing the whole page)

Create a timer with [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) — , Mar 22 '19 at 19:27
Why don't you update your chart after a change on the `http://xx.xx.xx.xx/link/going2/data.php` has been made, so you don't consume so may request calls. — Angel Roma, Mar 22 '19 at 21:02
There is a Cron job running each 5 seconds upon activation, this cron job polls snmp details from a device and dumps them in SQL (for history purposes), and uses 1 table to keep last 606 records to populate this table each 5 seconds. SetInterval interval will loop perfectly, but it only creates a new

with the chart info and does not eliminate the old data. after 2 or 3 minutes running the chart will start glitching out once you put mouse over (around 30 charts stacked). I am looking for a way that the script can update but not keep creating more
's — Juliandro Soree, Mar 22 '19 at 21:20
You need to chart.destroy() the previous chart before you can create new Chart(), otherwise it will glitch. https://www.chartjs.org/docs/latest/developers/api.html — Iskandar Reza, Mar 22 '19 at 22:09

score 0 · Answer 1 · answered Mar 22 '19 at 20:45

0

I think you want to refresh the chart every 5 second. so use this code :

window.setInterval(function(){

/// call your function here }, 5000);

To stop the loop you can use

clearInterval()

please check this link reference

answered Mar 22 '19 at 20:45

Razmik Ghookas

118
5

Auto Update of this ChartJS Script

1 Answers1