How to update pie chart with dynamic values?

Question

this is my code:

<?php
$pfstatetext = get_mypfstate();
$cpuusage= cpu_usage();
?>
<script>
var myVar=setInterval(function(){myTimer()},10000);

function myTimer() {
    var ctx2 = document.getElementById("chart-area2").getContext("2d"); 
    var myPie2 = new Chart(ctx2).Pie(pieData2);
}
</script>
<div id="show">
<canvas id="chart-area2" width="300" height="300"/>
</div>

<script>

    var pieData2 = [
            {
                value: <?= $pfstatetext;?>,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red :"
            },
            {
                value: <?= $cpuusage; ?>,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];
window.onload = function(){
            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            var myPie2 = new Chart(ctx2).Pie(pieData2);

        };


 </script>

'$pfstatetext' and '$cpuusage' values will be changing automatically. the above code is refreshing the pie chart every 10 seconds. But the values of the pieData2 is displaying the pie chart with the values, generated when the page was loaded, every time the pie chart refreshes after 10 seconds.

When I reload the page the pie chart will be drawn with different and updated values of '$pfstatetext' and '$cpuusage' and these same values will be displayed every time the pie chart refreshes after 10 seconds, but not with changing values of '$pfstatetext' and '$cpuusage'.

So what changes will i have to make so that changing values of '$pfstatetext' and '$cpuusage' will be taken by pie chart every time it refreshes after 10 seconds?

Answer 1

This is because you seem to be misunderstanding the difference between server-side code and client-side code. PHP will execute on the server first followed by your JS code. If you want the values to change you will need to generate an Ajax call to get the new values.

Step 1.

Set up PHP script that returns your '$pfstatetext' and '$cpuusage' values in say, an array or JSON String.

Step 2.

Make Ajax call that hits the file you set up in Step 1 and JavaScript (Client) will then have access to the data returned from your server (PHP).

I can post some code later if you need that, but it is pretty straight forward. Good luck.