【物聯網開發系列】視覺化呈現連續資料(Google Line Chart 篇)

  • 文/曹永忠。

上幾篇文章:【物聯網開發系列】溫溼度裝置連線篇:傳送溫溼度資料到雲端,如下圖所示:我們可以看到透過網頁瀏覽器工具,可以呈現條列式資訊:

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

我們已經透過Google 雲端資源:Chart Gallery,網址:https://developers.google.com/chart/interactive/docs/gallery?hl=zh-TW的雲端服務功能,在筆者文章:【物聯網開發系列】視覺化資料呈現(Google Chart篇):我們使用Google GUAGE來呈現溫濕度資源,我們可以看到下圖:

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

由於google chart之Guage對於視覺化顯示單筆資料,非常強大,但是對於連續資料、上下相關的資料顯示,卻不夠到位,難道Google Chart雲端服務只有這樣簡單嗎。

事實並非如此,對於連續資料、上下相關的資料顯示, Google Chart雲端服務提供更多的圖表顯示,來滿足更多的開發者,本文就要介紹常用來呈現連續資料、上下相關的資料的顯示利器:Line Chart圖。

Chart Gallery 介紹

我們進到Google 雲端資源:Chart Gallery,網址:https://developers.google.com/chart/interactive/docs/gallery?hl=zh-TW的雲端服務功能中,我們可以看到下圖: Google Developer Chart雲端服務功能。

 

Chart Gallery。圖/作者提供。

Line Chart介紹

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

Line Chart 雲端服務。圖/作者提供。

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

單一元件之視覺化Line Chart之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’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Sales’, ‘Expenses’],
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 660, 1120],
[‘2007’, 1030, 540]
]);

var options = {
title: ‘Company Performance’,
curveType: ‘function’,
legend: { position: ‘bottom’ }
};

var chart = new google.visualization.LineChart(document.getElementById(‘curve_chart’));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id=”curve_chart” style=”width: 900px; height: 500px”></div>
</body>
</html>

程式下載(Developers, 2016)

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

單一元件之視覺化Line Chart之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’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);

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

function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Sales’, ‘Expenses’],
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 660, 1120],
[‘2007’, 1030, 540]
]);

如下表所示,載入Chart 繪圖參數。

參數資料定義如下:

  • Title: ,圖表上方顯示之文字\
  • curveType: 使用函數
  • legend:顯示開始位置

var options = {
title: ‘Company Performance’,
curveType: ‘function’,
legend: { position: ‘bottom’ }
};

如下表所示,繪出LineChart視覺化圖表。

指令如下:

  • var chart = new google.visualization.LineChart(document.getElementById(‘curve_chart’)); →產生LineChart視覺化圖表
  • draw(data, options);→畫出LineChart視覺化圖表

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

如下表所示,在網頁上繪出圖型。

指令如下:

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

<body>
<div id=”curve_chart” style=”width: 900px; height: 500px”></div>
</body>

建立php程式碼

如下表所示,我們將抓詢資料的程式,與Line Chart的HTML進行整合,產生下列程式碼:

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

// echo $query ;

$result1=mysql_query($str1,$link);
$result2=mysql_query($str2,$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’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawChart2);

function drawChart() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
[‘DateTime’, ‘Temperature’],
<?php
if($result1!==FALSE){
while($row = mysql_fetch_array($result1)) {
printf(“[‘%s’,%f],”,
$row[“sysdatetime”], $row[“temperature”]);
}
mysql_free_result($result1);
}
?>
]);

var options = {
title: ‘ ‘,
hAxis: {title: ‘DateTime’, titleTextStyle: {color: ‘#333’}},
vAxis: {title: ‘Temperature’ , minValue: 0} ,
series: {
0: { color: ‘#ff0000’ },
1: { color: ‘#00ff00’ },
}
};

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

function drawChart2() {
// Some raw data (not necessarily accurate)
var data2 = google.visualization.arrayToDataTable([
[‘DateTime’, ‘Humidity’],
<?php
if($result2!==FALSE){
while($row = mysql_fetch_array($result2)) {
printf(“[‘%s’,%f],”,
$row[“sysdatetime”], $row[“humidity”]);
}
mysql_free_result($result2);
}
?>
]);

var options2 = {
title: ‘ ‘,
hAxis: {title: ‘DateTime’, titleTextStyle: {color: ‘#444’}},
vAxis: {title: ‘Humidity’ , minValue: 0} ,
series: {
0: { color: ‘#00ff00’ },
1: { color: ‘#0000ff’ },
}
};

var chart2 = new google.visualization.LineChart(document.getElementById(‘chart_div2’));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<div id=”chart_div” style=”width: 90%; height: 500px;”></div>
<div id=”chart_div2″ style=”width: 90%; height: 500px;”></div>
</body>
</html>

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

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

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

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

後續

本篇是『物聯網開發系列』系列中的第八篇:視覺化呈現連續資料(Google Line Chart篇),主要告訴讀者,如何利用Google Line Chart雲端服務,使用視覺化方式即時多筆連續資訊,下篇將介紹使用多筆資料之視覺化圖示,來顯示累計資料的方式逐一著墨,請讀者拭目以待。

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

敬請期待更多的文章。

作者介紹

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

Email:prgbruce@gmail.com/Line ID:dr.brucetsao/作者網頁臉書社群(Arduino.Taiwan)Github 網站Youtub

參考文獻

  • Developers, G. (2016, 2017/1/1). Visualization: Gauge. Retrieved from
    https://developers.google.com/chart/interactive/docs/gallery/gauge
  • 曹永忠. (2018). 【物聯網開發系列】視覺化資料呈現(Google Chart篇). 智慧家庭.
    Retrieved from https://vmaker.tw/archives/29327
  • 曹永忠, 許智誠, &amp; 蔡英德. (2017). 【物聯網開發系列】溫溼度裝置連線篇:傳
    送溫溼度資料到雲端. 智慧家庭. Retrieved from
    https://vmaker.tw/archives/25613

分享到社群

vMaker編輯部

vMaker公用帳號,歡迎各界朋友投稿你的maker故事,不論是個人作品、創客觀點或是創客的經驗分享,我們都十分期待能聽到您的分享。 投稿請至:contact@vmaker.tw