Automatically refreshing some PHP Code inside a Java Script

Question

I'm building a small monitoring web page on my Pi to track some power readings from a power meter.

Currently I'm adding some gauges to the setup so it looks all pretty, I'm using canvas-gauges (https://canvas-gauges.com/) to do this.

I have a python script in the background pulling the data from the meter and then saving it to a file every minute, which I am then accessing via PHP to display the data on the web page side. I have the data displaying as text, which auto updates just fine, however the gauge collects the variable on start up and then never changes, see code below:

...Some code...

<?php
            $dataFile = "data/Data.txt";
            if (file_exists($dataFile)) {
                chmod($dataFile, 0777);
            } else {
                echo "The file $dataFile does not exist";
            }
            $dataLines = file($dataFile);
            $volts = $dataLines[3];
            ?>

...Some code...

<div id="voltsR" class="voltsR">
                    <?php echo "The Voltage is $volts V";
                    ?>
</div>
<canvas id="voltG">
</canvas>


...Some Code...

        <script type="text/javascript">
            setInterval("reload();",10000); <!-- time in milliseconds -->
            function reload() {
                $("#voltsR").load(location.href+" #voltsR");
                voltGr.update({value: <?php echo $volts ?>});
            }
        </script>
        <script>
        var voltGr = new RadialGauge ({
        renderTo:"voltG",
        width:"150",
        height:"150",
        units:"V",
        title:"Volts",
        minValue:"0",
        maxValue:"300",
        majorTicks:"0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300",
        minorTicks:"2",
        strokeTicks:"false",
        highlights:[
                { "from": 0, "to": 210, "color": "rgba(166, 28, 28, .25)" },
                { "from": 210, "to": 245, "color": "rgba(28, 166, 28, .25)" },
                { "from": 245, "to": 300, "color": "rgba(166, 28, 28, .25)" }
        ],
        colorPlate:"#222",
        colorMajorTicks:"#f5f5f5",
        colorMinorTicks:"#ddd",
        colorTitle:"#fff",
        colorUnits:"#ccc",
        colorNumbers:"#eee",
        colorNeedleStart:"rgba(240, 128, 128, 1)",
        colorNeedleEnd:"rgba(255, 160, 122, .9)",
        valueBox:"true",
        animationRule:"bounce",
        animationDuration:"500",
        fontValue:"Led",
        animatedValue:"true"});
        voltGr.draw();
        voltGr.value = <?php echo $volts ?>;
        </script>

What happens: What currently happens is that the text section of the code will update every 10 seconds, and after a minute, it will display the newly pulled $volts data from the text file, ie, the first reading will read as "The Voltage is 241.567 V" and after a minute it will read as: "The Voltage is 240.345 V"

The gauge will read the first reading as 241.567 and display this correctly, however after a minute the value does not change to the new value.

If I right click -> inspect the web page, I can see that the $volts variable has not updated in the Java Script section at the bottom, but it has updated in the div VoltsR.

How would I get both values to update accordingly?

Thanks,

Answer 1

Chris G assisted in getting me to where I wanted to be:

I created a separate php file that pulled the data from a file (/data/getData.php), then used the $.get() command to pull this data every so often and update the graph:

setInterval(reload, 10000); // time in milliseconds
function reload() {
  $("#voltsR").load(location.href + " #voltsR");
  $.get("/data/getData.php", function (valString) {
    voltGr.update({ value: parseFloat(valString, 10) });
  });
}