Membuat chart | grafika dengan php dan chart.js

Onphpid – Di dalam membangun website baik yang sederhana maupun yang ekspert fitur chart atau grafika sering ditemukan sebagai fitur statistik untuk mengetahui secara data tarfik pengunjung, posting, komentar dan sebagainya. Dalam tutorial php kali ini Onphpid akan membahas cara membuat chart atau grafika dengan php dengan menggunakan plugin chart.js dari chartjs.org.

Sebelum lebih jauh tentang membuat chart kita perlu mengetahui apasih sebenarnya chart atau grafika itu? Chart atau grafika adalah presentasi visual pada sebuah permukaan seperti dinding, kanvas, layar komputer, kertas, atau batu bertujuan untuk memberi tanda, informasi, ilustrasi, atau untuk hiburan. Contohnya adalah: foto, gambar, Line Art, grafik, diagram, tipografi, angka, simbol, desain geometris, peta, gambar teknik, dan lain-lain. Seringkali dalam bentuk kombinasi teks, ilustrasi, dan warna. (sumber : http://id.wikipedia.org/wiki/Grafika ).

Sesuai dengan fungsinya bahwa chart atau grafika digunakan untuk mempresentasikan suatu data dalam bentuk gambar dan pada tutorial php kita menggunakan plugin chart.js. kenapa chart.js ? karena menurut onphpid merupakan salah satu plugin dengan javascript yang cukup simple dan mudah untuk digunakan dan support HTML5 dan JSON selain itu tampilan yang ditawarkan juga cukup elegant. Untuk lebih jelas seperti apa hasilnya kalian bisa klik situs http://www.chartjs.org/ .

Pada Tutorial kali ini kita akan melanjutkan tutorial kemarin tentang cara membuat data statistik dari pengujung website. Dimana ditutorial tersebut kita telah belajar menangkap ip, nama browser dan os pengunjung yang mengunjungi situs kita. Di sini kita akan lanjutkan tutorial itu dan mengubahnya ke dalam bentuk grafik. Berikut step by step nya

Step pertama

Silahkan buat script untuk medeteksi atau menangkap IP, Browser dan OS ( Operating System ) seperti pada tutorial membuat data statistik website dengan php mysqli

Step kedua

Silahkan Download plugin Chart.js di Chartjs.org

Step Ketiga

Silahkan buat folder baru di dalam folder “website” ( lihat tutorial membuat data statistik website dengan php mysqli ), dengan nama ‘assets’ kemudian ekstrak plugin chart.js yang sudah kita download tadi di folder tersebut.

Untuk lebih jauh tentang Struktur Direktori atau Folder Website.

Kemudian silahkan ketikan ( copy juga boleh , gratis kok 😀 ) script php di bawah pada file admin.php

<?php
require 'config.php';

$sql = "SELECT * FROM statistik ORDER BY date_create DESC";
$query = $db->query($sql);

?>
<html>
<head>
    <title>Admin dengan Json</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="assets/Chart.min.js"></script>
    <script src="assets/src/Chart.Doughnut.js"></script>
    <style>
            body{
                padding: 0;
                margin: 0;
            }
            #canvas-holder{
                float: left;
                margin-right: 20px;
                width:30%;
            }
        </style> 
</head>
<body>
<table border="1">
    <tr>
        <td>IP</td>
        <td>Browser</td>
        <td>OS</td>
        <td>Date</td>
    </tr>
    <?php
    while ($row=$query->fetch_assoc()) { ?>
        <tr>
            <td><?php echo $row['ip'];?></td>
            <td><?php echo $row['browser'];?></td>
            <td><?php echo $row['os'];?></td>
            <td><?php echo $row['date_create'];?></td>
        </tr>
    <?php } ?>
