Fügen Sie dynamische Daten in Liniendiagramm aus der mysql-Datenbank mit highcharts

Will ich Daten hinzufügen, zeigen Sie auf mein Diagramm mit ajax oder json, jetzt muss ich neu laden ganze Webseite zu zeigen, meine neuen Daten auf die Karte. Aber ich möchte, um zu zeigen, live-Daten, indem Sie zeigen, wie diese link:

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/

www.highcharts.com/studies/live-server.htm

Wurde ich versuchen, wieder an meine Daten aus der mysql hinzufügen Diagramm von json-aber nichts geschah. Das ist mein code in live-server-data.php :

<?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']." datetime DESC limit 0,1 ";

        $result1 = mysql_query($SQL1);

        while ($rows = mysql_fetch_array($result1)) {
           $data[] = $rows['1'];
           $datatime[] = 'moment('.$rows['0'].').valueOf()';
        }

        //The x value is the current JavaScript time, which is the Unix time multiplied 
        //by 1000.
        $x = $datatime;
        //The y value is a random number
        $y = $data;
     }


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

und das ist, was ich verwendet, um Daten und zeigen Sie auf der Karte in meinem index.php Seite.

var chart; //global
   /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
        $.ajax({
            url: 'live-server-data.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
        });
    }

    $(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: [{
                name: 'Random data',
                data: []
            }]
        });     
    });

Dies ist meine Tabelle, die ich die Seite neu laden, um neue Daten jetzt, aber ich möchte hinzufügen neue Punkt-zu-chart für "real-time"

Fügen Sie dynamische Daten in Liniendiagramm aus der mysql-Datenbank mit highcharts

In requestData Funktion, ersetzen Sie "Tabelle" Referenz "this". Wie Sie Ihre Punkt-variable aussieht (der von ajax) ?

InformationsquelleAutor duong khang | 2015-05-15

Ich gehe davon aus, dass Sie mehrere Reihen im Diagramm, wo backend stellt einen single-point-pro serie pro Zeit.

Der Einfachheit halber schlage ich vor, Sie die Rückgabe-Zeit in Millisekunden. Ich bin nicht so stark in PHP, aber ich denke der Punkt ist klar

<?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:

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: []
    });

Können Sie sehen, neue, aktualisierte Beispiel hier
http://plnkr.co/edit/OqMofEGDadF9J3Uit8qD

Kommentare sind nicht für längeren Gespräch; das Gespräch wurde verschoben zum chat.

InformationsquelleAutor Igor

0

show "Versuch einsetzen, die alten Daten!!!!".
und No-Show-Anzeigen der Daten in Echtzeit.

Anzeigen

JSON

InformationsquelleAutor Wacharapon Jantasang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.