The graph will update in :
This is a pretty cool way to update a graph on a webpage without having to refresh the entire page. Javascript is an easy language to get started in, today was my first time using it and within a few hours it was doing what I wanted. This stack overflow question was useful for my needs. I used the code from the first answer and just added in some simple code to refresh the image when the counter reaches 0. I also want to find out how to make the counter wait for the image to load before it continues counting because sometimes there is a lag between the counter hitting zero and the graph updating, so thats the next thing to try out. For now I just want to document what I have got working so far.
The PHP code that produces the graph:
The PHP script used to produce this graph is very similar to my previous post about using jpgraph with MySQL. This time though, the numbers being plotted aren’t coming from a database, they are just random numbers generated using the rand function in PHP.
Here is the PHP script:
<?php // content="text/plain; charset=utf-8"
define('__ROOT__', dirname(dirname(__FILE__)));
require_once ('../jpgraph.php');
require_once ('../jpgraph_line.php');
require_once ('../jpgraph_error.php');
$y_axis = array();
for($i=0; $i<40; $i++) {
$y_axis[] = rand(0,100);
}
$graph = new Graph(800,500);
$graph->img->SetMargin(40,40,40,40);
$graph->img->SetAntiAliasing();
$graph->SetScale("textlin");
$graph->SetShadow();
$graph->title->Set("Example of line centered plot");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$p1 = new LinePlot($y_axis);
$p1->mark->SetType(MARK_FILLEDCIRCLE);
$p1->mark->SetFillColor("red");
$p1->mark->SetWidth(4);
$p1->SetColor("blue");
$p1->SetCenter();
$graph->Add($p1);
$graph->Stroke();
?>
This PHP script outputs an image of a graph. The way this image is included in a webpage using html would be by using the img tag with the src attribute pointing to the PHP script like this:
<img id="myImage" src="https://www.wattnotions.com/jpgraph/src/mygraphs/rand_graph.php" />
Using javascript to refresh the image from the same URL
One cool thing about javascript is how easy it is to mess about with and change the properties of HTML tags. One small note about loading an image from the same URl is that some unique identifier should be appended to the end to force the browser to load the image from source as opposed to using the cache. This is achieved in the example below by putting a ‘?’ at the end of the URL and then adding the date and time. This ensures that every time a new image is loaded it will have a unique URL.
var image = document.getElementById('myImage');
image.src = "https://wattnotions.com/jpgraph/src/mygraphs/rand_graph.php?" + new Date().getTime();
Here is the javascript used to produce the timer and update the graph:
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
var image = document.getElementById('myImage');
image.src = "https://wattnotions.com/jpgraph/src/mygraphs/rand_graph.php?" + new Date().getTime();
}
function countdown() {
// your code goes here
var count = 10;
var timerId = setInterval(function() {
count--;
// console.log(count);
document.getElementById("cdown").innerHTML = count.toString();
if(count == 0) {
changeImage();
count = 10;
}
}, 1000);
}
countdown();
</script>
<p>The graph will update in : <span id="cdown" style="color:blue; font-size:20px"></span></p>
<img id="myImage" src="https://wattnotions.com/jpgraph/src/mygraphs/rand_graph.php?" width="800" height="500" />
</body>
</html>
and thats it! This will be useful for viewing something like sensor data is close to real time. For example if there was an internet connected temperature sensor with the temperature data being placed in a MySQL database a PHP script to get the last 10 minutes worth of entries and then update the graph would be fairly simple to do.
