Menampilkan Jumlah Pengunjung dengan Chart GAPI

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:

menampilkan jumlah pengunjung dengan chart gapi
Visitor by Browser

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:

menampilkan jumlah pengunjung dengan chart gapi
Total Visitor by Browser

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

Leave a Comment