Informasi Dunia Tekno

Membuat Grafik Pie Berbasis Website

Artikel terkait : 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

Membuat Grafik Pie


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

Membuat Grafik Pie Berbasis Website


Baca Juga 

Google Wallet kini bisa transfer otomatis ke rekening Bank


5 Cara Kreatif Memasang Tali Sepatu Keren


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>

Membuat Grafik Pie Berbasis Website mudah bukan ? tetap semangat belajar

Artikel Jagat Tekno Lainnya :

0 comments:

Post a Comment

Copyright © 2015 Jagat Tekno | Design by Bamz