score:6

Accepted answer

i assume that you have multiple series in graph where backend provides a single point per serie per time.

for the sake of simplicity i suggest you returning time in milliseconds. i'm not too strong in php but i guess the point is clear

<?php

header("content-type: text/json");


 include_once 'include/connection.php';
 $db = new db_class(); 


     $query = "select distinct idchip from datatable ";
     $result = mysql_query( $query );
     $rows = array();
     $count = 0;

     while( $row = mysql_fetch_array( $result ) ) {
         $sql1 =     "select datetime,temperature from `datatable` where idchip=".$row['0']." order by datetime desc limit 0,1 ";

        $serie = new stdclass;
        $serie->name = $row['0'];
        $result1 = mysql_query($sql1);

        $points = array();
        while ($rows = mysql_fetch_array($result1)) {
           $points[] = array(strtotime($rows['0']) * 1000, $rows['1']);
        }

        $serie->data = $points;
        $series[] = $serie;
     }


// create a php array and echo it as json
$ret = $series;
echo json_encode($ret);
?>

client-side code will be:

var chart;
var chartseries = {};
var latesttimereported = {};

function requestdata() {

  $.ajax({
    url: 'live-server-data.php',
    success: function(seriesupdate) {

      //in case initializer of highcharts is too quick - skip the update
      if (!chart) {
        settimeout(requestdata, 1000);
        return;
      }

      $.each(seriesupdate, function (serieindex, serieupdate) {
        var existingserie = chartseries[serieupdate.name];
        var newpoint = serieupdate.data[0];
        var lastinsertedtime = latesttimereported[serieupdate.name];          

        if (lastinsertedtime  && lastinsertedtime < newpoint[0]) {
          console.log('attempt inserting old data!!!!');
          return;
        }

        latesttimereported[serieupdate.name] = newpoint[0];

        if (existingserie) {
          var shift = existingserie.data.length > 20;
          existingserie.addpoint(newpoint , true, shift);
        } else {
          var newserie = chart.addseries({                        
            name: serieupdate.name,
            data: serieupdate.data
          }, true);
          chartseries[serieupdate.name] = newserie;
        }

      });

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

$(document).ready(function() {
    chart = new highcharts.chart({
        chart: {
            renderto: 'container',
            defaultseriestype: 'spline',
            events: {
                load: requestdata
            }
        },
        title: {
            text: 'live random data'
        },
        xaxis: {
            type: 'datetime',
            tickpixelinterval: 150,
            maxzoom: 20 * 1000
        },
        yaxis: {
            minpadding: 0.2,
            maxpadding: 0.2,
            title: {
                text: 'value',
                margin: 80
            }
        },
        series: []
    });

you can see new updated example here http://plnkr.co/edit/oqmofegdadf9j3uit8qd

score:0

show "attempt inserting old data!!!!". and no show display data real-time.

display enter image description here

json enter image description here


Related Query

More Query from same tag