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

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.

Related Post