Highcharts update at specific time interval

Question

I have HighCharts in a div tag that feeds from a MySQL table. I get this data by using PHP and converting JSON.

<?php
$query = "some query here ";
$result = $conn->query($query);

if (!$result) {
  echo "Could not successfully run query ($query) from DB: " . mysql_error();
  exit;
}

if (mysqli_num_rows($result) == 0) {
  echo "No rows found, nothing to print so am exiting";
  exit;
}

//array
$table = array();

while($row= mysqli_fetch_assoc($result)) {
  $table[] =$row;
};

$jsonTable= json_encode($table)
?>

And I can see the graph correctly by using this :

$(function () {

var chartData = <?php echo $jsonTable ?>;

var seriesA = [];
var seriesB = [];


for (i=0; i<chartData.length; i++){

tempDate = Date.parse(chartData[i].ctime);
seriesA.push([Date.parse(chartData[i].ctime), parseInt(chartData[i].totalKbpsin)]);
seriesB.push([Date.parse(chartData[i].ctime), parseInt(chartData[i].totalKbpsout)]);

};

But, I want to update my chart every 1 hour with new data. How can I do that?

How can I do that? Because I dont getany failure in code. I need some one to show a way or hint. — TFC, Jun 15 '16 at 08:28
Actually not. Because I need that graph redraw itself with new json data — TFC, Jun 15 '16 at 08:51
The following Stack Overflow questions may be helpful and give you some ideas to try out: 1) http://stackoverflow.com/questions/14051795/push-changes-to-a-webpage-without-refreshing, 2) http://stackoverflow.com/questions/16354306/firing-events-on-regular-time-intervals-coming-from-database-using-asp-net-c-s — Mike Zavarello, Jun 15 '16 at 11:22
You need to be much more specific about what part of this you need help with. You need some method of measuring the time, and some method to trigger the update when it's time to. So, what do you have, and what do you need help with? — jlbriggs, Jun 15 '16 at 12:23
Ok. I have pPHP code to produce JSON. HighCHarts draws graph by using this JSON. But after 1 hr later, I need to re-run PHP to get new JSON values and HighCharts re-draws graphs by using new JSOn data. Additionally, this re-drawing should happen in a spesific DIV tag. Not whoel page. Is it clear? — TFC, Jun 15 '16 at 12:43

score 0 · Accepted Answer · answered Jun 16 '16 at 14:02

Solved!
To refresh data in dpecific time interval, I select to call another PHP page which output is only JSON data.

Then,usnig setInterval solves my problem.

Here is code:

function DrawContainerJson () {
        var seriesA = [];
        var seriesB = [];

        var url =  "https://domain.name/test/json.php";
        $.getJSON(url,  function(chartData) {
            // loop through the JSON data and push to the temporary series
            for (i=0; i<chartData.length; i++){
                tempDate = Date.parse(chartData[i].ctime);
                seriesA.push([Date.parse(chartData[i].ctime), parseInt(chartData[i].totalKbpsin)]);
                seriesB.push([Date.parse(chartData[i].ctime), parseInt(chartData[i].totalKbpsout)]);
            };

            var opt = SetChartOption(seriesA, seriesB);
            $('#container_json').highcharts(opt);
        });
    }


    $(document).ready(function() {              
        DrawContainerJson();
        //Refresh
        setInterval(function(){
            DrawContainerJson();
        },60000);  //1 min refresh
            });

Regards,

Highcharts update at specific time interval

1 Answers1