中文 | English
曹永忠：智慧家庭物聯網

【物聯網開發系列】視覺化資料呈現（Google Chart篇）

0
  • 文／曹永忠

本篇是「物聯網開發系列」系列中的第七篇：視覺化資料呈現（Google Chart篇），主要告訴讀者，如何利用Google Chart雲端服務，使用視覺化方式即時顯示單筆資訊。前文在此：1、2、3、4、5、6。

之前的文章：【物聯網開發系列】雲端主機資料表建置與權限設定篇、【物聯網開發系列】感測裝置上傳雲端主機篇，作者使用 DHT22 溫濕度感測器，配合Wifi開發版，將溫濕度資料上傳到雲端資料庫，如下圖所示：

查詢dhttbl資料表。圖／作者提供。

可以參考筆者：【物聯網開發系列】溫溼度裝置連線篇：傳送溫溼度資料到雲端，如下圖所示：我們可以看到透過網頁瀏覽器工具，可以呈現條列式資訊：

網頁上顯示上傳溫溼度資料的結果畫面。圖／作者提供

本文中，作者將應用 Google 雲端資源：Chart Gallery 的雲端服務功能，介紹 google GUAGE 來呈現溫濕度資源。

Chart Gallery 網址：https://developers.google.com/chart/interactive/docs/gallery?hl=zh-TW

Chart Gallery 介紹

我們進到 Google 雲端資源：Chart Gallery 的雲端服務功能中，我們可以看到下圖：Google Developer Chart 雲端服務功能。

Chart Gallery。圖／作者提供。

Visualization: Gauge 介紹

我們進到Google 雲端資源：Chart Gallery 之 Gauge，網址：https://developers.google.com/chart/interactive/docs/gallery/gauge 的雲端服務功能中，我們可以看到下圖：Visualization: Gauge 雲端服務功能。

Visualization：Gauge。圖／作者提供。

如下表所示，我們先看看原來 HTML 程式碼，這樣的程式碼可以轉化成下圖所示之視覺化元件：Gauge。

 單一元件之視覺化 Gauge 之 HTML 程式碼

<html>
<head>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript”>
google.charts.load(‘current’, {‘packages’:[‘gauge’]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
[‘Label’, ‘Value’],
[‘Memory’, 80],
[‘CPU’, 55],
[‘Network’, 68]
]);

var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};

var chart = new google.visualization.Gauge(document.getElementById(‘chart_div’));

chart.draw(data, options);

setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
</head>
<body>
<div id=”chart_div” style=”width: 400px; height: 120px;”></div>
</body>
</html>

  • 程式下載：https://developers.google.com/chart/interactive/docs/gallery/gauge(Developers, 2016)

由上表之 HTML 程式碼，透過網站與瀏覽器轉譯之後，如下圖所示，我們可以看到視覺化 Gauge 之 HTML 程式碼之網頁畫面。

單一元件之視覺化 Gauge 之 HTML 程式碼之網頁畫面。圖／作者提供。

逐一解說 HTML 碼

如下表所示，載入 Google Chart 資源。

<html>
<head>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript”>
google.charts.load(‘current’, {‘packages’:[‘gauge’]});
google.charts.setOnLoadCallback(drawChart);

如下表所示，載入圖表資料。

function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Label’, ‘Value’],
[‘Memory’, 80],
[‘CPU’, 55],
[‘Network’, 68]
]);

如下表所示，載入 Chart 繪圖參數。參數資料定義如下：

  • width、height 為 每一個 Chart 的寬與高
  • redFrom：紅色區域開始，redTo：紅色區域結束
  • yellowFrom：黃色區域開始，yellowTo：黃色區域結束
  • minorTicks：5 最小刻度

 var options = {
width: 400, height: 120,
redFrom: 90,redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};

如下表所示，繪出視覺化儀表板。指令如下：

  • var chart = new google.visualization.Gauge(document.getElementById(‘chart_div’))→產生儀表板
  • draw(data, options)→畫出儀表板

var chart = new
google.visualization.Gauge(document.getElementById(‘chart_div’));
chart.draw(data, options);

