update.BoothLowEnergyの電波強度の測定アプリを作る際に「JFreeChart以外で何か良いグラフ描画ライブラリがないだろうか?」って思って見つけた「MPAndroidChart」を使ってサンプルアプリを作った話です。ネット上では日本語でこのライブラリについて書いているドキュメントはいくつかあるのですが、リアルタイム更新について書かれたものは見つかりませんでした。(MPAndroidChartについて書かれた日本語のブログは一番下の「参考サイト」で紹介します。)なので、リアルタイム更新について取り扱った記事を書きます!このグラフで何ができるか?リアルタイムでグラフを更新していくにはどうしたらいいか?というのをつかんでいただけたら幸いです。Johada氏が作ったAndroid用グラフ描画ライブラリです。(2015/12/30時点での最新バージョンは2.1.6)https://github.com/PhilJay/MPAndroidChartMPAndroidChartを使えば以下のことができます。・折れ線グラフ、棒グラフ、円グラフ、箱ひげ図、レーダーチャートなど数多くのグラフの描画。・ピンチインによるグラフの拡大・縮小、グラフの表示領域のスクロール。・X座標・Y座標のスタイル・最大値・グリッドなどきめ細かい調整。・凡例の表示位置・スタイルなどのきめ細かい調整。・動的にグラフの中身の更新Apache2.0で公開されているので気軽にプロダクトに取り込むことができます。今回作ったリアルタイム更新のセンサーデータ時系列グラフサンプル「センサー開始」ボタンをタップしたら、波形グラフの点がどんどん描画されていくようなアプリです。(0.5秒おきに点が追加されていきます)このアプリで使ったMPAndroidChartはv2.1.6です。このアプリのソースはGithubにあげていますので、ダウンロードして動かしてみてください。https://github.com/LyricalMaestro/MPAndroidChartSampleMPAndroidChartをプロジェクトに取り込むMPAndroidChartをプロジェクトに取り込むにはappモジュール直下のbuild.gradleに以下のコードを追記します。'com.github.PhilJay:MPAndroidChart:v2.1.6'}そのあと、GradleSyncを行えばOKです。今回実装の際に参考にしたソースはRealtimeLineChartActivity.javaになります。これを踏まえて解説していきます。今回のサンプルアプリを作るのに必要なクラスとその関連について以下にまとめます。各クラスについての説明は以下の通りです。・LineChart:グラフを描画するためのビュー。・LineData:グラフ描画対象のモデルクラス。1つのグラフに複数本折れ線を描くためにLineDataSetをn個参照できるようになっている。(が、今回は1本しかかかないのでnのところは常に1。)・LineDataSet:折れ線一本に対応するモデル。・Entry:節一つ一つに対応する。上のキャプチャで示しているサンプルアプリでは水色のドッドに対応する(青い線上にのっています)Chartの初期化Activity起動時に行います。LineDataの初期化を行います。レイアウトActivityでセットするlayout.xmlは以下のように書きます。LineChartをレイアウトに組み込むのに特殊なことはしなくてもOKです。/></LinearLayout>コード上でのChartの設定Activity初期化時にChartのX軸・Y軸・凡例などの初期化を行っています。コードを見て、前半については各メソッドがどんな設定をしているか察しがつくと思いますが、凡例・X軸・Y軸についてはピンとこないものもあるのでそれを解説します。・xl.setLabelsToSkip(9)X軸につけるEntry(ここでいう点)に対するラベルの間隔を指定しています。N個とばしでつける」というような指定をします。MPAndroidChartのX軸はデフォルトでEntryごとにX軸のラベルをつけるようになっていますが、Entryが多くなるとX軸のラベルが非常に読みにくくなるのでこの場合はあえて「5秒おき」という意味を込めてつけています。・leftAxis.setAxisMaxValue,leftAxis.setAxisMinValue,leftAxis.setStartAtZeroY軸の表示範囲を指定しています。MaxValueとMinValueの設定がないと設定されているLineDataSet内のEntryたちを基に計算してしまいます。静的なグラフの場合はこれで問題ないと思いますがリアルタイムにデータが追加されていくようなものだとデータ追加の旅にY軸の表示範囲が変わってしまうのでグラフとしてはみずらくなります。setStartAtZeroはデフォルトではtrueになっておりこの状態ではMinValueにマイナスの値を設定する場合は効果がなくなってしまいます。(このメソッドの意味は「左下は必ず0始まりにする」という意味)・rightAxis.setEnabled(false)Y軸(右側)を消すためのメソッドです。デフォルトではY軸は左側・右側両方に表示するのですが、少し邪魔だったので今回は消しました。データ追加描画処理データが追加されるたびに以下の処理を実行します。Entryについての処理になります。一発目この処理が流れる時にだけLineDataSetのインスタンスを設定します。上記コードの第一引数はEntryのリストを設定するのですが、のちの処理で追加していくので今回はなしです。第2引数は凡例に表示されるテキストになります。0)のメソッドでデータ追加を行っています。普通に考えればaddEntryだけすればいいとは思いますが、対応するX軸ラベルも付けないとうまくいかないのでaddXValueも実行しています。公式ドキュメントにも書いているのですが、データ追加した結果をグラフに反映させるためには必ず以下のコードを実行しなければなりません。mChart.notifyDataSetChanged();mChart.invalidate();しかし、「データ追加描画処理」のコードではmChart.invalidateを呼び出していません。これはmChart.moveViewToXの内部でmChart.invalidateを呼び出しているためです。(ちなみにこのmoveViewToXはデータ追加していくたびに昔のデータをどんどん左側によせるようにみせるためにやっています。Monitorの動きを想像していただければわかるかなと思います)・mChart.setVisibleXRangeMaximum(60);これはX軸に表示する最大のEntryの数を指定しています。Chartそのものの設定なはずなのにChart初期化のところでなくデータ追加描画のたびに呼び出しているのは、notifyDataSetChangedを実行するとこの設定が一回リセットされて60個以上点が描画されてしまうと現象が起こったからです。(どうしてそうなるか?というのはソースコードを読めばわかると思うのですが、まだです、すみません)これらの処理を書き終えたら...きちんとうごくか確認してOKという感じです。スタイルなどをアレンジしたければ適宜変えていっても面白いと思います。まとめ今回は「リアルタイム更新のセンサーデータ時系列グラフ」のサンプルを作っていく、という体を以ってMPAndroidChartを使ったプログラム作成の例を示しました。MPAndroidChartをうまくつかえばこれ以外にももっと素晴らしいグラフを実装することができます。みなさんもこのライブラリを使って、アプリ内でかっこいいグラフを描画してみてはいかがでしょうか。※おまけ実はiOS版もあったりするらしいです。requestStockLike55まえすとろ@LyricalMaestro0よろしくお願いいたします。・GooglePlayにアプリをリリースしています。upLoginユーザーは見つかりませんでした。