Styjun

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)

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