L'ajout de données dynamiques de la ligne graphique de base de données mysql avec highcharts

Je veux ajouter un point de données pour ma ligne graphique avec ajax ou json, maintenant je doit recharger toute la page web pour montrer mes nouvelles données sur le graphique. Mais je veux afficher des données par l'ajout de point comme ces lien:

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

J'ai été essayer de récupérer mes données de mysql pour ajouter sur le graphique en json, mais rien ne s'est passé. C'est mon code 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);
?>

et c'est ce que j'ai utilisé pour obtenir les données et les afficher sur un graphique dans mon index.php page.

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

C'est ma carte qui-je recharger la page pour obtenir de nouvelles données pour l'instant, mais je veux ajouter un nouveau point d'graphique "temps réel"

L'ajout de données dynamiques de la ligne graphique de base de données mysql avec highcharts

  • Dans requestData fonction, remplacer "graphique" de référence avec "ce". Comment votre point de variable ressemble (que vous pouvez obtenir de l'ajax) ?
InformationsquelleAutor duong khang | 2015-05-15