Androidで複数のグラフを表示する（AChartEngine）

■Androidで複数のグラフを表示する（AChartEngine）

ひとつの画面に複数のグラフを表示する方法です。 完成イメージは↓な感じです。

■使用するクラス
・GraphSample02（基本となるActivity。なんでもいい）
・AbstractDemoChart
・AverageTemperratureChart(折れ線グラフのサンプル)
・BudgetPieChart（円グラフのサンプル)
・IDemoChart

今回は折れ線グラフと円グラフの表示なので、上記サンプルクラスを使います。
別のグラフを表示したい場合はこのクラスを適当に変えてください。


■jarファイルの追加
・libフォルダに「achartengine-0.7.0.jar」を追加＆ビルドパスの構成。


■main.xmlにグラフ用LinearLayoutを追加
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/chart_area" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"/> <LinearLayout android:id="@+id/chart_area2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout>
chart_areaが折れ線用、chart_area2が円グラフ用です。
ここでのポイントはlayout_weightを使うところでしょうか。
これがないと、1画面内に上手に表示してくれません。


■サンプルグラフのexecuteのreturnをGraphicalViewへと変更する
AverageTemperatureChartの場合↓
public GraphicalView execute(Context context) { //～途中略～ //通常は下記のintentを返している // Intent intent = ChartFactory.getLineChartIntent(context, buildDataset(titles, x, values), // renderer, "Average temperature"); //GraphicalView へ変更 GraphicalView line_chart = ChartFactory.getLineChartView(context, buildDataset(titles, x, values), renderer); return line_chart;

BudgetPieChartの場合↓
public GraphicalView execute(Context context) { //～途中略～ //通常は下記のような返し方をしている。 // return ChartFactory.getPieChartIntent(context, buildCategoryDataset("Project budget", values), // renderer, "Budget"); //こんな感じに変更 GraphicalView piechart = ChartFactory.getPieChartView(context, buildCategoryDataset("Project budget", values), renderer); return piechart;

■IDemoChartのexecuteもGraphicalViewへ変更 //Intent execute(Context context); GraphicalView execute(Context context);

■mainのActivityからレイアウト追加 public class GraphSample02Activity extends Activity { static AverageTemperatureChart atc; static BudgetPieChart bpc; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //折れ線グラフ用 LinearLayout chart_area = (LinearLayout) findViewById(R.id.chart_area); atc = new AverageTemperatureChart(); chart_area.addView(atc.execute(this)); //円グラフ用 LinearLayout chart_area2 = (LinearLayout) findViewById(R.id.chart_area2); bpc = new BudgetPieChart(); chart_area2.addView(bpc.execute(this)); }
ここは参考サイト丸パクリ気味で申し訳ないんですが、こんな感じです。
表示したいグラフを各々入れていけばいいだけですね。


以上でできたと思うのですが、どうでしょうか？
サンプルでは2個ですが、それ以上のグラフ表示にチャレンジする勇者を募集中です。

あまり数が多くても見づらいかもしれないですけどね
ここ間違ってるぞこらっ！という心優しい突っ込みがあったら教えてください。

Androidで折れ線グラフを描く（AChartEngine）

■Androidで折れ線グラフを描く（AChartEngine）

前回の記事でAChartEngineのサンプルを動かしました。
じゃあ、個別のグラフを作りましょうか、ということでまずは、下図のような折れ線グラフ。


サンプル作成では全部のクラスを一気にインポートしましたが、今回必要になるのは
下記のクラス。とりあえずこいつらを自分のプロジェクトにコピーしてください。
（libフォルダへjarファイルのインポート→ビルドパスの追加、もお忘れなく)
・AverageTemperatureChart.java
・AbstractDemoChart.java
・IDemoChart.java

各グラフ本体がAverageTemperatureChartで、その他がextendsだったりします。
なので、今後グラフの種類を変えたい場合は、AverageTemperatureChartを別の
クラスを持ってきます。

そしていきなりコード（AverageTemperatureChartのexecute部分）↓
public Intent execute(Context context) { //各グラフ項目の名前。ここで項目数を決める String[] titles = new String[] { "Crete", "Corfu", "Thassos", "Skiathos" }; //X軸の作成 List<double[]> x = new ArrayList<double[]>(); for (int i = 0; i < titles.length; i++) { x.add(new double[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 }); } //各項目へ投入するデータ。順にtitlesで作成した項目へと投入される。 List<double[]> values = new ArrayList<double[]>(); values.add(new double[] { 12.3, 12.5, 13.8, 16.8, 20.4, 24.4, 26.4, 26.1, 23.6, 20.3, 17.2, 13.9 }); values.add(new double[] { 10, 10, 12, 15, 20, 24, 26, 26, 23, 18, 14, 11 }); values.add(new double[] { 5, 5.3, 8, 12, 17, 22, 24.2, 24, 19, 15, 9, 6 }); values.add(new double[] { 9, 10, 11, 15, 19, 23, 26, 25, 22, 18, 13, 10 }); //各項目のグラフの色 int[] colors = new int[] { Color.BLUE, Color.GREEN, Color.CYAN, Color.YELLOW }; //各項目のグラフポイントのスタイル PointStyle[] styles = new PointStyle[] { PointStyle.CIRCLE, PointStyle.DIAMOND, PointStyle.TRIANGLE, PointStyle.SQUARE }; XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles); int length = renderer.getSeriesRendererCount(); for (int i = 0; i < length; i++) { ((XYSeriesRenderer) renderer.getSeriesRendererAt(i)).setFillPoints(true); } //グラフタイトル、X軸、Y軸のタイトルおよびX軸最小値、最大値、Y軸最小値、最大値の設定 setChartSettings(renderer, "Average temperature", "Month", "Temperature", 0.5, 12.5, 0, 32, Color.LTGRAY, Color.LTGRAY); renderer.setXLabels(12); renderer.setYLabels(10); renderer.setShowGrid(true); renderer.setXLabelsAlign(Align.RIGHT); renderer.setYLabelsAlign(Align.RIGHT); renderer.setZoomButtonsVisible(true); //表示されるX軸とY軸の最小最大。 //ここでXYともに最小を0にするとグラフのマイナス表示がない renderer.setPanLimits(new double[] { -10, 20, -10, 40 }); renderer.setZoomLimits(new double[] { -10, 20, -10, 40 }); //return用Intentの作成。ここをGraphicalViewにし、returnもGraphicalViewにすると、 //各レイアウトへの入れ込みが可能となる。 //その場合使用するメソッドはChartFactory.getLineChartViewとなる。 //例）GraphicalView line_chart = ChartFactory.getLineChartView(context, buildDataset(titles, x, values), renderer); //（返値もGraphicalViewへ変更すること) Intent intent = ChartFactory.getCubicLineChartIntent(context, buildDataset(titles, x, values), renderer, 0.33f, "Average temperature"); return intent; }

元のコードに日本語で解説を加えました。
知ってしまうとなんてことない内容なので、それほど難しくないと思います。
特に、返値のIntentをGraphicalViewに変更したほうが非常に便利なため、おすすめです。
前回も紹介しましたが、こちらの記事を参考にするとわかりやすいです。

GraphicalViewに変更した場合、IDemoChart.javaのexecuteも同じく
IntentからGraphicalViewへと変更してください。

あとはマニフェストファイルへの記述追加（元のサンプル参照）を忘れないようにしてください。
だんだん面倒くさくなってきたので今回はこの辺にしときます
次は複数グラフの組み合わせとかやりたいなー。

Androidでグラフ（AChartEngine)のサンプルを作る

■Androidでグラフ（AChartEngine)のサンプルを作る

グラフ作成は結構ニーズがあると思うのですが、Androidでやろうとすると
結構面倒くさいことにうすうす気が付きながら放置しておりました。

ただ、使えると今後の幅が広がるだろうという見切り発車で学習を頑張ってみます。

で、グラフを使うには　GoogleAPI　を使うのが一番簡単そうであったんですが、
これだとグラフ作成するときにイチイチ通信しなければいけなさそうで。
通信環境にない場所では使えない、ではお話にならないので今回は見送り。
（もともとがWEB用途というのもあるわけですが。）

さらに検索を続けると、どうやら「AChartEngine」てのがスタイリッシュで
よさそうなのでこれに決定。見た目重視です。

ということで、まずはコレのサンプルを動かすところまでやってみたいです。


1.「AChartEngine」のサンプルをゲット
ここ　からダウンロードできます。
・demo-source.zip
・javadocs.zip
・jar
があるので、最新のこれらを1セットでゲットしておきましょう。


2．とりあえずサンプルを動かしてみる
先ほどの、「achartengine-0.7.0-demo-source.zip」（記事作成時）を解凍すると、
サンプルプロジェクトが出てきます。
これを、新規→Androidプロジェクト→外部ソースからプロジェクトを作成　で
フォルダを選択し、ビルドターゲットを2.3とか適当に合わせましょう。
(Eclipsの場合)


3．各種グラフの確認
プロジェクトをインポートしたら、そのまま実行すると、下のような画面が
出てくると思います。
これで各種グラフのサンプルを見ることができました。
中身の数値を変更するといろいろと形を変えることができると思うので、
こだわらない人はそのまま使うのもアリだと思います。

現時点でプログラムの中身を見ると、各グラフ作成クラスがIntentを返して
くれるんだね、ふむふむ・・・なるほど、わからん


あと、円グラフの解説なんかは、こちらのサイトが参考になると思います。