</table>
<hr>
    <div id="canvas-holder">
        <canvas id="chart-area-os" width="150" height="150"/>
    </div>    
    <div id="canvas-holder">
        <canvas id="chart-area-browser" width="150" height="150"/>
    </div>
    

    <?php
    /** @var Sesi untuk membuat Chart */
    $sql = "SELECT * FROM statistik ORDER BY date_create DESC";
    $query = $db->query($sql);

    if ($query->num_rows > 0) {
        while ($row=$query->fetch_assoc()) {
               $os[]      = $row['os'];
               $browser[] = $row['browser'];
        }

        $os      = array_count_values($os);
        $browser = array_count_values($browser);

        foreach ($os as $key => $value) {
            $dataOS[] = array('value'=>$value,'label'=>$key);
        }

        foreach ($browser as $key => $value) {
            $dataBrowser[] = array('value'=>$value,'label'=>$key);
        }
        
    }?>
    <script>

        var doughnutDataOs      = <?php echo json_encode($dataOS,JSON_NUMERIC_CHECK);?>;
        var doughnutDataBrowser = <?php echo json_encode($dataBrowser,JSON_NUMERIC_CHECK);?>;

            window.onload = function(){
                var os = document.getElementById("chart-area-os").getContext("2d");
                window.myDoughnut = new Chart(os).Doughnut(doughnutDataOs);

                var browser = document.getElementById("chart-area-browser").getContext("2d");
                window.myDoughnut = new Chart(browser).Doughnut(doughnutDataBrowser);
            };
    </script>

</body>
</html>

<?php

require 'config.php';

$sql = "SELECT * FROM statistik ORDER BY date_create DESC";

$query = $db->query($sql);

<html>

<head>

<title>Admin dengan Json</title>

<style>

body{

padding: 0;

margin: 0;

}

#canvas-holder{

float: left;

margin-right: 20px;

width:30%;

}

</style>

</head>

<body>

<tr>

<td>Browser</td>

</tr>

<?php

while ($row=$query->fetch_assoc()) { ?>

<tr>

</tr>

<?php } ?>

</table>

<hr>

</div>

</div>

<?php

/** @var Sesi untuk membuat Chart */

$sql = "SELECT * FROM statistik ORDER BY date_create DESC";

$query = $db->query($sql);

if ($query->num_rows > 0) {

while ($row=$query->fetch_assoc()) {

$os[] = $row['os'];

$browser[] = $row['browser'];

}

$os = array_count_values($os);

$browser = array_count_values($browser);

foreach ($os as $key => $value) {

$dataOS[] = array('value'=>$value,'label'=>$key);

}

foreach ($browser as $key => $value) {

$dataBrowser[] = array('value'=>$value,'label'=>$key);

}

}?>

var doughnutDataOs = <?php echo json_encode($dataOS,JSON_NUMERIC_CHECK);?>;

var doughnutDataBrowser = <?php echo json_encode($dataBrowser,JSON_NUMERIC_CHECK);?>;

window.onload = function(){

var os = document.getElementById("chart-area-os").getContext("2d");

window.myDoughnut = new Chart(os).Doughnut(doughnutDataOs);

var browser = document.getElementById("chart-area-browser").getContext("2d");

window.myDoughnut = new Chart(browser).Doughnut(doughnutDataBrowser);

};

</script>

</body>

</html>

Pengaplikasian Chart.js untuk membuat chart dengan php tidak hanya itu saja. Seperti yang onphpid tuliskan di atas bahwa chart.js support JSON jadi sebagai tingkat lanjut kita akan mencoba membuat chart php ini versi JSON-nya.

Buatlah 2 ( dua ) file baru :

admin-json.php

admin-json.php ini kurang lebih isinya sama seperti admin.php, file ini dibuat hanya untuk membedakan admin.php dan admin-json.php ( versi Json-nya ) saja. Berikut scriptnya :

<html>
<head>
    <title>Admin dengan Json</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="assets/Chart.min.js"></script>
    <script src="assets/src/Chart.Doughnut.js"></script>
    <style>
            body{
                padding: 0;
                margin: 0;
            }
            #canvas-holder{
                float: left;
                margin-right: 20px;
                width:30%;
            }
        </style> 
