Pada kesempatan kali ini boelshare akan mencoba membuat grafik (chart) menggunakan javascript (Highcharts Js), seperti yang tampak pada gambar disamping. Sebenarnya banyak plugin javascript yang berguna untuk membuat grafik yang tersedia di internet, tapi kali ini kita akan mencoba membahas tentang Highcharts Js. Highcharts adalah sebuah Interaktive Javascript charts yang dibuat oleh Highsoft untuk membuat grafik dengan javascript, Amerika. Untuk membuat grafik /chart dengan highcharts memerlukan javascript library berupa jQuery atau mootools. Berikut langkah-langkah cara membuat grafik / chart menggunakan javascript (Highcharts) :
Instalasi (Installation)
- Download JQuery dan Package Highcharts, Ekstrak file highcharts
- Copy folder "js" hasil ekstrak-an kemudian paste ke direktori tempat kerja sobat, Jangan lupa copy-paste juga file Jquery yang tadi di download ke folder "js", untuk memanggil file tersebut memasukan script dibawah ini:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<!-- 1a) Optional: add a theme file -->
<script type="text/javascript" src="js/themes/dark-blue.js"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script> - Kemudian ketik secript sebagai berikut:
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Hasil Penjualan Motor'
},
subtitle: {
text: 'http://boelshare.blogspot.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Jumlah'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' unit';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Jakarta',
data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
}, {
name: 'Bekasi',
data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
}, {
name: 'Bogor',
data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
}, {
name: 'Bandung',
data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]
}]
});
});
</script> - Untuk menampilkan hasilnya, masukkan script berikut di dalam tag <body></body> :
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
- Script lengkapnya sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Imamfirmansyah" />
<title>Untitled 1</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<script type="text/javascript" src="js/themes/dark-blue.js"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Hasil Penjualan Motor'
},
subtitle: {
text: 'http://boelshare.blogspot.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Jumlah'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' unit';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Jakarta',
data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
}, {
name: 'Bekasi',
data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
}, {
name: 'Bogor',
data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
}, {
name: 'Bandung',
data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Penjelasan Lebih Lanjut:
- Pada point ke-3 ini, kita memanggil file-file javascript yang dibutuhkan.
- Pada script
<script type="text/javascript" src="js/themes/dark-blue.js"></script>merupakan themes untuk tampilan highcharts, ada 4 jenis themes yang disediakan highcharts. bisa disesuaikan sesuai selera.
1 comments:
kalok datanya dari mysql gmn?
Post a Comment