aiChartsサンプル:バブルチャート

概要

バブルチャートは3種類の数値のパラメータを使って定義づけされているチャートです。一つ一つのデータはそれぞれの視覚化フィールドに結び付けられています。データはチャート内に表現される点の大きさと場所を制御しています。よって、泡(バブル)のように見えます。このチャートは3つのデータ項目に分かれる場合にポイントチャート(散布図)に代わり使用できます。

折れ線チャートではX軸がカテゴリーを、Y軸がそれに従属する数値を表しています。しかしバブルチャートではX軸とY軸はどちらもそれぞれの数値を表しており、グラフ内での配置により軸の2項目と残りの1項目が面積によって表現され、その値の大小を比較できます。これにより社会的、経済的、医療的、およびその他の科学的な要素の理解を円滑にすることができます。

一つの点に対して3つの数値がある場合、連続した複数のデータ、または負の数がある場合、バブルチャートを有効的に利用できます。

バブルチャートを作るには

aiChartsは少ないコードで簡単にバブルチャートを作ることができます。
バブルチャートを作るには、まずはChartSeriesのインスタンスを作り、チャートタイプ(作図タイプ)をBubbleに設定し、データをセットします。

ソースコードは以下のようになります。

サンプルダウンロードはこちら(ZIP,14KB)

イメージ図

XML アクティビティレイアウト


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <com.artfulbits.aiCharts.ChartView
    android:id="@+id/chartView"
    chart="@xml/chart"
    android:background="@android:drawable/alert_dark_frame"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
</LinearLayout>

Java


package com.artfulbits.aiCharts.bubblesample;

import android.app.Activity;
import android.os.Bundle;

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Base.*;
import com.artfulbits.aiCharts.Base.ChartAxis.LabelsMode;
import com.artfulbits.aiCharts.Types.ChartBubbleType;

public class MainActivity extends Activity
{
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		String[] labels = {"cow", "chicken", "pig", "turkey"};
		double[] ages = { 5, 1, 2, 1.4 };
		double[] weights = { 520, 3, 180, 9 };

		ChartView chartView = (ChartView) findViewById(R.id.chartView);
		ChartSeries series = chartView.getSeries().get(0);

		for (int i = 0; i < labels.length; i++)
		{
			ChartPoint point = series.getPoints().addXY(i, ages[i], weights[i] );

			point.setAxisLabel(labels[i]);
		}

		series.setLabelFormat("%YVALUE1$#% kg");
		series.setAttribute(ChartBubbleType.MIN_RADIUS, 5);
		series.setAttribute(ChartBubbleType.MAX_RADIUS, 50);

		ChartArea area = chartView.getAreas().get(0);

		area.getDefaultXAxis().setLabelsMode(LabelsMode.SeriesLabels);
	}
}

XMLチャート


<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area>
	 <area.xaxis title="animals"/>
	 <area.yaxis title="age (years)" scale_min="0" scale_max="10"/>
	</ai:area>
	<ai:series type="Bubble" showLabel="true"/>
	<ai:title text="Animals weights" dock="Top"/>
</ai:chart>