グラフ作成！(Holo Graph Library編)

# グラフが簡単に作成出来るライブラリを使う！

今回は、Holo Graph Libraryというものを使用します。
日本語の記事があまりなかったので書いてみようと思います。
すごくいいです。折れ線グラフ、棒グラフ、円グラフが簡単に作成できます。

実際に使用するように、データベースから取り出した値をグラフに反映してみましょう。

# ライブラリを取込み

Bitbucktからプロジェクトをcloneしてきましょう。↓です。
https://bitbucket.org/danielnadeau/holographlibrary/wiki/Home

git clone https://bitbucket.org/danielnadeau/holographlibrary.git

cloneしてきた、プロジェクトをEclipseでimport

その後、project→properties→AndroidのLibraryで、addを押して先ほどimportしてきたprojectをLibraryに指定します。

準備OK!

# 折れ線グラフ

xmlの準備

```xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.echo.holographlibrary.LineGraph
        android:id="@+id/holo_graph_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>
```

線グラフに指定したいviewにcom.echo.holographlibrary.LineGraphを指定します。


それでは折れ線グラフを作成してみます。
SQLiteで始めに１００件ほど、0から1の間の値をランダムで生成し、保存します。
これをグラフに反映させます。

```MainActivity.java
import android.app.Activity;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Window;

import com.echo.holographlibrary.Line;
import com.echo.holographlibrary.LineGraph;
import com.echo.holographlibrary.LinePoint;

public class MainActivity extends Activity {

	private ExampleOpenHelper mExampleOpenHelper;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		mExampleOpenHelper = new ExampleOpenHelper(this);
		SQLiteDatabase db = mExampleOpenHelper.getReadableDatabase(); //データベース取得
		Cursor cursor = db.rawQuery("SELECT * from example", new String[] {});

		// 折れ線グラフ
		int number = 0;
		Line line = new Line();
		boolean next = cursor.moveToFirst();
		while (next) {
			LinePoint linePoint = new LinePoint();
			linePoint.setY(cursor.getFloat(1)); //ランダムで生成した値をSet
			linePoint.setX(number); //x軸を１ずつずらしてSet
			linePoint.setColor(Color.parseColor("#9acd32")); // 丸の色をSet
			line.addPoint(linePoint);
			next = cursor.moveToNext();
			number++;
		}
		line.setColor(Color.parseColor("#9acd32")); // 線の色をSet

		LineGraph graph = (LineGraph) findViewById(R.id.holo_graph_view);
		graph.addLine(line);
		graph.setRangeY(0, 1); // 表示するY軸の最低値・最高値 今回は0から1まで
		graph.setRangeX(0, cursor.getCount()); // 表示するX軸の最低値・最高値　今回は0からデータベースの取得したデータ分まで

		cursor.close();
		db.close();
		mExampleOpenHelper.close();
	}


	private class ExampleOpenHelper extends SQLiteOpenHelper {
		public ExampleOpenHelper(Context context) {
			super(context, "sample.db", null, 1);
		}
		@Override
		public void onCreate(SQLiteDatabase db) {
			/**
			 *  name: exampleテーブル
			 *  test:value
			 */
			db.execSQL("CREATE TABLE example(id INTEGER PRIMARY KEY AUTOINCREMENT, test REAL NOT NULL);");

			// 初期データの投入 100件
			for(int i=0;i<=100;i++){
				db.execSQL("INSERT INTO example(test) values('"+ Math.random() +"')");
			}
		}
		@Override
		public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
		}
	}
}
```

こんな感じになります。
![Screenshot_2014-05-25-23-03-14.png](https://qiita-image-store.s3.amazonaws.com/0/30138/7d24fcf8-42d9-15a5-d3dc-9aa7f707dfdb.png)



基本的な流れは、以下

```
Line line = new Line();
LinePoint linePoint = new LinePoint();

linePoint.setX(0); //x軸の値
linePoint.setY(5); //y軸の値
line.addPoint(linePoint);
line.setColor(Color.parseColor("#FFBB33"));

LineGraph lineGraph = (LineGraph)findViewById(R.id.graph);
lineGraph.addLine(line);
line.setRangeY(0, 10);
```

いいですね！

# 棒グラフ

```xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.echo.holographlibrary.BarGraph
        android:id="@+id/holo_graph_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>
```

先程の折れ線グラフの箇所を修正

```java:MainActivity.java

		Cursor cursor = db.rawQuery("SELECT * from example LIMIT 10", new String[] {}); // 10件取得

		// 棒グラフ
		ArrayList<Bar> points = new ArrayList<Bar>();
		int number = 0;
		boolean next = cursor.moveToFirst();
		while (next) {
			Bar bar = new Bar();
			bar.setColor(Color.parseColor("#ff69b4"));
			bar.setValue(cursor.getFloat(1));
			bar.setName(""+number);
			points.add(bar);
			next = cursor.moveToNext();
			number++;
		}

		BarGraph graph = (BarGraph) findViewById(R.id.holo_graph_view);
		graph.setBars(points);

```

![Screenshot_2014-05-25-23-17-56.png](https://qiita-image-store.s3.amazonaws.com/0/30138/e24d499c-8dd9-6a6e-5a37-5986f4378c87.png)


基本的な流れは、以下

```
ArrayList<Bar> points = new ArrayList<Bar>();
Bar d = new Bar();
d.setColor(Color.parseColor("#99CC00"));
d.setName("Test1");
d.setValue(10);
Bar d2 = new Bar();
d2.setColor(Color.parseColor("#FFBB33"));
d2.setName("Test2");
d2.setValue(20);
points.add(d);
points.add(d2);

BarGraph g = (BarGraph)findViewById(R.id.graph);
g.setBars(points);
```

いいですね！

※１００件分で描画しようとすると、棒グラフが潰れてしまいました。
データベースの値の数に応じて横幅をとって、ScrollViewでスクロール出来る横画面を実装するのもいいかもしれません。※未検証

# 円グラフ

```xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.echo.holographlibrary.PieGraph
        android:id="@+id/holo_graph_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>
```

先程の棒グラフ箇所を修正

```java:MainActivity.java
		// 円グラフ
		PieGraph pg = (PieGraph)findViewById(R.id.holo_graph_view);
		String[] color = {"#99CC00","#FFBB33"};

		boolean next = cursor.moveToFirst();
		int number = 0;
		while (next) {
			PieSlice slice = new PieSlice();
			int i = number % color.length;
			slice.setColor(Color.parseColor(color[i])); //色を交互に指定
			slice.setValue(cursor.getFloat(1)*10); // 1以上じゃないとダメ?
			pg.addSlice(slice);
			next = cursor.moveToNext();
			number++;
		}
```

![Screenshot_2014-05-25-23-34-06.png](https://qiita-image-store.s3.amazonaws.com/0/30138/d7a0c614-3026-5e6f-b8f7-2d8ad326ad99.png)

※slice.setValueに１未満の０．〇〇を指定するとグラフが出てこなかったので10をかけてます。

基本的な流れは、以下

```java
PieGraph pg = (PieGraph)findViewById(R.id.graph);
PieSlice slice = new PieSlice();
slice.setColor(Color.parseColor("#99CC00"));
slice.setValue(2);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#FFBB33"));
slice.setValue(3);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#AA66CC"));
slice.setValue(8);
pg.addSlice(slice);
```

いいですね！

## 参考
https://bitbucket.org/danielnadeau/holographlibrary/wiki/Home
http://dev.classmethod.jp/smartphone/android/android-tips-holographlibrary/