Membuat Grafik Pie dengan Menggunakan Highcharts
Assalamualaikum, Selamat Pagi Semuanya
Hari ini saya berbagi pengetahuan kepada anda, bagaiama cara gampang membuat grafik pie yang berbasis website. Untuk membuat grafik pie di website, ada banyak cara yang dapat di gunakan, salah satunya menggunakan library javascript Highcharts.
Grafik pie adalah grafik yang menampilkan perbandingan data dalam bentuk persentasi. Untuk membuat grafik pie, kita harus mengolah data-data kita terlebih dahulu menjadi dalam bentuk presentase. Nah disini tidak menjelaskan bagaimana cara mengolah data tersebut, soalnya materi itu sudah sering ada dalam pelajaran matematika kita.
Ok. Misalkan saya punya data fiktif presentase favorite kamen rider :
1. Kabuto = 35%
2. Gaim = 30%
3. Decade = 20%
4. Den-O = 10.5%
5. Kiva = 4.5%
Berikut ini adalah contoh script membuat grafik pie nya
1. Kabuto = 35%
2. Gaim = 30%
3. Decade = 20%
4. Den-O = 10.5%
5. Kiva = 4.5%
Berikut ini adalah contoh script membuat grafik pie nya
<head>
<!-- deklarasi jquery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Script Pie -->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title: {
text: 'Kamen Rider Heisei Favorit 2014 Menurut Admin'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Kamen Rider Favorit',
data: [
['Kabuto', 35.0],
['Gaim', 30.0],
['Decade', 20.0],
['Den-O', 10.5],
['Kiva', 4.5],
]
}]
});
});
</script>
</head>
<body>
<<!-- deklarasi library highcarts -->
<script src="js/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
Maka akan terbentuk grafik pie seperti berikut
<head>
<!-- Deklarasi Jquery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Script Pie Legend -->
<script type="text/javascript">
$(function () {
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Kamen Rider Heisei Favorit 2014 Menurut Admin'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Kamen Rider Favorit',
data: [
['Kabuto', 35.0],
['Gaim', 30.0],
['Decade', 20.0],
['Den-O', 10.5],
['Kiva', 4.5],
]
}]
});
});
});
</script>
</head>
<body>
<!-- Deklarasi Librari highcarts-->
<script src="js/highcharts.js"></script>
<!-- Bagian yang menampilkan hasil grafik -->
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
Berikut hasil grafik pie yang diperoleh
Nah jika anda ingin mendownload script ini, biasa anda download di sini
Langganan:
Posting Komentar
(
Atom
)
mas, gimana kalau inputnya dari luar mas??halaman lain? jadi input bisa diubah dari luar?
BalasHapuskalo datanya dr database gmna?
BalasHapusTerima kasih. Sangat berguna.. Saya sudah 2 hari cari cara bikin grafik tapi hanya disini yang mudah dipahami. Thanks
BalasHapus