Arduino 筆記 - 製作一個溫溼度記錄器 (3)

在前一篇文章中，我們寫了一支 Log 程式，這支 Log 程式可以把 Arduino 傳來的溫溼度資料保存到檔案中，而且我們也用 Excel 的圖表功能繒製了溫溼度的折線圖。接下來再來做一張圖表，我們要畫「過去 24 小時溫溼度變化圖」，參考底下中央氣象局的過去24小時溫度與溼度變化圖這兩張圖，我們要製作的圖表差不多就是這個樣子。另外，這一次不再使用 Excel，我們將改用 Google Chart API 製作圖表。

(圖片來源：中央氣象局)

 

上圖是 Log 程式保存起來的溫溼度資料檔，目前 Arduino 每兩秒就送出一筆溫溼度資料，因為這個檔案資料量比較龐大，不適合直接拿來畫「過去 24 小時溫溼度變化圖」。要製作「過去 24 小時溫溼度變化圖」，其實我們只需要過去 24 小時的溫溼度資料，而且每個小時只要一筆，總共只要 24 筆資料就夠了。為了方便說明，我們假設原始溫溼度資料檔已經事先經過轉檔，只留下最近 24 小時的資料，例如底下這個檔案(last24hours.csv) 是 1/18 20:00 到 1/19 19:00 這 24 小時的溫溼度資料，我們將以這份資料來說明：

使用 Google Chart API 畫過去 24 小時溫溼度變化圖

http://chart.apis.google.com/chart?chtt=%E9%81%8E%E5%8E%BB24%E5%B0%8F%E6%99%82%E6%BA%AB%E5%BA%A6%E8%AE%8A%E5%8C%96%E5%9C%96&cht=lc&chs=700x180&chd=t:17.2,17.1,17.2,16.9,16.9,16.8,16.7,16.6,16.6,16.7,16.7,16.5,17.0,17.0,18.5,18.3,18.3,17.8,18.3,17.8,17.6,17.2,16.2,16.4&chxt=x,y,x,y&chxl=0:|19|20|21|22|23|00|01|02|03|04|05|06|07|08|09|10|11|12|12|14|15|16|17|18|19|1:|16|18|20|2:|Hour|3:|Temp.&chxp=2,50|3,50&chds=16,20&chg=10,20&chm=N*f1*,000000,0,-1,11&chf=bg,s,FFE4E1|c,s,FFFFC5

要用 Google Chart API 畫圖表很簡單，只要在瀏覽器網址列輸入上面的 URL，就會得到這張「過去 24 小時溫度變化圖」：

http://chart.apis.google.com/chart?chtt=%E9%81%8E%E5%8E%BB24%E5%B0%8F%E6%99%82%E6%BA%BC%E5%BA%A6%E8%AE%8A%E5%8C%96%E5%9C%96&cht=lc&chs=700x180&chd=t:77,79,79,81,84,85,85,86,86,86,86,87,86,86,83,80,80,82,81,80,79,79,81,83&chxt=x,y,x,y&chxl=0:|19|20|21|22|23|00|01|02|03|04|05|06|07|08|09|10|11|12|12|14|15|16|17|18|19|1:|0|20|40|60|80|100|2:|Hour|3:|RH&chxp=2,50|3,50&chg=10,20&chm=N*f0*,000000,0,-1,11&chf=bg,s,DDF8CC|c,s,FFFFC5

輸入上面的 URL，就會得到這張「過去 24 小時溼度變化圖」：

很驚訝吧！？跟中央氣象局的圖表比較起來，Google Chart API 畫出來的這兩張圖表，是不是幾乎一模一樣呢？

也就是說，我們只要丟適當的參數到 http://chart.apis.google.com/chart? 這個網址，Google Chart API 就會幫我們畫出圖表。這些參數的用途為何，底下簡單說明：

chtt 是設定圖表標題，因為中文需要以 UTF-8 碼表示，所以我們給的「過去24小時溫度變化圖」和「過去24小時溼度變化圖」這兩個標題事先已經經過 UTF-8 編碼。我們選擇畫折線圖 (cht=lc)。把圖表尺寸設定為 700x180(chs=700x180)。最重要的是以 chd 設定溫度與溼度的資料。其它則是外觀的設定，例如溫度圖表背景以淺玫瑰色填滿，而圖表以近亮黃色填滿(chf=bg,s,FFE4E1|c,s,FFFFC5)，溼度圖表背景以近亮綠色填滿，而圖表以近亮黃色填滿(chf=bg,s,DDF8CC|c,s,FFFFC5)。我們用 chxl 設定 X, Y 座標軸值，用 chds 設定溫度資料範圍為 16 到 20 度之間(chds=16,20)。標記資料點(chm=N*f1*,000000,0,-1,11)，讓它顯示數值，型態為浮點數，精確度小數一位(溼度的精度則是小數 0 位), 顏色碼 000000 (黑色), 使用 11 號字型顯示。

我們也可以把 Google Chart API 產生的圖表放到網頁裏，只要把 URL 寫在 <img> 標籤的 src 屬性裏就可以了，像這樣：

CSV 檔轉成圖表

把溫溼度資料當成參數丟到 Google Chart API 的網址，當然也可以產生圖表，不過比較麻煩，因為參數都是以人工手動的方式輸入的，過程非常花時間。其實過去 24 小時的溫溼度資料已經保存在 CSV 檔裏面了(last24hours.csv)，如果可以直接把 CSV 檔轉成圖表會更加方便。底下就是一個簡單的網頁程式(csv.htm)，我們在 javascript 裏處理 CSV 檔，把 CSV 檔丟到 Google Chart API，讓網頁程式直接把 CSV 檔轉成圖表：

 

我用了兩個 javascript library，一個是 jQuery，它可以幫我簡化程式的寫法，另外一個是 jQuery 的 csv 外掛，它可以幫我把 CSV 格式的資料轉成二維陣列。

開啟 csv.htm 這個網頁，就會看到過去 24 小時溫度與溼度變化圖：

這支範例程式可以點這裏取得，把它上傳到網站上，然後用瀏覽器來看即可看到圖表。

總結

我們已經使用 Google Chart API 畫出「過去 24 小時溫溼度變化圖」，並且以 javascript 處理 CSV 檔，讓儲存在 CSV 檔中的溫溼度資料可以直接轉成圖表。你也許想用其它工具來製作圖表，底下條列了一些工具，你甚至也可以使用一些免費的網路服務，例如 Pachube 資料與圖表管理服務，直接把資料丟到 Pachube 上，然後讓 Pachube 幫你製作圖表，這樣一來就省事多了，既不用煩惱該把資料存到哪裏，也不用再自己製作圖表，只需要一個 Pachube 帳號和一台可以上網的 PC 或手持裝置就可以了。

• GNUplot: http://www.gnuplot.info/
• MRTG: http://oss.oetiker.ch/mrtg/
• RRDTool: http://oss.oetiker.ch/rrdtool/
• Python + matplotlib: http://matplotlib.sourceforge.net/
• R: http://www.r-project.org/
• CACTI(based on RRDTool): http://www.cacti.net/
• flot: http://code.google.com/p/flot/
• jqPlot: http://www.jqplot.com/
• dygraphs: http://dygraphs.com/
• Open Flash Chart: http://teethgrinder.co.uk/open-flash-chart/

參考資料

• Google Chart API
• jQuery
• jQuery CSV plugin
• Pachube