Posted by: Wildan Maulana | August 24, 2009

[Draft] Labels

Dokumentasi ini menjelaskan bagaimana caranya menambahkan label pada grafik Anda.

Daftar Isi

  1. Judul Grafik
  2. Lagend Grafik
  3. Label Grafik Pie
  4. Label Grafik Meter Gauge
  5. Style dan Label Sumbu
  6. Label Titik-Titik Data

Judul Grafik

Anda bisa menentukan judul sebuah grafik dengan :

chtt=<chart title>
Parameter Keterangan Contoh
chtt Spasi ditentukan dnegan menggunakan tanda plus (+).

Untuk memaksa garis baru gunakan karakter pipa (|).

Title (Google Chart)

Title (Google Chart)

Title (OFC)

Title (OFC)

http://chart.openthink-labs.wm/chart?cht=bvg&chd=t:578,75,75,25|371,49,54,13&chtt=Kuesioner+Disebar+dan+Diterima+|+Tahun+2007&chs=300×190

Anda juga dapat menetapkan warna dan ukuran teks judul dengan
chts=<color>,<font size>
Title with Style (Google Chart)

Title with Style (Google Chart)

Title With Style (Open Flash Chart)

Title With Style (Open Flash Chart)

http://chart.openthink-labs.wm/chart?cht=bvg&chts=d01f3c,14&chd=t:578,75,75,25|371,49,54,13&chtt=Kuesioner+Disebar+dan+Diterima+|+Tahun+2007&chs=300×190

Lagend Grafik

Anda bisa menentukan legend dengan :

chdl=<data set 1 label>|<data set n label>
Parameter Keterangan Contoh
chdl

Tentukan label-label dengan urutan yang sama dengan urutan data set Anda. Legend akan menggunakan warna yang sama dengan warna yang digunakan oleh grafik. Untuk menentukan
warna untuk grafik Anda silahkan lihat Warna Grafik.

Pada contoh ini, dataset pertama berwarna coklat, dan yang kedua berwarna hijau.

Legend (Google Chart)

Legend (Google Chart)

Legend (Open Flash Chart)

Legend (Open Flash Chart)



http://chart.openthink-labs.wm/chart?cht=bvg&chts=d01f3c,14&chdl=Disebar|Diterima&chco=C79810,49fb03&chd=t:578,75,75,25|371,49,54,13&chtt=Kuesioner+Disebar+dan+Diterima+|+Tahun+2007&chs=310×200

chdl dan chdlp

Gunakan parameter chdlp untuk menentukan posisi legend.

Untuk menggambar legend pada sebuah baris horizontal, gunakan salah satu opsi berikut :

  • chdlp=b menempatkan legend pada bagian bawah grafik.
  • chdlp=t menempatkan legend pada bagian atas grafik.

Untuk menggambar legend pada sebuah kolom vertikal, gunakan salah satu opsi berikut :

  • chdlp=bv menempatkan legend pada bagian bawah grafik.
  • chdlp=tv menempatkan legend pada bagian atas grafik.
  • chdlp=r menempatkan legend pada bagian kanan grafik.
  • chdlp=lmenempatkan legend pada bagian kiri grafik.

Label Grafik Pie

Untuk sebuah Grafik Pie, Anda dapat menentukan label nya dengan :

chl=

<label 1 value>|
...
<label n value>

Anda dapat menentukan nilai yang hilang dengan menggunakan karakter pipa dua (||) berturut-turut.

Parameter Keterangan Contoh
chl Label untuk grafik pie

Label Pie - Google Chart

Label Pie - Google Chart

Label Pie - Open Flash Chart

Label Pie - Open Flash Chart

http://chart.openthink-labs.wm/chart?cht=p3&chts=d01f3c,14&cisp=1&chl=Social Sciences|Humanities|Natural Sciences|Engineering and Technology|Agricultural and Environmental Sciences|Medical Sciences&chd=t:28.76,3.09,16.56,25.05,19.43,7.11&chtt=Daftar+Sebaran+Belanja+Litbang+|+Menurut+Kategori+Bidang+Penelitian&chs=650×200

Style dan Label Sumbu

Style dan Label Sumbu dapat digunakan pada grafik garis, grafik batang, grafik radar, dan scatter plots.

Bagian ini meliputi topik-topik berikut :

Tipe Sumbu

Untuk menggunakan beberapa sumbu sekaligus, gunakan opsi :

chxt=
<axis 1>,
...
<axis n>

Sumbu yang dapat digunakan :

  • x = sumbu x bawah
  • t = sumbu x atas (belum didukung oleh Open Flash Chart )
  • y = sumbu y kiri
  • r = sumbu y kanan

