Membuat Chart Dengan JSChart

Posted on Updated on

Suatu sistem informasi di dalam suatu sistem berguna untuk memberikan data kepada user, apalagi untuk aplikasi berbasis web. Bentuk paparan data sendiri ada berbagai macam, salah satunya dengan grafik (chart). Untuk membuat grafik yang interaktif dan menarik, salah satu caranya adalah dengan memanfaatkan JS Chart. JS Chart adalah salah satu library javascript yang dapat dengan mudah digunakan. Oke..sebelum kita praktek langsung bagaimana cara penggunaannya, alangkah baiknya kita menyiapkan tool-toolnya. Tool yang digunakan bisa menggunakan Dreamweaver, notepad++, Free Java script editor (www.yaldex.com) atau editor javascript yang lain yang lain. Untuk library JSChartnya, bisa didownload di situs resminya, www.jschart.com , atau menggunakan library yang sudah disertakan di file zip.

Oke..mari kita mulai..

Problem sampel di sini, kita ingin menampilkan rekap data mahasiswa Teknik Informatika selama 5 tahun terakhir, dari tahun 2006-2010. Data tersebut ditampilkan berdasarkan jumlah mahasiswa tiap tahunnya, batasan-batasan :

WARNA JUMLAH MAHASISWA
Warna Merah (#E70000) <  100
Warna Orange (#FD6F00) 101 – 200
Warna Kuning (#FFFF00) 201 – 300
Warna Hijau (#267C2C) >  300

Pembagian warna di atas merupakan pengembangan dari model default pada JSChart. Di sini sedikit digunakan algoritma seleksi (decision) untuk mengatur warna dari masing-masing elemen pada grafik yang akan kita buat

Sebelum mulai, ketikkan siapkan tempat untuk menampung chartnya, gunakan elemen DIV

<div id=”kontenchart”>Chart Here</div>

Ketikkan inisialisasi untuk memulai menuliskan sintaks javscript

<script type=”text/javascript” language=”javascript” src=”sources/jscharts.js”>sintaks JS </script>

Ketikkan sintaks javascript di antara <script type=….> dan </script>

Deklarasikan sebuah array bernama th, yang berisi 5 elemen. Array ini berfungsi untuk menampung jumlah mahasiswa tiap tahunnya, dari tahun 2006-2010.

th = new Array(5);th[0] = 150; // tahun 2006th[1] = 90; // tahun 2007

th[2] = 200; // tahun 2008

th[3] = 350; // tahun 2009

th[4] = 267; // tahun 2010

Definisikan array th_color, yang berfungsi untuk menentukan warna dari bar tiap tahun yang ada pada chart. Dengan aturan seperti pada tabel warna di atas.

th_color = new Array(5);for(i=0;i<5;i++){

if(th[i] < 100) th_color[i] = ‘#E70000’;

else if(th[i]>100 && th[i]<=200) th_color[i] = ‘#FD6F00’;

else if(th[i]>200 && th[i]<=300) th_color[i] = ‘#FFFF00’;

else if(th[i]>300) th_color[i] = ‘#267C2C’;

}

Kemudian deklarasikan array chartData yang digunakan untuk value pada chart nantinya

var chartData =  new Array([‘2006’,th[0]], [‘2007’,th[1]], [‘2008’,th[2]], [‘2009’,th[3]], [‘2010’,th[4]]);

Langkah selanjutnya adalah kita menyiapkan variabel yang digunakan untuk setting pada chart yang akan kita buat.

var chart_type  = ‘bar’;var chart_title = ‘Data Mahasiswa Baru’;var x_title     = ‘Tahun’;

var y_title     = ‘Jumlah’;

var color_back  = ‘#151515’;

var color_axis  = ‘#FFFFFF’;

var color_value = ‘#35FA08’;

var color_title = ‘#FFFFFF’;

var color_name  = ‘#B2D4E9’;

Siapkan 1 variabel yang digunakan untuk mendeklarasikan objek baru dari JSChart. Variabel ini juga yang akan mengatur property yang ada pada objek JSChart dengan parameter yang ada variabel di atas.

var chart   = new JSChart(‘kontenchart’, chart_type); chart.setDataArray(chartData);

chart.colorizeBars(th_color);

chart.setTitle(chart_title);

chart.setAxisNameX(x_title);

chart.setAxisNameY(y_title);

for(i=0;i<5;i++)

{

chart.setTooltip([i]);

}

chart.setBackgroundColor(color_back);

chart.setAxisColor(color_axis);

chart.setAxisValuesColor(color_value);

chart.setAxisNameColor(color_name);

chart.setTitleColor(color_title);

chart.setSize(600,400);

chart.setGridOpacity(0.3);

chart.setGridColor(‘#B5DBE3’);

Langkah terakhir, eksekusi objek dengan method draw(). Method ini akan menjalankan semua setting yang telah kita tentukan tadi.

chart.draw();

Source lengkapnya sebagai berikut :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;<html xmlns=”http://www.w3.org/1999/xhtml”&gt;<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Grafik Rekap Tahunan Mahasiswa</title>

</head>

 

<body>

<div id=”kontenchart”>Chart Here</div>

<script type=”text/javascript” src=”jscharts.js”></script>

<script type=”text/javascript”>

th = new Array(5);

th[0] = 150;

th[1] = 90;

th[2] = 200;

th[3] = 350;

th[4] = 267;

 

th_color = new Array(5);

for(i=0;i<5;i++)

{

if(th[i] < 100) th_color[i] = ‘#BBDDE5’;

else if(th[i]>100 && th[i]<=200) th_color[i] = ‘#52AEC1’;

else if(th[i]>200 && th[i]<=300) th_color[i] = ‘#0D7EEF’;

else if(th[i]>300) th_color[i] = ‘#074B8F’;

}

var chartData =  new Array([‘2006’,th[0]],[‘2007’,th[1]],[‘2008’,th[2]],[‘2009’,th[3]],[‘2010’,th[4]]);

var chart_type  = ‘bar’;

var chart_title = ‘Data Mahasiswa Baru’;

var x_title     = ‘Tahun’;

var y_title     = ‘Jumlah’;

var color_back  = ‘#151515’;

var color_axis  = ‘#FFFFFF’;

var color_value = ‘#35FA08’;

var color_title = ‘#FFFFFF’;

var color_name  = ‘#B2D4E9’;

 

var chart   = new JSChart(‘kontenchart’, chart_type);

 

chart.setDataArray(chartData);

chart.colorizeBars(th_color);

chart.setTitle(chart_title);

chart.setAxisNameX(x_title);

chart.setAxisNameY(y_title);

for(i=0;i<5;i++)

{

chart.setTooltip([i]);

}

chart.setBackgroundColor(color_back);

chart.setAxisColor(color_axis);

chart.setAxisValuesColor(color_value);

chart.setAxisNameColor(color_name);

chart.setTitleColor(color_title);

chart.setSize(600,400);

chart.setGridOpacity(0.3);

chart.setGridColor(‘#B5DBE3’);

chart.draw();

</script>

</body>

</html>

Dan hasilnya seperti ini…

Chart_JSChart

Download Tulisan Lengkap + source : fadli-jschart

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s