Refresh CURTIME() value in JQuery Script

Question

I am learning to build a PV Power Plant Monitoring Website . My hardware feeding data to my SQL server per 10 seconds. Now, I have to represent those logged data in the form of gauge that refresh its value for every 10 seconds. But the problem is, I couldn't get my value to be refreshed by current time.

I am using mysql query CURTIME() to match computer time. But when I reapplied the query, CURTIME() doesn't refresh to actual current time. It's sticking to the last reading of CURTIME() when I load the page. So, CURTIME() refreshed only after I reload the page.

My question is, how to refresh the value of CURTIME() in the mysql query without needing to reload the page? Here is my script FYI:

<script>
  var g1, g2, g3, g4, g5, g6;
  var pvvol  = <?php include 'pvvol.php';?>;
  var pvcur  = <?php include 'pvcur.php';?>;
  var batvol = <?php include 'batvol.php';?>;
  var batcur = <?php include 'batcur.php';?>;
  var chgcur = <?php include 'chgcur.php';?>;
  var irrad  = <?php include 'irrad.php';?>;

  window.onload = function(){
    var g1 = new JustGage({
      id: "g1", 
      value: pvvol, 
      min: 0,
      max: 80,
      title: "PV Voltage",
      label: "Volt"
    });

    var g2 = new JustGage({
      id: "g2", 
      value: pvcur, 
      min: 0,
      max: 30,
      title: "PV Current",
      label: "Ampere"
    });

    var g3 = new JustGage({
      id: "g3", 
      value: chgcur, 
      min: 0,
      max: 80,
      title: "Charge Current",
      label: "Ampere"
    });

    var g4 = new JustGage({
      id: "g4", 
      value: batvol, 
      min: 0,
      max: 30,
      title: "Battery Voltage",
      label: "Volt"
    });

    var g5 = new JustGage({
      id: "g5", 
      value: batcur, 
      min: -50,
      max: 50,
      title: "Battery Current",
      label: "Ampere"
    });

    var g6 = new JustGage({
      id: "g6", 
      value: irrad, 
      min: 0,
      max: 1200,
      title: "Irradiance",
      label: "Watt / Sqm"
    });

    setInterval(function() {
      g1.refresh(pvvol);
      g2.refresh(pvcur);          
      g3.refresh(chgcur);
      g4.refresh(batvol);
      g5.refresh(batcur);
      g6.refresh(irrad);
    }, 2500);
  };
</script>

Answer 1

The PHP code that is making the call to your database will only run once (every time the page is requested/refreshed). This means that the data from the database will never be updated, even though the JavaScript update code runs every 2.5 seconds.

You will need to use an AJAX call to get the most up-to-date information from the database. Your JavaScript/jQuery code makes an AJAX call to a PHP file that returns the up-to-date information from the database. This information is then processed by your JS/jQuery and g1 to g6 can be refreshed with the new data.

AJAX code example

PHP code: getGaugeData.php

This file is called by the AJAX request. It's job is to get data from the database and return it to the JavaScript code in a simple JSON format.

NOTE: I'm assuming that each of the included PHP files now creates PHP variables ( pvvol, pvcur, batvol, batcur, chgcur, irrad ) and assigns them values.

<?php
    /*
     * This PHP resource is only called via AJAX - it returns data in JSON format!
     */

    //Include PHP files that get the data
    //Each include file should define a PHP variable with the same name as the file: pvvol, pvcur, batvol, batcur, chgcur, irrad
    include 'pvvol.php';
    include 'pvcur.php';
    include 'batvol.php';
    include 'batcur.php';
    include 'chgcur.php';
    include 'irrad.php';

    //Create associative array of the data
    $data = array(
        'pvvol' => $pvvol,
        'pvcur' => $pvcur,
        'batvol' => $batvol,
        'batcur' => $batcur,
        'chgcur' => $chgcur,
        'irrad' => $irrad
    );

    //Convert the data into a JSON format string
    $output = json_encode($data);

    //Return the JSON data to the JS code
    echo $output;
    exit;
?>

JavaScript code

setInterval(function() {

    //Set up AJAX call to getGaugeData.php
    $.getJSON('getGaugeData.php').done(function(data) {

        //Use the AJAX data to refresh the gauges
        g1.refresh(data.pvvol);
        g2.refresh(data.pvcur);
        g3.refresh(data.chgcur);
        g4.refresh(data.batvol);
        g5.refresh(data.batcur);
        g6.refresh(data.irrad);

    });

}, 2500);

Answer 2

If you want to get fresh data from your server without reloading the page I suggest that you look into ajax.

ajax is used to make calls to your server from javascript.