Menyampaikan data-data dengan menggunakan grafik akan membuat informasi yang disampaikan mudah dipahami. Dalam mengembangkan aplikasi berbasis web kita perlu menampilkan data dengan menggunakan grafik. Salah satu program untuk menyajikan grafik adalah ChartJs. Pada pembahasan kali ini kita akan membuat grafik batang atau grafik bar menggunakan ChartJs.
Langkah-langkah pembuatan grafik bar menggunakan ChartJs adalah
- Silahkan download scriptnya di http://www.chartjs.org/ .
- Silahkan ekstrak pada suatu folder pada webserver anda, misalnya chartjs
- Buat scriptnya dan silahkan include misalnya :
<script src=”./chartjs/Chart.js”></script> - Buatlah sebuah div untuk menyajikan grafiknya misalnya:
<canvas id=”kanvasku” height=”450″ width=”600″></canvas> - Sajikan datanya misalnya:
var barData = {
labels : [“Januari”,”Februari”,”Maret”,”April”,”Mei”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
data : [20,30,50,70,90]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
data : [10,40,60,80,100]
}
]
} - Tampilkan chartnya misalnya:
var barKu = new Chart(document.getElementById(“kanvasku”).getContext(“2d”)).Bar(barData); - Script lengkapnya seperti berikut ini:
<!doctype html>
<html>
<head>
<script src=”./chartjs/Chart.js”></script>
<title>Contoh Bar</title>
</head>
<body>
<canvas id=”kanvasku” height=”450″ width=”600″></canvas>
<script>var barData = {
labels : [“Januari”,”Februari”,”Maret”,”April”,”Mei”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
data : [20,30,50,70,90]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
data : [10,40,60,80,100]
}
]
}var barKu = new Chart(document.getElementById(“kanvasku”).getContext(“2d”)).Bar(barData);
</script>
</body>
</html> - Tampilan dapat dilihat di http://aris.proweb.asia/chartjs_01.html atau seperti gambar berikut ini :
Informasi lebih lanjut silahkan mengunjungi:
1. http://www.chartjs.org/
2. http://www.chartjs.org/docs/
3. http://www.yiiframework.com/extension/yii-chartjs/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.