使用setinterval函数重新加载javascript变量

Question

I am trying to learn Google Gauges with Google visualization and i want to display the data on the Gauge which changes every second and am loading the variable using a PHP command which assigns the variable as seconds value using shell_exec function, PFB my code

setInterval(function() {
var memory = parseFloat(<?php echo json_encode(shell_exec("date +%S")); ?>);
data.setValue(0, 1, memory);
chart.draw(data, options);
    }, 1000);

after the function is being called after 1 second the value of memory is not being refreshed and taken from parseFloat(<?php echo json_encode(shell_exec("date +%S")); ?>);

Please let me know how do i make the memory variable reload everytime the function is called after 1 second

Thanks in advance

Answer 1

The current issue is that your php code is only executed once, the values are therefore not updated: <?php echo json_encode(shell_exec("date +%S")); ?> <?php echo json_encode(shell_exec("date +%S")); ?> returns a single value, which is not updated periodically from your front end.

I would suggest you to use Javascript's Date instead:

var seconds = new Date() / 1000;

Answer 2

I have done that using two separate files, a PHP file to get the data from a database (in my case) and a javascript file that gets the response from the database using the PHP file and Ajax.

You have to include Ajax adding this to your index.html file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Javascript code:

var mysqlData; // Global variable in witch the data will be stored
setInterval(function() {
    $.ajax({
        url: "php/getdata.php", // file name or path to PHP file
        dataType: "JSON",
        data:{},
        success: function(x){
            mysqlData = x;  // Assign the response to global variable mysqlData
        }
    });
}, 2000); // Run every 2 seconds

Then in the google Gauge function do something like this:

function SOC() {
    // Normal google chart code goes here 
    setInterval(function() {
        data.setValue(0, 1, mysqlData["SOC"] ); // In my case mysqlData is an object which contains the key "SOC"
        formatter.format(data, 1); // Only needs to be done if google.visualization.NumberFormat have been used
        chart.draw(data, options); // To redraw the gauge with new data
    }, 2000);
}

In the PHP file:

<?php
/* Get your data */
echo json_encode($table);
?>

Hope it helps!