Ketika menggunakan pilihan sumbu lain, sumbu ditentukan oleh indeks nya di parameter chxt. Sumbu pertama yang ditentukan dalam parameter chxt memiliki indeks 0, yang kedua memiliki indeks 1, dan seterusnya. Anda dapat menetapkan beberapa baris untuk setiap sumbu termasuk x, t, y, atau r berkali-kali (Open Flash Chart belum mendukung hal ini).

Parameter Keterangan Contoh
chxt

Contoh ini menunjukkan sebuah grafik garis dengan sumbu x, sumbu y, sebuah sumbu t atas, dan sumbu r kanan.

Label sumbu dihilangkan, sehingga Chart API menampilkan rentang dari 0 sampai 100 untuk semua sumbu.

Axis Tipe - Google Chart

Axis Tipe - Google Chart

Axis Tipe (if we force x range to 100) - Open Flash Chart

Axis Tipe (if we force x range to 100) - Open Flash Chart

Axis Tipe (default behaviour) - Open Flash Chart

Axis Tipe (default behaviour) - Open Flash Chart

http://chart.openthink-labs.wm/chart?cht=lc&chxt=x,y,r,t&chd=t:78,23,18,34,90,56,87,18,23,87,78&chs=300×200

Contoh ini menunjukkan grafik batang vertikal dengan sumbu x, sumbu y, sebuah sumbu t atas, dan sumbu r kanan.

Label sumbu diabaikan, sehingga Chart API menampilkan rentang 0 hingga 100 untuk sumbu y dan untuk sumbu r.

Jangkauan untuk sumbu x dan sumbu t ditentukan oleh jumlah bar. Dalam kasus ini, ada delapan batang, sehingga Chart API menampilkan rentang 0 hingga 7. Label pertama berpusat di bawah bar pertama, label kedua berpusat di bawah bar kedua, dan seterusnya.

Axis Tipe - Google Chart

Axis Tipe - Google Chart

Axis Tipe  - Open Flash Chart

Axis Tipe - Open Flash Chart

http://chart.openthink-labs.wm/chart?cht=bvg&chxt=x,y,r,t&chd=t:29,48,42,54,67,57,56,37&chs=300×200

Contoh ini menunjukkan grafik bar horizontal dengan sumbu x, sumbu y, sebuah sumbu t atas, dan sumbu kanan.

Label sumbu dihilangkan, sehingga Chart API menampilkan rentang 0 hingga 100 untuk sumbu x dan untuk sumbu. t

Jangkauan untuk sumbu y dan untuk sumbu r ditentukan oleh jumlah batang. Dalam kasus ini, ada lima batang, sehingga Chart API menampilkan rentang 0 hingga empat. Label pertama berpusat di bawah batang pertama, label kedua berpusat di bawah batang kedua, dan seterusnya.

Axis Type - Google Chart

Axis Type - Google Chart

Axis Type - Open Flash Chart

Axis Type - Open Flash Chart

http://chart.openthink-labs.wm/chart?cht=bhg&chxt=x,y,r,t&chd=t:29,48,42,54,67&chs=300x200

Label Sumbu

Tentukan label dengan :

chxl=
<axis index>:|<label 1>|<label n>|
...
<axis index>:|<label 1>|<label n>

Parameter indeks menentukan indeks dari sumbu mana label akan diterapkan. Pisahkan setiap label dengan menggunakan karakter pipa (|).

Label pertama yang ditulis akan ditempatkan pada awal sumbu, dan label yang ditulis terakhir ditempatkan pada ujung sumbu. Label-label yang lain ditulis dengan jarak yang sama satu sama lain antara label pertama dan label terakhir.

Parameter Keterangan Contoh
chxt dan chxl

Contoh ini menggunakan label sumbu di sebelah kiri dan kanan sumbu y (y dan r). Contoh ini juga mencakup dua set nilai untuk sumbu x (x).

Label sumbu x pada sebuah grafik garis berada ditengah sumbu x.

Axis Label - Google Chart

Axis Label - Google Chart

Axis Label - Open Flash Chart

Axis Label - Open Flash Chart

Apakah ini bug di OFC ? Saya baru posting diskusi di forum nya :
http://forums.openflashchart.com/viewtopic.php?f=3&t=1372&p=4946#p4946

http://chart.openthink-labs.wm/chart?cht=lc&chxt=x,x,y,r&chd=t:67,12,89,98,45,90,25,12,19,20,67&chxr=0,2005,2007|1,2005,2007|2,12,98|3,12,98&chxl=0:|Jan|Jul|Jan|Jul|Jan|1:|2005|2006|2007|2:|0|50|100|3:|A|B|C&chxp=0,Jan,Jul,Jan,Jul,Jan|1,2005,2006,2007|2,0,50,100|3,A,B,C&chs=300×200

.


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: