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