1

I have a problem using mysql database and php when creating a chart.

Here is my code:

<?php session_start(); ?>
<!DOCTYPE html > 
<html> 
<head> 
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" /> 
    <script src="RGraph/libraries/RGraph.common.core.js" ></script> 
    <script src="RGraph/libraries/RGraph.line.js" ></script> 

    <title>Line chart with scrolling effect</title> 

    <meta name="robots" content="noindex,nofollow" /> 
    <meta name="description" content="A chart which updates itself every 250ms producing a scrolling effect" /> 

</head> 
<body> 

    <h1>Line chart with scrolling effect</h1> 

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> 

    <script> 
        data = RGraph.arrayPad([], 500); 
        function DrawGraph () 
        {

            RGraph.clear(document.getElementById("cvs")); 
            RGraph.ObjectRegistry.clear(); 

            var line = new RGraph.Line({ 
                id: 'cvs', 
                data: data, 
                options: { 
                    colors: ['green'], 
                    linewidth: 1, 
                    filled: true, 
                    fillstyle: 'rgba(128,255,128,0.5)', 
                    ymax: 60, 
                    tickmarks: null, 
                    shadow: false, 
                    numxticks: 5,
             labels: ['0s','5s','10s','15s','20s','25s'], 

                 //   labels: ['Now','25s','50s','75s','100s','125s'], 
                    backgroundGridAutofitNumvlines: 5, 
                    textAccessible: true 
                } 
            }).draw() 

<?php

$host="localhost"; 
        $user="root"; 
        $pass="P@ssw0rd"; 
        $dbh = new PDO("mysql:host=$host;dbname=VGW", $user , $pass );

$req="SELECT CPUUtilization from G_info where login_id='".$_SESSION['login_device_id']."' limit 30;";
$stmt=$dbh->query($req);
if(!$stmt)
{
  echo "Lecture impossible";
}
else
{
  $nblig=$stmt->rowCount();
  $ligne=$stmt->fetchObject();
 if ($ligne != null) {
  do
  {
$f=$ligne->CPUUtilization;
?>
 r  = <?php echo $f; ?>; data = [r].concat(data);data.pop(); 
           <?php
  }
  while ($ligne = $stmt->fetchObject()) ;
 }
else
{echo "<br> \n No such result";}

 $stmt->closeCursor();
 $dbh=null; 
  }
  ?>   
            setTimeout(DrawGraph, 2500); 
        } 

        window.onload = function () 
        { 
            DrawGraph(); 
        }; 
    </script> 
</body> 
</html>

The problem is that in the output of the chart:

If the 30 values in the database (table g_info) are modified, the query returns the same result of the first entry in the function. It seems like the $req is not updating the values.

Any idea?

Thanks in advance.

Aline
  • 11
  • 1

1 Answers1

0

the problem is DrawGraph simply draws the chart with the data provided when the page was first loaded

to get new data to the page, you need to reload the window for php to run and write new data to the page

instead of...
setTimeout(DrawGraph, 2500);

you could try...
setTimeout(function () {window.location.reload();}, 2500);

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • ideally, you would want to separate php and html/javascript -- have php return only the data, then use javascript / ajax to get data from php -- although a different chart library, [here is an example](http://stackoverflow.com/questions/38947898/redraw-google-chart-based-on-user-input-via-ajax-request/38955110#38955110) – WhiteHat Aug 19 '16 at 12:26