さくらIoT Android でグラフ表示


29171111_sakura_iot_fab_sensor_viewer

さくら IoT で温度・湿度を観測する では、
さくらIoT を経由して収集したセンサーのデータをサーバーに蓄積
しました。

今回は、サーバーからセンサーのデータを取得し、
Android で折れ線グラフとして表示するプログラムを作成しました。

作ったプログラムは Github で公開しました。

20171111_screenshot_line_chart


さくらIoT パソコンでグラフ表示


29171111_sakura_iot_fab_sensor_viewer

さくら IoT で温度・湿度を観測する では、
さくらIoT を経由して収集したセンサーのデータをサーバーに蓄積
しました。

今回は、サーバーからセンサーのデータを取得し、
パソコンで折れ線グラフとして表示するプログラムを作成しました。

作ったプログラムは Github で公開しました。

20171110_python_fab_sensor_line_chart


[Android] 分単位の時系列データの折れ線グラフ


1分単位の時系列データの折れ線グラフを実装しました。

ソースコードは、githubで公開しました。

20171101_screenshot_line_vhart_time_one_minute_interval
MPChartExample には 時系列データの折れ線グラフ line chart time が用意されています。

しかし、1時間単位に限定されているようです。

X軸 時間軸 の値として、
現在時刻を下記のように設定します。

TimeUnit.MILLISECONDS.toHours(System.currentTimeMillis())
 

これに1を加算することで、1時間後になります。

X軸 時間軸 の目盛りの表記は、
XAxis#setValueFormatter に

SimpleDateFormat("dd MMM HH:mm")

というような表記形式を設定します。

時間軸 の値を
TimeUnit#toMinutes のように1時間単位から1分単位にするか、
間軸 の値増分を1X軸 時間軸 の値の増分を1から1/60 にすれば、
いける気がしたのですが,
どちらも描画できなかった。

何か良い方法はないかと探したところ、
MPAndroidChartを使って リアルタイム更新のセンサーデータ時系列グラフ のサンプルを作ってみた
にて、任意の時間単位を実現していました。

時間軸 の値は数値ではなく文字列です。
点や線をプロットする間隔は、一定のようです。
X軸 時間軸 の目盛りにその文字列を使用します。

時間軸 の値に文字列で設定するには

LineData#addXValue( String )

というメソッドを使用します。

このメソッドは、
MPAndroidChart v2.1.6 にはありますが、
v3.0.2 にはなく、コンパイルエラーになります。

この方法で、1分単位の折れ線グラフを実現しました。


[Android] 折れ線グラフ


MPChartExample から  折れ線グラフline chart を取り出したもの

20171101_screenshot_line_chart

グラフ表示のライブラリ MPAndroidChar を使用するには、build.gradle に下記を追加する。

MPAndroidChart:v2.2.5 となっている記事もあるが、
MPAndroidChart:v3.0.2 でないとビルドできなかった。

dependencies {
repositories {
		maven { url "https://jitpack.io" }
	}  
	compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
     provided 'io.realm:realm-android:0.87.5'  

ソースコードはgithubで公開しました

参考
MPAndroidChart で簡単チャート表示


[Python] 時系列のデータのグラフ表示


グラフ描画ライブラリの matplotlib を使用します。
Python でグラフ表示

サンプルコード

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# 時系列のデータのグラフ表示

import matplotlib.pyplot as pyplot
import matplotlib.dates as mdates
import datetime
import time
import math

#1分間隔で24時間分のデータを準備する
# 時間軸のデータは、datetime オブジェクトの配列
n = 24 * 60
d = 2* math.pi/n
now = datetime.datetime.now()
xx = now

x =[]
y =[]
for i in range(0,n):
	#1分間隔
	xx  += datetime.timedelta( minutes=1 )
	x.append(xx)
	yy = math.sin( i*d )
	y.append(yy)

# subplot を設定する
fig = pyplot.figure()
ax = fig.add_subplot( 111, title='Sin Graph', xlabel='datetime', ylabel='sin' )
ax.plot(x, y)

# 時間軸の目盛りを1時間間隔にする
loc      = mdates.HourLocator()
ax.xaxis.set_major_locator(loc)

# 時間の表記を時 分 にする
daysFmt = mdates.DateFormatter('%d %H')
ax.xaxis.set_major_formatter(daysFmt)

# 時間軸の目盛りの表記を90度 回転する
fig.autofmt_xdate( rotation=90 )

pyplot.show()

実行結果
20170901_line_chart_datetime

参考
時系列データのプロット


Android でグラフ表示


グラフ描画ライブラリの MPAndroidChart を使用します。

サンプルコード
Github から MPChartExample をダウンロードして、AndroidStudio にインポートしてビルドします。

Google Play でも配布されています。

実行結果
メニュー画面
20170911_mpchart_menu

折れ線グラフ Line Chart
20170911_mpchart_line_chart

棒グラフ Bar Chart
20170911_mpchart_bar_chart

円グラフ Pi Chart
20170911_mpchart_pi_chart

参考
MPAndroidChart で簡単チャート表示