Membuat Chart Dengan Google Chart dan Php Mysql

3d chart pie

Chart’s sangat dibutuhkan untuk website. Biasanya dipakai untuk menampilkan statistik, entah itu data statistik kunjungan, pembelian, atau yang lain. Manfaat dari chart ini tidak lain adalah untuk ‘mengenakkan’ mata pas melihat data. Laman akan jadi kurang menarij jika data statistik itu pakai tabel. Misal :

Statistik Visitor
IP Laman Hint
192.168.43.2 Profile 6
127.0.0.1 Index 2
202.131.45.2 Inbox 5

Data diatas akan lebih enak dilihat jika memakai bagan untuk menampilkan. Ada bentuknya, ada warnanya. Nggak hitam putih ngotak seperti diatas.

“Wah, keren nih kalau web punyaku ada chart-nya buat nampilin statistik pengunjung, tapi gimana caranya bikin chart?”

Pertama silahkan anda buat folder di htdocs dengan nama terserah anda, lalu buat file dengan extensi .php dan kita mulai kodingnya..

Kedua, kita akan memulai dengan membuat chart statik dulu, silahkan ikuti script dibawah ini.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Static chart</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”style.css” rel=”stylesheet”>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
</head>
<script>
google.charts.load(“current”, {‘packages’: [“corechart”]});
// Akan dihandle pada fungsi drawchart
google.charts.setOnLoadCallback(drawchart);

function drawchart() {
var chart = new google.visualization.PieChart(document.getElementById(‘daily’));
var data = google.visualization.arrayToDataTable([
[‘Daily Activities’, ‘percentage’],
[‘Ngoding’, 20],
[‘Makan’, 24],
[‘Minum’, 55]
]);

var options = {
title: ‘Daily Activities’,
pieHole: 0.4
}

chart.draw(data, options)
}
</script>
<body>
<div class=”navbar”><span>Daily Activities</span></div>
<div class=”container”>
<div id=”daily” style=”width: 900px; height: 500px;”></div>
</div>
</body>
</html>

Hasilnya akan seperti ini

chart pie

Dan jika anda mau membuat chart berbentuk 3D tambahkan is3D : true pada variabel options.

sudah selesai, kita masuk ke tahap dinamis, sebenarnya caranya gk susah, cuma tinggal di while loop aja row dari database, lalu masukin ke javascriptnya. untuk kodenya ada dibawah.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Static chart</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”style.css” rel=”stylesheet”>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
</head>
<script>
google.charts.load(“current”, {‘packages’: [“corechart”]});
// Akan dihandle pada fungsi drawchart
google.charts.setOnLoadCallback(drawchart);

function drawchart() {
var chart = new google.visualization.PieChart(document.getElementById(‘daily’));
var data = google.visualization.arrayToDataTable([
[‘Daily Activities’, ‘percentage’],
[‘Ngoding’, 20],
[‘Makan’, 24],
[‘Minum’, 55]
]);

var options = {
title: ‘Daily Activities’,
pieHole: 0.4
}

chart.draw(data, options)
}
</script>
<body>
<div class=”navbar”><span>Daily Activities</span></div>
<div class=”container”>
<div id=”daily” style=”width: 900px; height: 500px;”></div>
</div>
</body>
</html>

untuk hasilnya akan keluar seperti ini

3d chart pie

Nah demikian contoh sederhana pembuatan chart dengan google chart dan php MySQL, silahkan di coba ya

Leave a Reply

Your email address will not be published. Required fields are marked *