Highcharts live data not updating after changing PHP variable

Question

I've got a live updating highchart on a page, index.html, which calls a php script, datatest.php, to parse a CSV file, outputs the result as json and adds it as a new point on the chart:

$.ajax({
    url: 'datatest.php',
    success: function(point) {
        var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is longer than 20

        // add the point
        chart.series[0].addPoint(eval(point), true, shift);

        // call it again after one second
        setTimeout(requestData, 1000);  
    },
    cache: false
});

The basic PHP script stores a "line" as a session variable, so that each time the script is called, it parses the next line of the CSV file. The CSV file has two columns, one for "hi" and one for "lo".

I'm trying to add a couple of buttons to my page so that I can dynamically change the column of the CSV file that the php script is returning. The code for these buttons is below:

<form method="post" action ="datatest.php">
    <input type="submit" name="HighWind" value="hi"/>
    <input type="submit" name="LowWind" value="lo"/>
</form>

The chart runs perfectly and updates just fine with the default (low) values, however when I press either of the above buttons, the chart just stops. This is the PHP code I have:

<?php 
$i = 0;
session_start();

$_SESSION['line'] = isset($_SESSION['line']) ? ++$_SESSION['line'] : 0;
$_SESSION['hiorlo'] = isset($_SESSION['hiorlo']) ? $_SESSION['hiorlo'] : "lo";

$handle = fopen('WindSpeed.csv', 'r');


while(($windVals = fgetcsv($handle, 1000, ',')) && $i <= $_SESSION['line']) {
    $i++;
}
if(!$windVals) {
   $_SESSION['line'] = 0;
}

header("Content-type: text/json");
$x = time() * 1000;

$_SESSION['hiorlo'] = isset($_POST["HighWind"]) ? $_POST["HighWind"] : "Low";


//$hiorlo POST Code
if ($_SESSION['hiorlo'] == "hi") {
    $y =  (float)$windVals[0];
} else {
    $y = (float)$windVals[1];
}

// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);

header("Location: index.html"); // Return to frontend (index.html)

?>

The funny thing is, when I comment out the header("Location: index.html") , I'm redirected to json output of the PHP script as expected, and this is displaying the correct values depending on which button was pressed. However, with the header code left in, the chart just stops after the press.

Any help would be greatly appreciated!

Thanks, Kevin

Answer 1

You are going somewhat wrong with the approach.You seem to try achieving dynamic chart refresh , for that you need to:

1. Make ajax call on button click's
2. Pass the parameter's to a function (line no in this case. Can be stored in javascript as a state variable)
3. Write a function to remove the previous data/point from the chart and add new point.

That should be the approach that I usually follow for charts and dynamic data pushing.