Posted by: Wildan Maulana | August 14, 2009

[Draft] Bar Charts

Tentukan sebuah grafik bar dengan

cht=<bar chart style>

Dimana <bar chart style> adalah bhs, bhg, bvs atau bvg seperti dijelaskan pada tabel berikut :

Tergantung pada style grafik batang, beberapa data set digambar sebagai grafil batang yg bertumpuk atau berkelompok. Untuk informasi tentang bagaimana menentukan beberapa data set, silahkan lihat Menggunakan beberapa data series.

Untuk informasi parameter-parameter apa yang dapat digunakan, lihatlah Parameter-Parameter Opsional berdasarkan tipe grafik.

Parameter Keterangan Contoh
cht=bhs Grafik batang horisontal dengan batang yang bertumpuk.

Contoh pertama (semua batang berwarna biru gelap) memiliki sebuah data set.

Contoh kedua (batang-batang berwarna biru dan biru pucat) memiliki dua buah data set.

Seperti dapat anda lihat, beberapa data set dibuat bertumpuk. Anda harus menentukan sebuah warna untuk setiap data set. Anda juga dapat menentukan sebuah warna untuk setiap data, atau batang dalam sebuah dataset. Silahkan lihat Warna untuk informasi tentang bagaimana menentukan warna.

Contoh kedua tidak menggunakan data scaling. Titik-titik data yang telah dikombinasikan memiliki nilai lebih dari 100 hanya sebagian terlihat. Silahkan lihat Enkoding Teks dengan data scaling untuk informasi lebih lanjut mengenai data scaling.

bhs Google Chart

bhs Google Chart

bhs OpenFlash Chart

bhs OpenFlash Chart

		$data = array(10,20,30,40,50,60,70,80);
		$OpenThinkChart = new OpenThinkChart('bhs','t');
		$OpenThinkChart->title = 'Bar Chart (bhs)';
		$OpenThinkChart->width = 320 ;
		$OpenThinkChart->height = 210 ;
		$OpenThinkChart->add_data(array_values($data),'4D89F9'); // adding values
		$OpenThinkChart->chart->chbh = 'a' ;

http://openthink-labs.wm/chart?cht=bhs&chco=4D89F9&chbh=a&chd=t:10,20,30,40,50,60,70,80&chtt=Bar+Chart+(bhs)&chs=320×210

bhs Google Chart

bhs Google Chart

bhs OpenFlash Chart

		$data = array(10,50,60,80,40);
		$data2 = array(50,60,100,40,20);
		$OpenThinkChart = new OpenThinkChart('bhs','t');
		$OpenThinkChart->title = 'Bar Chart (bhs)';
		$OpenThinkChart->width = 320 ;
		$OpenThinkChart->height = 210 ;
		$OpenThinkChart->add_data(array_values($data),'d01f3c'); // adding values
		$OpenThinkChart->add_data(array_values($data2),'356aa0');
		$OpenThinkChart->chart->chbh = 'a' ;


http://openthink-labs.wm/chart?cht=bhs&chco=d01f3c,356aa0&chbh=a&chd=t:10,50,60,80,40|50,60,100,40,20&chtt=Bar+Chart+(bhs)&chs=320×210

cht=bvs Grafik batang vertikal, dengan batang yang bertumpuk.

Contoh ini menggunakan dua buah data set, dan menggunakan data scaling untuk memastikan semua batang
terlihat.

bvs Google Chart

bvs Google Chart

bvs OpenFlash Chart

bvs OpenFlash Chart

		$data = array(10,50,60,80,40);
		$data2 = array(50,60,100,40,20);
		$OpenThinkChart = new OpenThinkChart('bvs','t');
		$OpenThinkChart->title = 'Bar Chart (bvs)';
		$OpenThinkChart->width = 320 ;
		$OpenThinkChart->height = 210 ;
		$OpenThinkChart->add_data(array_values($data),'d01f3c'); // adding values
		$OpenThinkChart->add_data(array_values($data2),'356aa0');
		$OpenThinkChart->chart->chbh = 'a' ;
		$OpenThinkChart->chart->chds = '0,160' ;

http://openthink-labs.wm/chart?cht=bhs&chco=d01f3c,356aa0&chbh=a&chd=t:10,50,60,80,40|50,60,100,40,20&chtt=Bar+Chart+(bhs)&chs=320×210

cht=bhg Grafik batang horisontal, dengan batang yang dikelompokkan.
bhg Google Chart

bhg Google Chart

bhg OpenFlash Chart

bhg OpenFlash Chart

cht=bvg Grafik batang vertikal, dengan batang yang dikelompokkan.
bvg Google Chart

bvg Google Chart

bvg OpenFlash Chart

bvg OpenFlash Chart

		$data = array(10,50,60,80,40);
		$data2 = array(50,60,100,40,20);
		$OpenThinkChart = new OpenThinkChart('bvg','t');
		$OpenThinkChart->title = 'Bar Chart (bvg)';
		$OpenThinkChart->width = 320 ;
		$OpenThinkChart->height = 210 ;
		$OpenThinkChart->add_data(array_values($data),'d01f3c'); // adding values
		$OpenThinkChart->add_data(array_values($data2),'356aa0');

http://openthink-labs.wm/chart?cht=bvg&chco=d01f3c,356aa0&chd=t:10,50,60,80,40|50,60,100,40,20&chtt=Bar+Chart+(bvg)&chs=320×210

chbh Lebar default untuk sebuah batang adalah 23 pixel. Jika anda menentukan jumlah batang yang terlalu banyak dibandingkan dengan ukuran grafik, maka tidak semua batang akan muncul.

Untuk mengatasi masalah ini gunakan opsi chbh=a, dengan opsi ini, maka batang-batang
akan menyesuaikan ukurannya sehingga seluruhnya pas dengan ukuran grafik.

Untuk opsi yang lainnya, silahkan lihat Lebar dan spasi batang

Catatan :

Untuk Horizontal Stacked Bars sepertinya di rilis resmi Open Flash Chart 2 Lug Wyrm Charmer sepertinya belum didukung. Tetapi patch sudah dibuat oleh dz [3]. Ketika saya coba element type nya (hbar_stack) sepertinya memang belum diintegrasikan patch ini ke Lug Wyrm Charmer oleh monk.e.boy a.k.a John Glazebrook.

Oleh karena itu, di API nya jika user ingin menggunakan hbar stack, maka otomatis OFC versi dari dz yg akan digunakan, seperti pada Contoh 2.

Demikian halnya juga dengan nasih Horizontal Group Bar Chart di Lug Wyrm Charmer, jika kita menambahkan beberapa elemen horizontal bar untuk dijadikan group horizontal bar, maka setiap elemen nya akan saling bertumpukan, tapi untunglah dz sudah membuat patch nya [4].

Referensi :

[1] Bar Chart, Google Chart API, http://code.google.com/apis/chart/types.html#bar_charts
[2] Bar Chart, Open Flash Chart, http://teethgrinder.co.uk/open-flash-chart-2/horizontal-bar-chart.php
[3] Horizontal Stacked Bars Patch, http://ofc2dz.com/OFC2/examples/HorizontalStackedBars.html
[4] Horizontal Group Bar Patch, http://ofc2dz.com/OFC2/examples/HorizontalBars.html


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: