Updating gauges with AJAX

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Laurie on 25th March 2013
Hi

Very new to php javascript and ajax and through pure frustration and after days of try to work this out myself, I am calling for some assistance on how to change this page so that these three gauges update without refreshing the page, but use AJAX to refresh every 10 seconds. Can someone please assist before I pull all my hair out !!!!!

This is what I have started with to get the basic gauges working. Please can someone give me a step by step explanation of what is needed to implement AJAX.

Many Thanks Laurie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns="www.w3.org/1999/xhtml\">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="10">
<?php
$db="mydatabase";
$link = mysql_connect('', 'mydatabase', 'mypassword');
mysql_query('SET NAMES utf8');
mysql_select_db($db , $link) or die("Couldn't open $db: ".mysql_error());
// Retrieve all the data from the "example" table
$result = mysql_query("SELECT Time, FeedTemp, ReturnTemp, VentTemp FROM temperatures Order By Time desc limit 1");
if ($result !== false) {
$num=mysql_numrows($result);


$timet=mysql_result($result,0,"Time");
$ft=mysql_result($result,0,"FeedTemp");
$rt=mysql_result($result,0,"ReturnTemp");
$vt=mysql_result($result,0,"VentTemp");
}

?>
<title>Boiler Management Control</title>

<script src="www.chalfontvillage.co.uk/javascript/rgraph/RGraph.common.core.js\"></script>
<script src="www.chalfontvillage.co.uk/javascript/rgraph/RGraph.meter.js\"></script>
<script src="www.chalfontvillage.co.uk/javascript/rgraph/RGraph.gauge.js\"></script>
<script>
         window.onload = function ()
         {
   
             var feedtemp = new RGraph.Gauge('feedtemp', 0, 100, [<?php print($ft) ?>, 66]);
             feedtemp.Set('chart.needle.colors', [RGraph.RadialGradient(feedtemp, 125, 125, 0, 125, 125, 25, 'rgba(0,0,0,0)', 'red'),
                                                RGraph.RadialGradient(feedtemp, 125, 125, 0, 125, 125, 25, 'rgba(0,0,0,0)', 'green')]);
             feedtemp.Set('chart.needle.size', [null, 50]);
             feedtemp.Set('chart.colors.ranges', [[50, 75, 'green'],[75, 85, 'yellow'], [85, 100, 'red']])                    
             feedtemp.Set('chart.tickmarks.big',20);
             feedtemp.Set('chart.tickmarks.small', 100);
             feedtemp.Set('chart.title.top', 'Feed Temp.');
             feedtemp.Set('chart.title.bottom', '<?php print($ft) ?>\u00b0C');
             feedtemp.Draw();
            
             var returntemp = new RGraph.Gauge('returntemp', 0, 100, [<?php print($rt) ?>, 50]);
             returntemp.Set('chart.needle.colors', [RGraph.RadialGradient(feedtemp, 125, 125, 0, 125, 125, 25, 'rgba(0,0,0,0)', 'red'),
                                                RGraph.RadialGradient(feedtemp, 125, 125, 0, 125, 125, 25, 'rgba(0,0,0,0)', 'green')]);
             returntemp.Set('chart.needle.size', [null, 50]);
             returntemp.Set('chart.colors.ranges', [[40, 60, 'green'],[60, 75, 'yellow'], [75, 100, 'red']])
             returntemp.Set('chart.tickmarks.big',20);
             returntemp.Set('chart.tickmarks.small', 100);
             returntemp.Set('chart.title.top', 'Return Temp.');
             returntemp.Set('chart.title.bottom', '<?php print($rt) ?>\u00b0C');
             returntemp.Draw();
            
             var venttemp = new RGraph.Gauge('venttemp', 0, 125, <?php print($vt) ?>);
             venttemp.Set('chart.tickmarks.big',25);
             venttemp.Set('chart.tickmarks.small', 125);
             venttemp.Set('chart.title.top', 'Vent Temp.');
             venttemp.Set('chart.title.bottom', '<?php print($vt) ?>\u00b0C');
             venttemp.Draw();
            
            
        
   }
</script>
</head>

<body>
<center><div>
<h1 style="color:#333">Boiler Mangement Control</h1>
<br/>
<div><canvas id="feedtemp" width="250" height="250">[No canvas support]</canvas><canvas id="returntemp" width="250" height="250">[No canvas support]</canvas><canvas id="venttemp" width="250" height="250">[No canvas support]</canvas></div>
<div id="sensemeter98ePUwnPCLa-cHQIeZGTIg"></div>
<script type="text/javascript">
//<![CDATA[
var _smtr = _smtr || {};
_smtr.w = '640';
_smtr.h = '480';
_smtr.s = 'violet';
_smtr.f = 'normal';
(function() {
     var sense = document.createElement('script');
     sense.type = 'text/javascript';
     sense.async = true;
     sense.src = 'open.sen.se/resources/sensemeter/js/?i=98ePUwnPCLa-cHQIeZGTIg';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(sense, s);
})();
//]]>
</script>

</div>
</center>
</body>
</html>

Posted by RGraph support on 25th March 2013
Hi there,

There's a demo of the Gauge being updated via in the demos.


Richard
Posted by Laurie on 25th March 2013
Hi Richard

Thanks for the quick reply. Yes I looked at that but could not work out for the life of me how to integrate that with pulling data from the database.

Regards
Laurie
Posted by RGraph support on 25th March 2013
Hi there,

There's an example of integrating with MySQL here:

www.rgraph.net/docs/integration-with-server-side-scripting.html#mysql



Richard, RGraph Support


  
Posted by Laurie on 25th March 2013
Hi Richard

Thanks again.

I have been able to implement the database part as you can see from my code. My problem is that I can't work out how to combine those 2 examples together. So implementing AJAX update when also picking up data from sql.

Regards
Laurie
Posted by RGraph support on 25th March 2013
Hi there,

As an alternative to AJAX - which requires usually you to set up a new page to get just the data - you may want to look at simply refreshing the page - which you can do with this JavaScript:

<script>
     // Refresh the page every 3 seconds
     setTimeout(function () {location.href = location.href;}, 3000);
</script>


Richard, RGraph Support


  
Posted by Laurie on 25th March 2013
Hi Richard

Do not have a problem setting up another file or whatever is required, just need some guidance on how to do it.

Want to get away from page refresh as thats what I have at the moment.

Regards
Laurie
Posted by RGraph support on 25th March 2013
Hi there,

All you need to is set the extra file up so that it contains the value(s) to be displayed on you Gauge. This file could actually be a PHP file that gets the information from the database and prints it as a comma separated set of values - so that it looks similar to this: www.rgraph.net/sample.csv - though you'll only need a few values and no labels for the Gauge, like this:

0,100,56

So that file should not print out ANY HTML - just those three numbers.

Then request that file via AJAX, parse it (split it into numbers if it's comma separated and convert it to numbers so that it's not text/strings) and then the draw the gauge again.

You might need to call RGraph.Reset(canvas) in-between your calls to .Draw().

Richard
Posted by RGraph support on 25th March 2013
Hi there,

Any joy with that?



Richard, RGraph Support


  
Posted by Laurie on 25th March 2013
Hi Richard

Struggling here. Long, very long learning curve.

I have this as the file that is being called with the data called ftdata.php

