Как создать PHP Dynami c / Live Multi Series Chart с CanvasJS - PullRequest
Новая
       3

Как создать PHP Dynami c / Live Multi Series Chart с CanvasJS

1 голос
/ 06 февраля 2020

Я пытаюсь построить многострочный график с данными из mysql. запрос из mysql кодируется в формате JSON.

Мой вопрос: как мне это сделать? как выбрать данные (дата, имя датчика, имя датчика) и построить их?

Это мой массив JSON:

[{"ID": 6, "Дата": " 2020-01-24 07:35:46 "," sensorName ":" sensor 1 "," sensorValue ": 213}, {" ID ": 7," Date ":" 2020-01-24 07:35:46 "," имя датчика ":" датчик 1 "," значение датчика ": 433}, {" ИД ": 8," Дата ":" 2020-01-24 07:35:46 "," имя датчика ":" датчик 2 " , "sensorValue": 45}, {"ID": 9, "Date": "2020-01-24 07:35:46", "sensorName": "sensor 3", "sensorValue": 54}]

Каждый датчик (датчик 1, датчик 2 и т. Д. c) будет иметь свою собственную линию, нанесенную на график. Я пробовал ссылаться с веб-сайта canvas JS, но я все еще не понимаю, как это сделать.

Я отредактировал свои коды, но я все еще не знаю, как выбрать данные от json массива до сюжета.

ps: я пишу свои цели для собственной выгоды

Моя цель:

  • показать максимум 50 данных. новые данные будут добавлены на график, но на графике будет отображено не более 50 точек данных.

  • По оси X будет отображаться значение «Дата» из массива JSON.

  • По оси Y будет отображаться 'sensorValue'

  • обновлять график каждые 5 сек c

<?php
// this file is getsensor.php
        require_once 'mysqldb.php';

        // function getSensor(){
            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();
        }

        $sensor1 = 'SELECT Date, sensorName, sensorValue  FROM sensor WHERE sensorName = "sensor 1"';
        $sensor2 = 'SELECT Date, sensorName, sensorValue  FROM sensor WHERE sensorName = "sensor 2"';
        $sensor3 = 'SELECT Date, sensorName, sensorValue  FROM sensor WHERE sensorName = "sensor 3"';

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

        if($query = mysqli_query($conn,$sensor1)){
            while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                $json_sensor1[] = $row;
            }
            /* free result set */
            mysqli_free_result($query);
        }

        if($query = mysqli_query($conn,$sensor2)){
            while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                $json_sensor2[] = $row;
            }
            /* free result set */
            mysqli_free_result($query);
        }

        if($query = mysqli_query($conn,$sensor3)){
            while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                $json_sensor3[] = $row;
            }
            /* free result set */
            mysqli_free_result($query);
        }

        /* close connection */
        mysqli_close($conn);
?>
// below is index.php
<?php
    require 'mysql.php';
    include 'getsensor.php';

     $updateInterval = 2000; //in millisecond
    //  $initialNumberOfDataPoints = 100;
    //  $x = time() * 1000 - $updateInterval * $initialNumberOfDataPoints;
    //  $y1 = 1500;
    //  $y2 = 1550;
    //  // generates first set of dataPoints 
    //  for($i = 0; $i < $initialNumberOfDataPoints; $i++){
    //      $y1 += round(rand(-2, 2));
    //      $y2 += round(rand(-2, 2));  
    //      array_push($dataPoints1, array("x" => $x, "y" => $y1));
    //      array_push($dataPoints2, array("x" => $x, "y" => $y2));
    //      $x += $updateInterval;
    //  }

     ?>
     <!DOCTYPE HTML>
     <html>
     <head>
     <script>
     window.onload = function() {

     var updateInterval = <?php echo $updateInterval ?>;
     var sensor1 = <?php echo json_encode($json_sensor1, JSON_NUMERIC_CHECK); ?>;
     var sensor2 = <?php echo json_encode($json_sensor2, JSON_NUMERIC_CHECK); ?>;
     var yValue1 = <?php echo '0' ?>;
     var yValue2 = <?php echo '0' ?>;
     var xValue = <?php echo '0' ?>;

     var chart = new CanvasJS.Chart("chartContainer", {
         zoomEnabled: true,
         title: {
             text: "Soil Moisture Reading"
         },
         axisX: {
             title: "chart updates every " + updateInterval / 1000 + " secs"
         },
         axisY:{
            //  suffix: " watts",
             includeZero: false
         }, 
         toolTip: {
             shared: true
         },
         legend: {
             cursor:"pointer",
             verticalAlign: "top",
             fontSize: 22,
             fontColor: "dimGrey",
             itemclick : toggleDataSeries
         },
         data: [{ 
                 type: "line",
                 name: "Sensor 1",
                 xValueType: "dateTime",
                 yValueFormatString: "#,###",
                 xValueFormatString: "hh:mm:ss TT",
                 showInLegend: true,
                 legendText: "{name} " + yValue1,
                 dataPoints: sensor1
             },
             {              
                 type: "line",
                 name: "Sensor 2" ,
                 xValueType: "dateTime",
                 yValueFormatString: "#,###",
                 showInLegend: true,
                 legendText: "{name} " + yValue2,
                 dataPoints: sensor2
         }]
     });

     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() {
         var deltaY1, deltaY2;
         xValue += updateInterval;
         // adding random value
         yValue1 += Math.round(2 + Math.random() *(-2-2));
         yValue2 += Math.round(2 + Math.random() *(-2-2));

         // pushing the new values
         sensor1.push({
             x: xValue,
             y: yValue1
         });
         sensor2.push({
             x: xValue,
             y: yValue2
         });

         // updating legend text with  updated with y Value 
         chart.options.data[0].legendText = "Sensor 1 " + yValue1;
         chart.options.data[1].legendText = " Sensor 2 " + yValue2; 
         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>
...