Home » Php » HTML5 meter dynamic value – jQuery and PHP

HTML5 meter dynamic value – jQuery and PHP

Posted by: admin February 25, 2020 Leave a comment

Questions:

I have a .dat file with a number inside it which is dynamically updated.

I have this .php file which reads the .dat file:

PHP:

<?php
    $f = fopen("http://127.0.0.1/cpuload0.dat", "r");
    echo fgets($f); 
    fclose($f);
?>

Then with a jQuery script I dynamically update an html div:

jQuery:

<script>        
        $(document).ready(function(){
             setInterval(function() {
             $("#cpuload0").load("cpuload0.php");
             }, 1000);
        });
</script>

HTML:

div id = "cpuload0"></div>

With this I get the number on the html page.

Now I would like to update an html5 meter with the same value.

HTML code for the meter:

<meter min="0" low="10" optimum="50" high="90" max="100" id="cpuload0meter"></meter>

If in the jQuery script I use these lines:

var cpuload = "type any number"
document.getElementById("cpuload0meter").setAttribute("value", cpuload);

I get the meter updated with the number manually typed.

The question is: how can I use the variable extracted with the .php file and create a jQuery variable to dynamically update the meter?

How to&Answers: