Sidik.My Arduino,ChartJS,IOT Asas IOT – memuat naik data dari Arduino ke PHP/MySQL (Bahagian 2)

Asas IOT – memuat naik data dari Arduino ke PHP/MySQL (Bahagian 2)

18 Februari 202218 Februari 2022| sidikalaminisidikalamini| 0 Comment | 9:18 am
Categories:

Pada kiriman sebelum ini, kita telah menggunakan paparan CanvasJS. Paparan carta CanvasJS sebenarnya adalah berasaskan komersial dan perlu membayar langganan, penggunaan percuma akan ada tera air (watermark).

Antara alternatif lain untuk paparan adalah menggunakan ChartJS yang percuma.

berikut adalah kod untuk chartJS

  • service.php – fail PHP untuk menarik data dari MySQL dan menukarkan kepada format JSON
  • linegraph.js – javascript untuk membentuk carta, diletakkan dalam folder js bersama chart.min.js (dari ChartJS) dan jquery.min.js dari (Jquery)
  • linegraph.php – Fail HTML untuk memaparkan carta dari linegraph.js

<?php
header('Content-Type: application/json');
$username = "your user name";
$password = "your password ";
$dbname = "your database name";

// Create connection
$conn = new mysqli('',$username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT * FROM (SELECT ID, DateTime, CO2,Temperature, Humidity,PM25 FROM environment ORDER BY ID DESC LIMIT 30) t1 ORDER BY t1.ID";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row


$data = array();
foreach ($result as $row) {
  $data[] = $row;
}


echo json_encode($data);
} else {
    echo "0 results";
}
$conn->close();
?>
Code language: HTML, XML (xml)

[{"ID":"6330","DateTime":"2022-02-18 09:39:35","CO2":"255.56","Temperature":"51.12","Humidity":"34.44","PM25":"9"},
{"ID":"6331","DateTime":"2022-02-18 09:39:51","CO2":"254.22","Temperature":"51.21","Humidity":"34.46","PM25":"9"},
{"ID":"6332","DateTime":"2022-02-18 09:40:08","CO2":"252.56","Temperature":"51.21","Humidity":"34.43","PM25":"7"},
{"ID":"6333","DateTime":"2022-02-18 09:40:24","CO2":"250.82","Temperature":"51.18","Humidity":"34.44","PM25":"7"},
{"ID":"6334","DateTime":"2022-02-18 09:40:41","CO2":"250.45","Temperature":"51.13","Humidity":"34.42","PM25":"9"},
{"ID":"6335","DateTime":"2022-02-18 09:40:57","CO2":"249.49","Temperature":"51.16","Humidity":"34.44","PM25":"9"},
{"ID":"6336","DateTime":"2022-02-18 09:41:14","CO2":"248.66","Temperature":"51.01","Humidity":"34.43","PM25":"8"},
{"ID":"6337","DateTime":"2022-02-18 09:41:30","CO2":"247.87","Temperature":"51.07","Humidity":"34.43","PM25":"8"},
{"ID":"6338","DateTime":"2022-02-18 09:41:47","CO2":"247.57","Temperature":"51.16","Humidity":"34.44","PM25":"9"},
{"ID":"6339","DateTime":"2022-02-18 09:42:03","CO2":"245.43","Temperature":"51.05","Humidity":"34.46","PM25":"9"},
{"ID":"6340","DateTime":"2022-02-18 09:42:20","CO2":"244","Temperature":"50.9","Humidity":"34.44","PM25":"10"},
{"ID":"6341","DateTime":"2022-02-18 09:42:36","CO2":"244.3","Temperature":"51.02","Humidity":"34.44","PM25":"9"},
{"ID":"6342","DateTime":"2022-02-18 09:42:53","CO2":"246.03","Temperature":"50.89","Humidity":"34.46","PM25":"5"},
{"ID":"6343","DateTime":"2022-02-18 09:43:09","CO2":"245.38","Temperature":"50.9","Humidity":"34.46","PM25":"7"},
{"ID":"6344","DateTime":"2022-02-18 09:43:25","CO2":"245.1","Temperature":"50.85","Humidity":"34.46","PM25":"6"},
{"ID":"6345","DateTime":"2022-02-18 09:43:42","CO2":"244.67","Temperature":"50.85","Humidity":"34.47","PM25":"7"},
{"ID":"6346","DateTime":"2022-02-18 09:43:58","CO2":"244.05","Temperature":"50.92","Humidity":"34.46","PM25":"7"},
{"ID":"6347","DateTime":"2022-02-18 09:44:15","CO2":"243.21","Temperature":"50.93","Humidity":"34.47","PM25":"6"},
{"ID":"6348","DateTime":"2022-02-18 09:44:31","CO2":"242.3","Temperature":"50.89","Humidity":"34.47","PM25":"7"},
{"ID":"6349","DateTime":"2022-02-18 09:44:48","CO2":"242.55","Temperature":"50.91","Humidity":"34.44","PM25":"7"},
{"ID":"6350","DateTime":"2022-02-18 09:45:04","CO2":"241.12","Temperature":"50.94","Humidity":"34.47","PM25":"6"},
{"ID":"6351","DateTime":"2022-02-18 09:45:21","CO2":"240.23","Temperature":"50.92","Humidity":"34.47","PM25":"8"},
{"ID":"6352","DateTime":"2022-02-18 09:45:37","CO2":"239.28","Temperature":"50.88","Humidity":"34.46","PM25":"7"},
{"ID":"6353","DateTime":"2022-02-18 09:45:54","CO2":"238.7","Temperature":"50.87","Humidity":"34.5","PM25":"7"},
{"ID":"6354","DateTime":"2022-02-18 09:46:10","CO2":"237.93","Temperature":"50.96","Humidity":"34.5","PM25":"7"},
{"ID":"6355","DateTime":"2022-02-18 09:46:27","CO2":"237.08","Temperature":"50.91","Humidity":"34.5","PM25":"6"},
{"ID":"6356","DateTime":"2022-02-18 09:46:43","CO2":"237.2","Temperature":"50.84","Humidity":"34.5","PM25":"6"},
{"ID":"6357","DateTime":"2022-02-18 09:46:59","CO2":"236.17","Temperature":"50.8","Humidity":"34.53","PM25":"7"},
{"ID":"6358","DateTime":"2022-02-18 09:47:16","CO2":"236.87","Temperature":"50.86","Humidity":"34.5","PM25":"7"},
{"ID":"6359","DateTime":"2022-02-18 09:47:32","CO2":"237.9","Temperature":"50.83","Humidity":"34.52","PM25":"7"}]