<?php
$db="arduino";
$link = mysql_connect('', 'arduino', 'xxxxxx');
mysql_query('SET NAMES utf8');
mysql_select_db($db , $link) or die("Couldn't open $db: ".mysql_error());
// Retrieve all the data from the "example" table
$result = mysql_query("SELECT Time, FeedTemp, ReturnTemp, VentTemp FROM temperatures Order By Time desc limit 1");
if ($result !== false) {
$num=mysql_numrows($result);


$timet=mysql_result($result,0,"Time");
$ft=mysql_result($result,0,"FeedTemp");
$rt=mysql_result($result,0,"ReturnTemp");
$vt=mysql_result($result,0,"VentTemp");

echo $ft;
?>

This is supposed to be outputting something like 16.50

Not sure if this is in the wrong format to be read or if I have to conver it in some way before it willl be recognised here.

var delay = 1500;

             function myAJAXCallback()
             {
                 /**
                 * The responseText is actually a comma separated list of numbers, but converting it to a number with parseInt()
                 * will change it so that it's just the first number
                 */
                 var data = Number(this.responseText);
                
                
                
                 gauge.value = data;
                 RGraph.Effects.Gauge.Grow(gauge);
                
                
                 // Make another AJAX call after the delay (which is in milliseconds)
                 setTimeout(function () {RGraph.AJAX('/ftdata.php', myAJAXCallback);}, delay);
             }

             /**
             * Make the AJAX call every so often (contolled by the delay variable)
             */
             setTimeout(function () {RGraph.AJAX('/ftdata.php', myAJAXCallback);}, delay);

Posted by RGraph support on 25th March 2013
Hi there,

This first thing you need to do is ensure that the ftdata.php file is actually outputting 16.50. If it's not then things won't be working the way you expect. You can check by just goind to the address in your browser - eg:

localhost/ftdata.php

If it shows 16.50 - then move on to looking at your AJAX call. If not, focus on this first.



Richard, RGraph Support


  
Posted by Laurie on 26th March 2013
Hi Richard

Thanks for your help with this. Yes you were right. I now have updating.

On the original gauge I had a static needle set to show the setpoint like this.

var returntemp = new RGraph.Gauge('returntemp', 0, 100, [<?php print($rt) ?>, 50]);

If I keep the static needle, when the the chart updates via ajax both needles disapear. So I tried sending this as the data, echo "[$ft, 60]"; from the data retrieval php file. The pointers still disapear after first update.

So it looks like this feedtemp.value = data; only takes the one value. How can I send the constant value of 60 for the second needle.

Also how do I send a value to the bottom.title to show the temperature value ?

Thanks again for your assistance.

Regards
Laurie
Posted by RGraph support on 26th March 2013
Hi there,

Try viewing the source *in your browser* to see what the output really is.

And you can set the bottom title like this:

obj.Set('chart.title.bottom', '<?php echo $ft ?> litres');

There's also this jsFiddle which may help:

jsfiddle.net/rgraph/mnakG/27/



Richard, RGraph Support


  
Posted by Laurie on 26th March 2013
this is the output to browser from ftdata.php [18.25, 60]

This causes both needles to disappear.

function myAJAXCallback()
             {
                 /**
                 * The responseText is actually a comma separated list of numbers, but converting it to a number with parseInt()
                 * will change it so that it's just the first number
                 */
                 var data = Number(this.responseText);
                
                
                 feedtemp.value = data;
                
                 RGraph.Effects.Gauge.Grow(feedtemp);
                
                
                 // Make another AJAX call after the delay (which is in milliseconds)
                 setTimeout(function () {RGraph.AJAX('/ftdata.php', myAJAXCallback);}, delay);
             }

             /**
             * Make the AJAX call every so often (contolled by the delay variable)
             */
             setTimeout(function () {RGraph.AJAX('/ftdata.php', myAJAXCallback);}, delay);
Posted by RGraph support on 26th March 2013
Hi there,

Your initial values are an array: [18.25, 60] And you're then updating to a number. This won't work with the Grow effect. It might if you just call the redraw method:

RGraph.Redraw();

If you want to use the Grow effect you'll need to keep to arrays:

obj.value = [20,65];


Richard, RGraph Support


  
Posted by the same problem to me on 10th August 2013
hi there,

i also want to use this gauge, and the AJAX call for updating (instead of doing it with javascript), how can i fix this ?

maybe laurie got the answer right now ?

info@upqu.nl
Posted by RGraph support on 12th August 2013
Hi there,

Well there's a basic example of updating a VProgress bar bar with an AJAX request - simply replace the VProgress with a Gauge (don't forget to resize the canvas):

www.rgraph.net/docs/basic-ajax-number.html





Richard, RGraph Support


  
Posted by .. still need some support on 14th August 2013
Richard,


many thanks for your reply, could you please contact me on info@upqu.nl for some extra support, i want to send you some files... still struggeling for seven days and i can't get out of this !!

..please contact me if possible !

thanks

john
Posted by RGraph support on 14th August 2013
Hi there,

Post a URL to an example page that demonstrates the issue,


Richard, RGraph support

Add a reply




« Back to message list