Black Lives Matter. Please consider donating to Black Girls Code today.

Update chart using setInterval and PHP

Hi guys & girls,

I can create a new chart while i’m loading the webpage reading from a file using some PHP code.
Anyway, I want to update my chart every 5 seconds but it seems it does not work.

Can someone give me some help ?

Here is my javascript (placed in a script right after my div named… ‘myDiv’) :

    $(document).ready(function() {
      var trace1 = {
        type: "scatter",
        mode: "lines",
        name: 'balance',

        // this gonna load x and y values
        <?php include('./php/readTemperature.php') ?>

        line: {color: '#17BECF'}
      }

      var data = [trace1];

      var layout = {
        title: 'Temperature',
        xaxis: { title: 'time',
                 autorange: true,
                 rangeselector: {buttons: [
                    {
                      count: 1,
                      label: '1d',
                      step: 'day',
                      stepmode: 'backward'
                    },
                    {
                      count: 10,
                      label: '10d',
                      step: 'day',
                      stepmode: 'backward'
                    },
                    {step: 'all'}
                  ]},
                 type: 'date'
        },
        yaxis: { title: 'Celcius degrees' }
      };
      Plotly.newPlot('myDiv', data, layout);




      var refreshId = setInterval(function() {
            $.load('./php/updateGraph.php');
            Plotly.redraw('myDiv');
        },5000);
        $.ajaxSetup({ cache: false })
    });
  </script>

And here is my readTemperature.php code :

function readCSV($csvFile){
$file_handle = fopen($csvFile, ‘r’);
while (!feof($file_handle) ) {
$line_of_text[] = fgetcsv($file_handle, 100);
}
fclose($file_handle);
return $line_of_text;
}

// Set path to CSV file
$csvFile = ‘test.csv’;
$csv = readCSV($csvFile);

for($idxLine=1; $idxLine < sizeof($csv); $idxLine++)
{
if ($csv[$idxLine] != NULL)
{
$time[] = $csv[$idxLine][0];
$temperature[] = $csv[$idxLine][1];
}
}

$js_array_time = json_encode($time);
$js_array_temperature = json_encode($temperature);
echo "x: ". $js_array_time . “,\n”;
echo "y: ". $js_array_temperature . “,\n”;

And this works to initiate the graph. Unfortunately, if I try to use the same scheme to update my chart, it does not work (here’s the updateGraph.php):

function readCSV($csvFile){
$file_handle = fopen($csvFile, ‘r’);
while (!feof($file_handle) ) {
$line_of_text[] = fgetcsv($file_handle, 100);
}
fclose($file_handle);
return $line_of_text;
}

// Set path to CSV file
$csvFile = ‘test.csv’;
$csv = readCSV($csvFile);

for($idxLine=1; $idxLine < sizeof($csv); $idxLine++)
{
if ($csv[$idxLine] != NULL)
{
$time[] = $csv[$idxLine][0];
$temperature[] = $csv[$idxLine][1];
}
}

$js_array_time = json_encode($time);
$js_array_temperature = json_encode($temperature);

echo "data[0][‘x’] = ". $js_array_time . “;\n”;
echo "data[0][‘y’] = ". $js_array_temperature . “;\n”;
//echo “Plotly.redraw(‘myDiv’);”;

I have no idea how to figure out with it an any idea is more than welcomed

Cheers