如下表所示，在網頁上繪出圖型。指令如下：

  • <div id=”chart_div” style=”width: 400px; height: 120px;”></div>→產生叫” chart_div”的 繪圖空間
  • width: 400px 繪圖空間寬度
  • height: 120px繪圖空間高度

<body>
<div id=”chart_div” style=”width: 400px; height: 120px;”></div>
</body>

建立 php 程式碼

如下表所示，我們將抓詢資料的程式，與 Guage 的 HTML 進行整合，產生下列程式碼：

<?php require_once(‘../Connections/iotcnn.php’);
$link=Connection();          //產生mySQL 連線物件
$str1 = “select * from dhttbl order by sysdatetime desc limit 0,1″;
//組成新增到dhtdata資料表的 SQL 語法

//echo $query ;

$result1=mysql_query($str1,$link);
?>

<html>
<head>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript”>
google.charts.load(‘current’, {‘packages’:[‘gauge’]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Label’, ‘Value’],
<?php
if($result1 !==FALSE){
while($row = mysql_fetch_array($result1)) {
printf(” [‘溫度’, %f],[‘濕度’, %f]]);”,
$row[“temperature”], $row[“humidity”]);
}
mysql_free_result($result1);
}
?>

var options = {
width: 500, height: 500,
redFrom: 35, redTo: 100,
yellowFrom:28, yellowTo: 35,
minorTicks: 10
};

var chart = new google.visualization.Gauge(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id=”chart_div” style=”width: 400px; height: 120px;”></div>
</body>
</html>

將這支程式，命名『dht_guage.php』，上傳到網頁中間之/dht22/目錄下，開啟瀏覽器之後，我們在網址列，輸入『http://192.168.88.88:8888/dht22/dht_guage.php』(本雲端主機『http://192.168.88.88:8888/』)，我們可以看到下圖：

使用google chart之Guage顯示溫濕度。圖／作者提供。

到此，我們已經完成介紹 Google Chart 雲端服務的介紹，相信上述一步一步的設定步驟，讀者可以開始使用 Google Chart 雲端服務。

至於其他第三方軟體的 Chart 雲端服務也都是大同小異， 相信讀者可以融會貫通。

後續

本篇是「物聯網開發系列」系列中的第七篇：視覺化資料呈現（Google Chart篇），主要告訴讀者，如何利用 Google Chart 雲端服務，使用視覺化方式即時顯示單筆資訊，下篇將介紹使用多筆資料之視覺化圖示顯示連續資料的方式逐一著墨，請讀者拭目以待。

後續筆者還會繼續發表「物聯網開發」系列的文章，在未來我們可以創造出更優質，更具未來性的物聯網 (Internet of Thing：IOT) 產品開發相關技術。

敬請期待更多的文章。

作者介紹

曹永忠 (Yung-Chung Tsao)：目前為自由作家，專注於軟體工程、軟體開發與設計、物件導向程式設計、物聯網系統開發、Arduino 開發、嵌入式系統開發，商品攝影及人像攝影。長期投入資訊系統設計與開發、企業應用系統開發、軟體工程、物聯網系統開發、軟硬體技術整合等領域，並持續發表作品及相關專業著作。

Email：prgbruce@gmail.com／Line ID：dr.brucetsao／作者網頁／臉書社群（Arduino.Taiwan）／Github 網站／Youtub

參考文獻

Tags Google Chart曹永忠物聯網開發系列視覺化資料

分享到社群

曹永忠

曹永忠 (Yung-Chung Tsao) ，目前為自由作家暨專業Maker，專研於軟體工程、軟體開發與設計、物件導向程式設計，商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域，並持續發表作品及相關專業著作。 Email:prgbruce@gmail.com Line ID：dr.brucetsao 作者網站：https://www.cs.pu.edu.tw/~yctsao/ 臉書社群(Arduino.Taiwan)：https://www.facebook.com/groups/Arduino.Taiwan/ Github網站：https://github.com/brucetsao/ Youtube：https://www.youtube.com/channel/UCcYG2yY_u0m1aotcA4hrRgQ

© Copyright vMaker. All rights reserved.

This site or product includes IP2Location LITE data available from https://lite.ip2location.com.