Ingat Jangan menghapus/remove kode html tersebut dari blog/website sobatokeh segitu saja, semoga bermanfaat, silahkan tinggalkan komentar sobat.
<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>
<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>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<!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>
- 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.
Bulan | Versi Patch | Besar File | |
11/2011 | 01.57.00 | 117,835KB | Download 1: Mirror 1: MD5 : 09FEE5ECAFAE1CBF0F115421C84888DA |
 |
|
|
|