Code language: JSON / JSON with Comments (json)
$(document).ready(function(){
    $.ajax({
      url : "../service.php",
      type : "GET",
      success : function(data){
        console.log(data);
  
        var DateTime = [];
        var CO2 = [];
        var Temperature = [];
        var Humidity = [];
        var PM25 = [];
  
        for(var i in data) {
          DateTime.push("DateTime " + data[i].DateTime);
          CO2.push(data[i].CO2);
          Temperature.push(data[i].Temperature);
          Humidity.push(data[i].Humidity);
          PM25.push(data[i].PM25);
      
        }
  
        var chartdata = {
          labels: DateTime,
          datasets: [
            {
              label: "CO2",
              fill: false,
              lineTension: 0.1,
              backgroundColor: "rgba(54, 162, 235, 0.75)",
              borderColor: "rgba(54, 162, 235, 1)",
              pointHoverBackgroundColor: "rgba(54, 162, 235, 1)",
              pointHoverBorderColor: "rgba(54, 162, 235, 1)",
              data: CO2,
	      type: 'bar',
	      yAxisID: 'y1',
              order:3

            },
            {
              label: "Temperature",
              fill: false,
              lineTension: 0.1,
              backgroundColor: "rgba(29, 202, 255, 0.75)",
              borderColor: "rgba(29, 202, 255, 1)",
              pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
              pointHoverBorderColor: "rgba(29, 202, 255, 1)",
              data: Temperature,
              order:1
            },
            {
              label: "Humidity",
              fill: false,
              lineTension: 0.1,
              backgroundColor: "rgba(211, 72, 54, 0.75)",
              borderColor: "rgba(211, 72, 54, 1)",
              pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
              pointHoverBorderColor: "rgba(211, 72, 54, 1)",
              data: Humidity,
              order:2
            },
	   {
              label: "PM25",
              fill: true,
              lineTension: 0.1,
              backgroundColor: "rgba(50, 100, 54, 0.75)",
              borderColor: "rgba(50, 100, 54, 1)",
              pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
              pointHoverBorderColor: "rgba(211, 72, 54, 1)",
              data: PM25,
              order:0
		
            }

          ]
        };
  
        var ctx = $("#mycanvas");
  
        var LineGraph = new Chart(ctx, {
          type: 'line',
          data: chartdata,
       options: {
           responsive: true,
           interaction: {
                     mode: 'index',
                      intersect: false,
                         },
           stacked: false,
           plugins: {
                    title: {
                            display: true,
                            text: 'Sidik.my Environment Chart'
                              }
                      },
            scales: {
                       y: {
                           type: 'linear',
                           display: true,
                           position: 'left',
                          },
                       y1: {
                          type: 'linear',
                          display: true,
                          position: 'right',

          // grid line settings
          grid: {
           		 drawOnChartArea: false, // only want the grid lines for one axis to show up
         	 },
              
              },
             }
           },
        });
      },
      error : function(data) { 
      }
    });
  });Code language: JavaScript (javascript)
<!DOCTYPE html>
<html>
  <head>
    <title>ChartJS - LineGraph</title>
    <style>
      .chart-container {
        width: 90%;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
    </div>
    
    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/linegraph.js"></script>
  </body>
</html>Code language: HTML, XML (xml)

Leave a Reply

Alamat e-mel anda tidak akan disiarkan. Medan diperlukan ditanda dengan *

Related Post