- 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>
