1

mysql からのデータを使用して複数線グラフをプロットしようとしています。mysql からのクエリは JSON 形式にエンコードされます。

私の質問は次のとおりです。これを行うにはどうすればよいですか? データ (日付、センサー名、センサー値) を選択してプロットするにはどうすればよいですか?

これは私のJSON配列です:

[{"ID":6,"日付":"2020-01-24 07:35:46","センサー名":"センサー1","センサー値":213},{"ID":7,"日付":"2020-01-24 07:35:46","センサー名":"センサー 1","センサー値":433},{"ID":8,"日付":"2020-01-24 07: 35:46","センサー名":"センサー 2","センサー値":45},{"ID":9,"日付":"2020-01-24 07:35:46","センサー名":"センサー 3","センサー値":54}]

各センサー (センサー 1、センサー 2 など) には、グラフにプロットされた独自の線があります。canvasJS のWeb サイトから参照しようとしましたが、まだ方法がわかりません。

コードを編集しましたが、json 配列からデータを選択してプロットする方法がまだわかりません。

追伸：私は自分の利益のために私の目標を書いています

私の目的:

  • 最大 50 個のデータを表示します。新しいデータがグラフに追加されますが、最大 50 個のデータ ポイントがグラフにプロットされます。

  • x 軸は、JSON 配列からの「日付」値を表示します

  • y 軸は「sensorValue」を示します

  • グラフを 5 秒ごとに更新する

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

0 に答える 0