</head>
<body>
    <div id="canvas-holder">
        <canvas id="chart-area-os" width="150" height="150"/>
    </div>    
    <div id="canvas-holder">
        <canvas id="chart-area-browser" width="150" height="150"/>
    </div>


    <script>
    jQuery(document).ready(function() {

        /** Get Statistik browser */
        jQuery.getJSON('json.php?browser=true',function(result){
            var browser      = jQuery("#chart-area-browser").get(0).getContext("2d");
            var myNewChart = new Chart(browser);
            new Chart(browser).Doughnut(result);
       
        });

        /** Get Statistik OS */
        jQuery.getJSON('json.php?os=true',function(result){
            var os      = jQuery("#chart-area-os").get(0).getContext("2d");
            var myNewChart = new Chart(os);
            new Chart(os).Doughnut(result);
       
        });
        
    });

    </script>
</body>
</html>

<html>

<head>

<title>Admin dengan Json</title>

<style>

body{

padding: 0;

margin: 0;

}

#canvas-holder{

float: left;

margin-right: 20px;

width:30%;

}

</style>

</head>

<body>

</div>

</div>

jQuery(document).ready(function() {

/** Get Statistik browser */

jQuery.getJSON('json.php?browser=true',function(result){

var browser = jQuery("#chart-area-browser").get(0).getContext("2d");

var myNewChart = new Chart(browser);

new Chart(browser).Doughnut(result);

});

/** Get Statistik OS */

jQuery.getJSON('json.php?os=true',function(result){

var os = jQuery("#chart-area-os").get(0).getContext("2d");

var myNewChart = new Chart(os);

new Chart(os).Doughnut(result);

});

</script>

</body>

</html>

json.php

json.php ini merupakan file yang bertugas untuk memanggil data ( data statistik ) dari database dan kemudian merubahnya kedalam bentuk json dan file inilah yang akan dijadikan sumber data untuk membuat chart atau grafika yang kita butuhkan. Berikut script php nya :

<?php
require 'config.php';

$sql    = "SELECT * FROM statistik ORDER BY date_create DESC";
$query  = $db->query($sql);

if ($query->num_rows > 0) {
    while ($row=$query->fetch_assoc()) {
           $os[]      = $row['os'];
           $browser[] = $row['browser'];
    }

    $os      = array_count_values($os);
    $browser = array_count_values($browser);

    foreach ($os as $key => $value) {
        $dataOS[] = array('value'=>$value,'label'=>$key);
    }

    foreach ($browser as $key => $value) {
        $dataBrowser[] = array('value'=>$value,'label'=>$key);
    }
    
    if (isset($_GET['os']))
        echo json_encode($dataOS,JSON_NUMERIC_CHECK);
        exit();
    }

    if (isset($_GET['browser'])) {
        echo json_encode($dataBrowser,JSON_NUMERIC_CHECK);
        exit();
    }

}
?>

<?php

require 'config.php';

$sql = "SELECT * FROM statistik ORDER BY date_create DESC";

$query = $db->query($sql);

if ($query->num_rows > 0) {

while ($row=$query->fetch_assoc()) {

$os[] = $row['os'];

$browser[] = $row['browser'];

}

$os = array_count_values($os);

$browser = array_count_values($browser);

foreach ($os as $key => $value) {

$dataOS[] = array('value'=>$value,'label'=>$key);

}

foreach ($browser as $key => $value) {

$dataBrowser[] = array('value'=>$value,'label'=>$key);

}

if (isset($_GET['os']))

echo json_encode($dataOS,JSON_NUMERIC_CHECK);

exit();

}

if (isset($_GET['browser'])) {

echo json_encode($dataBrowser,JSON_NUMERIC_CHECK);

exit();

}

Dan Step terakhir bisa download scriptnya gratis di Github Repositori Onphpid.

Download