Tampilkan postingan dengan label Grafik Pie. Tampilkan semua postingan
Tampilkan postingan dengan label Grafik Pie. Tampilkan semua postingan
Membuat Grafik Pie dengan Menggunakan Highcharts
syarif hidayatullah
Assalamualaikum, Selamat Pagi Semuanya
Maka akan terbentuk grafik pie seperti berikut
Selanjutnya kita akan menampilkan dalam versi lain yakni yang memiliki legend di bawah grafik pie. berikut script lengkapnya
Berikut hasil grafik pie yang diperoleh
Nah jika anda ingin mendownload script ini, biasa anda download di sini
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
08.23
Grafik Pie
,
Tips
,
Trick
Langganan:
Postingan
(
Atom
)
