Membuat Grafik Pie Berbasis Website
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
Membuat Grafik Pie Berbasis Website
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
<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
Selanjutnya kita akan menampilkan dalam versi lain yakni yang memiliki legend di bawah grafik pie. berikut script lengkapnya
<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>
0 Response to "Membuat Grafik Pie Berbasis Website"
Posting Komentar