Posted in PHP
Tutorial Google Analytics API kali ini berbeda dengan tutorial sebelumnya, karena saya akan mengintegrasikan data query analytics dengan chart.
Untuk chart saya menggunakan plugin javascript Highcharts.
Sekilas tentang highcharts dapat anda baca di sini.
Seperti tutorial sebelumnya, di sini saya akan menampilkan jumlah pengunjung berdasarkan browser.
Visitor by Browser[/caption]
Nantinya, kita akan mengubah tabel di atas menjadi sebuah barchart dari Highcharts yang menampilkan jumlah pengunjung berdasarkan browser.
Untuk memudahkan, sebaiknya anda mengunduh terlebih dahulu demo Highcharts di http://www.highcharts.com/download.
Cari example bar chart di dalam folder bar-stacked kemudian gabungkan code php dari GAPI dengan bar-stacked tadi.
Ada beberapa hal yang perlu diperhatikan, pertama pastikan konfigurasi untuk akun anda benar dan yang kedua adalah perhatikan series yang ditampilkan, hal ini karena secara default bar-stacked menampilkan tiga buah series, padahal yang anda butuhkan hanya satu series.
Total Visitor by Browser[/caption]
Berikut ini adalah source code lengkapnya:
Menampilkan Jumlah Pengunjung dengan Chart GAPI
Cara filtering untuk menampilkan berdasarkan browser telah saya tulis di post gapi berdasarkan browser dimana hasil dari tutorial tersebut adalah sebagai berikut: [caption id="" align="aligncenter" width="312"] Visitor by Browser[/caption]
Nantinya, kita akan mengubah tabel di atas menjadi sebuah barchart dari Highcharts yang menampilkan jumlah pengunjung berdasarkan browser.
Untuk memudahkan, sebaiknya anda mengunduh terlebih dahulu demo Highcharts di http://www.highcharts.com/download.
Cari example bar chart di dalam folder bar-stacked kemudian gabungkan code php dari GAPI dengan bar-stacked tadi.
Ada beberapa hal yang perlu diperhatikan, pertama pastikan konfigurasi untuk akun anda benar dan yang kedua adalah perhatikan series yang ditampilkan, hal ini karena secara default bar-stacked menampilkan tiga buah series, padahal yang anda butuhkan hanya satu series.
series: [{
name: 'Visitor',
data: [
<?php
foreach($ga->getResults() as $result):
echo $result->getVisits().',';
endforeach;
?>
]
}
]
}
Hasil akhir ketika ditampilkan di browser kurang lebih seperti ini:
[caption id="" align="aligncenter" width="409"] Total Visitor by Browser[/caption]
Berikut ini adalah source code lengkapnya:
<?php
define('ga_email','email');
define('ga_password','password');
define('ga_profile_id', 'id_profile');
require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$filter = 'ga:pagePath==~/category/java/';
$ga->requestReportData(ga_profile_id,array('browser'),array('visits'),'-visits',$filter);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Visitor by Browser</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Visitor by Browser'
},
xAxis: {
categories: [
<?php
foreach($ga->getResults() as $result):
echo "'".$result."',";
endforeach;
?>
]
},
yAxis: {
min: 0,
title: {
text: 'Total Visitor by Browser'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Visitor',
data: [
<?php
foreach($ga->getResults() as $result):
echo $result->getVisits().',';
endforeach;
?>
]
}
]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Semoga bermanfaat
