Обновить мой график Highcharts в режиме реального времени с данными базы данных - PullRequest
0 голосов
/ 10 июня 2018

У меня сейчас проблема с моим графиком Highcharts.Итак, я восстановил свои данные, находящиеся в базе данных, с помощью файла values.php , который находится ниже:

$bdd = new PDO('mysql:host=localhost;dbname=didatec;charset=utf8', 'root', ''); //Connexion

$sql = "SELECT DISTINCT date, temperature, consommation FROM acquisition, caisson, experience "; //Requête SQL 

foreach  ($bdd->query($sql) as $row) {
echo $row['date'] . "/" . $row['temperature']. "/" . $row['consommation']. "/"  ; //Récupère "time" et "degres" dans la base

}
?>

Данные восстанавливаются в этой форме:

Время / Температура / Расход

Итак, я получаю результат на своей странице values.php в этой форме:

2018-06-06 08:21:31/ 45/6 / 2018-06-07 00: 00: 00/89/24 / 2018-06-06 09: 41: 51/64/20 / 2018-06-08 10: 19: 46/20/6 /2018-06-08 11: 25: 12/30/2 / 2018-06-08 13: 38: 08/60/8 / 2018-06-08 14: 11: 49/25/12 / 2018-06-0815: 09: 00/59/15 /

Для того, чтобы это давало:

2018-06-06 08:21:31 //Time
45 //Temperature
6 //Consumption

Затем данные обрезаются косой чертой, что позволяет мнеинтегрировать их тогда на моем графике.В настоящее время у меня есть другой график, который работает очень хорошо, как это.Я хотел бы сделать почти то же самое, но в реальной жизни.То есть, с каждым новым данными в базе, график обновляется каждую секунду и отображает данные для меня на графике.В настоящее время мой график обновляется каждую секунду, но восстанавливает данные, кто знает, где.Вот мой файл data.js, где находится мой график в реальном времени (ниже).Я попробовал несколько вещей, но я не получил ничего убедительного.Так что я хотел бы немного помочь, так как я был на нем в течение недели.Я уверен, что это тоже глупая ошибка.Благодарю вас!

Мой файл data.js:

$(function() {

var date = []; //time
var C1_Temp = [];   //degres
var C1_Deci =[];
var switch1 = true;
$.get('values.php', function(data) { //Récupère les données extraites de la base de données

    data = data.split('/');

    for (var i = 0; i < data.length; i += 3) {
      date.push(data[i]);
      C1_Temp.push(parseFloat(data[i + 1]));
      C1_Deci.push(parseFloat(data[i + 2]));
    }

    date.pop();

    $('#chartLive').highcharts({ //Déclaration du graphique avec sa configuration

        chart : {
            animation: Highcharts.svg, // don't animate in IE < IE 10.
            type : 'spline', //Type de courbe 
            events:{
                load: function (){

                var chart = this;

                var series = this.series[0];
                var series1 = this.series[1];


                setInterval(function (){

                    // var x = (new Date()).getTime();

                    for (var i = 0; i < data.length; i += 3) {
                        date.push(data[i]);
                        var y = C1_Temp.push(parseFloat(data[i + 1]));
                        var z = C1_Deci.push(parseFloat(data[i + 2]));
                     }


                    series.addPoint([y], true);
                    series.addPoint([z], true);

                }, 3000);

                // chart.redraw(data);

                }
            }
        },
        title : {
            text : 'Graphique en différé' //Titre du graphique
        },
        subtitle : {
            text : 'Températures et décibels' //Texte en haut hors graph
        },
        xAxis : { //Axe horizontal
            title : {
                text : 'Date'
            },
            categories : date,
            // max: 5,
            // min: 0,
        },
        yAxis : { //Axe vertical
            title : {
                text : 'Températures et décibels', //Texte à gauche hors graph
            },
        },
        tooltip : {
            crosshairs : true,
            shared : true,
            valueSuffix : ''
        },
        plotOptions : {
            spline : {
                marker : {
                    radius : 4,
                    lineColor : '#666666',
                    lineWidth : 1
                }
            }
        },
        credits: {
            enabled: false //permet de cacher le lien du graph en bas à droite
        },
        series : [{

            name : 'Températures', //Ajout de la courbe pour la température
            data : C1_Temp
        },{

            name : 'Décibels',
            data : C1_Deci

        }]
    });


    }); 
}); 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...