This question already has an answer here:
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.
</div>
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();
}