Как получить обновленные значения из php JSON в канве JS? - PullRequest
Новая
       10

Как получить обновленные значения из php JSON в канве JS?

0 голосов
/ 25 февраля 2020

Я застрял при попытке получить обновленные значения из массива JSON и нанесении его на холст JS.

Вот мой массив JSON для датчика 1: 

[{
    "Date": "2020-01-24 07:35:46",
    "sensorValue": 213
}, {
    "Date": "2020-01-24 07:35:46",
    "sensorValue": 433
}, {
    "Date": "2020-02-10 06:03:36",
    "sensorValue": 321
}, {
    "Date": "2020-02-10 06:03:36",
    "sensorValue": 43
}, {
    "Date": "2020-02-12 03:30:57",
    "sensorValue": 4321
}]

Ниже приведен мой index2. php file

Функция updateChart не работает. Я не уверен, что это правильный способ сделать это. логическое обоснование кода: я sh буду обновлять график каждые несколько секунд, получая обновленные значения через php. если обновленных значений нет, массив не должен меняться. отсюда и причина for-l oop и сравнение дат. 

<?php
    include 'getsensor.php';
?>
     <!DOCTYPE HTML>
     <html>
     <head>
     <script>
     window.onload = function() {
     <?php
        getSensor();
     ?>

     var updateInterval = 2000;
     var sensor1Data = <?php echo json_encode($json_sensor1, JSON_NUMERIC_CHECK); ?>;
     var sensor2Data = <?php echo json_encode($json_sensor2, JSON_NUMERIC_CHECK); ?>;

    //  sensor datapoints
     var sensor1 = [], sensor2 = [], sensor3 = [], sensor4 = [], sensor5 = [];

     var chart = new CanvasJS.Chart("chartContainer", {
         zoomEnabled: true,
         title: {
             text: "Soil Moisture Reading"
         },
         axisX: {
             title: "chart updates every " + updateInterval / 1000 + " secs"
         },
         axisY:{
             includeZero: false
         }, 
         toolTip: {
             shared: true
         },
         legend: {
             cursor:"pointer",
             verticalAlign: "top",
             fontSize: 22,
             fontColor: "dimGrey",
             itemclick : toggleDataSeries
         },
         data: [{ 
                 type: "line",
                 name: "Sensor 1",
                 dataPoints: sensor1
             },
             {
                 type: "line",
                 name: "Sensor 2",
                 dataPoints: sensor2
             }]
     });

    for(var i = 0; i < sensor1Data.length; i++) {
        sensor1.push({ 
            x: new Date(sensor1Data[i].Date), 
            y: Number(sensor1Data[i].sensorValue)
        })
    }

    for(var i = 0; i < sensor2Data.length; i++) {
        sensor2.push({ 
            x: new Date(sensor2Data[i].Date), 
            y: Number(sensor2Data[i].sensorValue)
        })
    }

     chart.render();
     setInterval(function(){updateChart()}, updateInterval);

     function toggleDataSeries(e) {
         if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
             e.dataSeries.visible = false;
         }
         else {
             e.dataSeries.visible = true;
         }
         chart.render();
     }

     function updateChart() {
         // retrieves new data from database. updates and shifts the graph.
        <?php
            getSensor();
        ?>
        var sensor1DataNew = <?php echo json_encode($json_sensor1, JSON_NUMERIC_CHECK); ?>;

        var i = sensor1DataNew.length - 1;
        // retrieve the index of the new value
        for (i; i > 0; i--){
            if (sensor1DataNew[i].Date == sensor1Data[19].Date){
                break;
            }
        }

        // pushes the new values to be plotted
        for(i; i < sensor1DataNew.length; i++) {
            sensor1.push({ 
                x: new Date(sensor1DataNew[i].Date), 
                y: Number(sensor1DataNew[i].sensorValue)
            })
        }

        if(sensor1.length > 20){
            sensor1.shift();
        }

        chart.render();
     }

    }
     </script>
     </head>
     <body>
     <div id="chartContainer" style="height: 370px; width: 100%;"></div>
     <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
     </body>
     </html>

вот мой getSensor. php file: 

<?php
        require_once 'mysqldb.php';

        $json_sensor1 = array();
        $json_sensor2 = array();
        $json_sensor3 = array();

        function getSensor(){
            global $json_sensor1, $json_sensor2, $json_sensor3;
            global $db_host, $db_user, $db_pass, $db_name;
            /* start connection */
            $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

            /* check connection */
            if (mysqli_connect_errno()) {
                printf("Connection failed: %s\n", mysqli_connect_error());
                exit();
            }

            # get/display datetime and sensor value        
            $sensor1 = 'SELECT Date, sensorValue  FROM sensor WHERE sensorName = "sensor 1" ORDER BY ID ASC, Date DESC LIMIT 20';
            $sensor2 = 'SELECT Date, sensorValue  FROM sensor WHERE sensorName = "sensor 2" ORDER BY ID ASC, Date DESC LIMIT 20';
            $sensor3 = 'SELECT Date, sensorValue  FROM sensor WHERE sensorName = "sensor 3" ORDER BY ID ASC, Date DESC LIMIT 20';

            // $sensor3 = 'SELECT Date, sensorName, sensorValue  FROM sensor WHERE Date IN (SELECT MAX(Date) FROM sensor WHERE sensorName = "sensor 3") ORDER BY ID ASC, Date DESC';

            $json_sensor1 = sqlQuery($conn,$sensor1);
            $json_sensor2 = sqlQuery($conn,$sensor2);
            $json_sensor3 = sqlQuery($conn,$sensor3);

            /* close connection */
            mysqli_close($conn);
        }

        function sqlQuery($conn,$sql_query){
            $json_array = array();
            if($query = mysqli_query($conn,$sql_query)){
                while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                    $json_array[] = $row;
                }
                /* free result set */
                mysqli_free_result($query);
            }
            return $json_array;
        }
?>

1 Ответ

0 голосов
/ 25 февраля 2020

Я не могу комментировать, но я думаю, что проблема заключается в том, как вы загружаете данные (или их нет).

В основном вы загружаете данные на странице PHP, отрисовываемой один раз. и это все. Для загрузки данных необходимо периодически выполнять запросы ajax вместо эхо-запроса PHP в методе updateChart. (В части инициализации все нормально) 

$.ajax({
    type: "GET", 
    url: 'getSensorData.php',
    dataType: "text", 
    async: false,
    success: function(data){
        sensor1DataNew = data;
    }
});

Нечто подобное может работать (с небольшим jquery)

...