Androidのアプリ内でグラフを描画する際にMPAndroidChartというライブラリを使うことがあるのですが，つい最近音声データをリアルタイムでグラフ化するアプリを作りました．
リアルタイムで折れ線グラフを更新していくサンプルプログラムはライブラリを落とすことで見ることができます．しかし，サンプルコードには折れ線グラフ1本を描画するもので，複数のグラフの描き方は載っていませんでした．（どこかに載ってたのかもしれませんが）という訳で今回は複数の折れ線グラフをリアルタイムで更新していくプログラムのサンプルを載せます．
サンプルプログラムを読む
取り敢えずMPAndroidChartのライブラリを落としてサンプルプログラムを見てみます．目的のプログラムは次の場所にあります．
MPAndroidChart-3.0.2/MPChartExample/src/com/xxmassdeveloper/mpchartexample/RealtimeLineChartActivity.java
private LineChart mChart;
private void addEntry() {
LineData data = mChart.getData();
//dataの中身が空の場合mChartからグラフデータを取得
if (data != null) {
//リアルタイムでデータを更新する場合はILineDataSetを使う
//データをセットする際にインデックスを指定
ILineDataSet set = data.getDataSetByIndex(0);
//setの中身が空の場合dataに追加
if (set == null) {
set = createSet();
data.addDataSet(set);
}
//新しいデータを追加
data.addEntry(new Entry(set.getEntryCount(), (float) (Math.random() * 40) + 30f), 0);
//更新を通知
data.notifyDataChanged();
mChart.notifyDataSetChanged();
mChart.setVisibleXRangeMaximum(120);
mChart.moveViewToX(data.getEntryCount());
}
}
上はデータを追加する関数です．サンプルではこの関数をなんども呼び出し，中でてきとうな値を生成して新しいデータとして追加しています．
流れとしては次のような感じです．
LineDataを作成してLineChartからデータを取得
→ ILineDataSetを作成してデータをセット（この時インデックスを指定する）
→ LineData内にILineDataSetを追加（インデックスでどのグラフにデータを追加するかを指定）
→ 更新を通知
ILineDataSetを作成する際にインデックスを指定しますが，ILineDataSetを複数作成しインデックスを変えることで複数のグラフを書くことができます．
複数のグラフを描画してみる
private LineChart mChart;
private void addEntry() {
LineData data = mChart.getData();
//dataの中身が空の場合mChartからグラフデータを取得
if (data != null) {
//リアルタイムでデータを更新する場合はILineDataSetを使う
//データをセットする際にインデックスを指定
ILineDataSet set1 = data.getDataSetByIndex(0);
//2本目のグラフ（インデックスを1に）
ILineDataSet set2 = data.getDataSetByIndex(1);
//setの中身が空の場合setを初期化してdataに追加
if (set == null) {
set1 = createSet();
set2 = createSet();
data.addDataSet(set1);
data.addDataSet(set2)
}
//新しいデータを追加
//引数でデータを追加するグラフを指定
data.addEntry(new Entry(set1.getEntryCount(), (float) (Math.random() * 40) + 30f), 0);
data.addEntry(new Entry(set2.getEntryCount(), /*Float型の何かてきとうな値*/), 1);
//更新を通知
data.notifyDataChanged();
mChart.notifyDataSetChanged();
mChart.setVisibleXRangeMaximum(120);
mChart.moveViewToX(data.getEntryCount());
}
}
これで複数のグラフを描画することができます．
全部で9本の線を描画しました．最大でどのくらいの本数を引くことができるかは不明ですが，特に問題なく動いています．