How to load an image every second using Javascript

Question

I have programmed a web site in HTML/PHP/Javascript that must display the data stored in a MySQL database every second. It displays it as a graph (PNG image produced by running graph.php).

<!DOCTYPE html>

<html>
 <title>Live Tracking Run'INSA</title>
 
 <head>
  <script type = "text/javascript">
   function refresh() {
    document.getElementById('graph').src = 'graph.php';
   }
  </script>
 </head>

 <p><h2>Visualisation des données</h2></p>
 
 <body onLoad='setInterval(refresh, 1000);'>
  <img id='graph'/>
 </body>
 
</html>

visualiser.php displays the graph well, but graph.php does not update the last one as it is supposed to.

PS: The graph (made with pChart libraries) shows the heart rate as a function of time as well.

On a side note, you should fix up your HTML structure. Basically `` and `` should be the only direct children of ``. So put the `` into the `` and all the visual elements, like `<p></p><h2>...` inside your `` :o)</h2> — agrm, Jan 07 '18 at 13:13

score 2 · Accepted Answer · answered Jan 07 '18 at 10:12

2

Fundamentally that looks fine. I suspect the image isn't being updated because the src isn't changing when you set it the second, third, etc. times. You could either clear it before setting it:

function refresh() {
    var graph = document.getElementById('graph');
    graph.src = '';
    graph.src = 'graph.php';
}

...or give it an ever-changing URL by appending a query string:

function refresh() {
    document.getElementById('graph').src = 'graph.php?' + Date.now();
}

answered Jan 07 '18 at 10:12

T.J. Crowder

1,031,962
187
1,923
1,875

look at this e.g https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb no need to set src to null – jasinth premkumar Jan 07 '18 at 10:29
Awesome ! The second solution works wonderfully ! Thank you very much !! – monchu Jan 07 '18 at 10:30
1

@jasinthpremkumar: That's toggling the src between two distinct values. The OP here is just re-asserting the same src every second. That's why setting `src` to `''` (not `null`) could help in this case (depending on caching settings; it may also be necessary to set it to `''` and then wait to set it to something else until after a `setTimeout(..., 0)`, but the query string solution makes doing that unnecessary). – T.J. Crowder Jan 07 '18 at 10:35

How to load an image every second using Javascript

1 Answers1