Menampilkan Jumlah Pengunjung dengan Chart GAPI

Posted in PHP 13 years ago 2 min read

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.

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"] menampilkan jumlah pengunjung dengan chart gapi

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