Jumat, 11 Agustus 2017

Membuat Grafik dengan PHP dan ChartJS

Membuat Grafik dengan PHP dan ChartJS - Hallo selamat pagi sahabat lupacode semuanya, salam coding ! .. Setelah beberapa saat yang lalu saya telah memberikan Tutorial mengenai Cara Mencetak Data ke Printer secara Langsung dengan PHP. Silahkan bagi sahabat semuanya yang ingin mempelajari mengenai cara mencetak data ke dalam printer secara langsung dengan php, silahkan sahabat semua mengunjungi kembali ke dalam postingan materi saya yang sebelumnya.

Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

ChartJS merupakan salah satu library yang memanfaatkan element canvas untuk membuat grafik yang akan ditampilkan melalui web browser. Mungkin itulah pengertian dari Chartjs sendiri, sebelum kita Membuat Grafik dengan PHP dan ChartJS kita pahami terlebih dahulu mengenai pengertian dari Chartjs.

Jadi, pada kesempatan kali ini kita akan belajar membuat sebuah grafik dengan php dan menggunakan library dari ChartJS yang sudah ada. Dengan menggunakan library chartjs kita dapat menampilkan sebuah informasi dan laporan didalam bentuk grafik sehingga akan dapat secara lebih mudah dipahami oleh user kita nantinya, dengan menapilkan data dalam bentuk grafik juga akan terkesan lebih mudah dipahami dari pada kita menampilkan data dalam bentuk tabel.

Sahabat lupacode mungkin sudah tau, bahwa Chartjs sendiri mempunyai beberapa jenis tampilan yang sangat menarik untuk kita terapkan. Berikut adalah tipe atau jenis dari library ChartsJS :

Type ChartJS 1 – Line Chart
Membuat Grafik dengan PHP dan ChartJS

Type ChartJS 2  – Bar Chart
Membuat Grafik dengan PHP dan ChartJS

Type ChartJS 3 – Radar Chart
Membuat Grafik dengan PHP dan ChartJS

Type ChartJS 4 – Polar Area Chart
Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

Type ChartJS 5 – Pie Dan Dognut Chart
Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

Type ChartJS 6 – Buble Charts
Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

Setelah kita mengetahui beberapa type yang bisa kita gunakan milik dari ChartJS, sekarang kita akan coba langsung praktekan dalam Membuat Grafik dengan PHP dan ChartJS.

Tahap pertama yang akan kita lakukan adalah membuat sebuah folder baru didalam web server kita, tepatnya pada direktori C:\xampp\htdocs (Jika menggunakan Xampp) dan saya kasih nama folder tersebut Charts. Selanjutnya silahkan sahabat semua buat sebuah file baru didalam folder Charts yang telah kita buat, dan silahkan kasih nama index.php

Sebetulnya ada dua cara yang bisa kita lakukan untuk memanggil Library ChartJS, dan cara pertama yang bisa kita lakukan adalah dengan mengunduh ChartJS secara manual. Untuk dapat mengunduhnya silahkan sahabat semua ikuti tutorial berikut ini :
  1. Silahkan download library ChartJS pada ChartJS.org
  2. Kemudian silahkan Extrax file Chartjs.zip yang telah kita download diatas, dan silahkan extrax ke dalam file direktori C:\xampp\htdocs\chartjs
  3. Selanjutnya silahkan buka file index.php yang telah kita buat diatas, dan silahkan masukan script berikut ini

<html>
    <head>
        <title>Lupacode.net - ChartJS</title>
        <script src="Chart.bundle.js"></script>
        <style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <canvas id="myChart" width="100" height="100"></canvas>
        </div>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                },
                options: {
                    scales: {
                        yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    }
                }
            });
        </script>
    </body>
</html>

Kemudian, cara ke-dua yang dapat kita lakukan untuk memanggil library chartjs adalah kita dapat menggunakan CDN sehingga kita tidak perlu untuk mendownload library ChartJS secara manual, dengan menggunakan cara ke-dua ini tentu akan lebih memudahkan kita dan dalam performance pun akan menjadi lebih cepat. Jika sahabat lupacode ingin menggunakan cara yang ke-dua, silahkan untuk mengganti script yang ada didalam file index.php tepatnya pada baris/line ke 4 menjadi seperti berikut ini :

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>

Sekarang kita tes hasilnya terlebih dahulu, silahkan sahabat semua buka web browser yang sahabat gubakan, dan silahkan masukan alamat http://localhost/chartjs/ pada addres bar didalam web browser sahabat semuanya. Maka hasilnya akan menjadi seperti berikut ini :
Hasil Tes Membuat Grafik dengan PHP Mysql dan Chartjs
Membuat Data dari Database MySQL

Sekarang kita akan mecoba mengimplementasikannya secara langsung, dengan membuat sebuah database tabel dengan nama penjualan yang akan digunakan untuk menyimpan informasi hasil penjualan sebuah perusahaan contohnya. Berikut field yang kita masukan
Membuat Grafik dengan PHP dan ChartJS

Selanjutnya kita akan memasukan beberapa data kedalam tabel penjualan

INSERT INTO `penjualan` VALUES (1,'January',2016,10);
INSERT INTO `penjualan` VALUES (2,'February',2016,12);
INSERT INTO `penjualan` VALUES (3,'Maret',2016,13);
INSERT INTO `penjualan` VALUES (4,'April',2016,18);
INSERT INTO `penjualan` VALUES (5,'May',2017,16);
INSERT INTO `penjualan` VALUES (6,'Juni',2016,14);
INSERT INTO `penjualan` VALUES (7,'July',2016,15);
INSERT INTO `penjualan` VALUES (8,'Agustus',2016,12);
INSERT INTO `penjualan` VALUES (9,'September',2016,19);
INSERT INTO `penjualan` VALUES (10,'Oktober',2016,12);
INSERT INTO `penjualan` VALUES (11,'November',2016,12);
INSERT INTO `penjualan` VALUES (12,'Desember',2016,20);

Sehingga sekarang jika kita menjalankan query untuk melihat semua data yang sudah masuk maka akan muncul seperti pada gambar berikut ini :
Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

Selanjutnya kita akan sedikit modifikasi script yang berada didalam file index.php yang sebelumnya data statis dan sekarang kita akan ubah menjadi data dinamis berdasarkan hasil dari tabel penjualan yang telah kita buat diatas.

Silahkan masukan script berikut ini kedalam file index.php yang telah kita buat :

<?php
$koneksi     = mysqli_connect("localhost", "root", "", "latihan");
$bulan       = mysqli_query($koneksi, "SELECT bulan FROM penjualan WHERE tahun='2016' order by id asc");
$penghasilan = mysqli_query($koneksi, "SELECT hasil_penjualan FROM penjualan WHERE tahun='2016' order by id asc");
?>
<html>
    <head>
        <title>Belajarphp.net - ChartJS</title>
        <script src="Chart.bundle.js"></script>

        <style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <canvas id="myChart" width="100" height="100"></canvas>
        </div>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: [<?php while ($b = mysqli_fetch_array($bulan)) { echo '"' . $b['bulan'] . '",';}?>],
                    datasets: [{
                            label: '# of Votes',
                            data: [<?php while ($p = mysqli_fetch_array($penghasilan)) { echo '"' . $p['hasil_penjualan'] . '",';}?>],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderWidth: 1
                        }]
                },
                options: {
                    scales: {
                        yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    }
                }
            });
        </script>
    </body>
</html>

Kemudian, silahkan jangan lupa untuk menyimpan atau save script diatas terlebih dahulu. Selanjutnya untuk dapat melihat perubahannya silahkan sahabat semua refresh kembali web browser yang sahabat gunakan, dan sekarang lihat perbedaannya dengan yang pertama diatas yang telah kita buat. Maka akan menjadi seperti berikut ini :

Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs

Sumber referensi : Belajarphp.net

Baiklah itu tadi Bagaimana Cara Membuat Grafik dengan PHP dan ChartJS yang dapat kita lakukan, silahkan agar sahabat lupacode semuanya mempraktikannya secara langsung, dan silahkan sahabat semua mencoba - coba untuk berkreasi setelah kita paham dan mengerti mengenai Cara Membuat Grafik dengan PHP dan ChartJS.
Lihat juga materi menarik lainnya :
  1. Aplikasi Absensi Siswa Berbasis Web
  2. Sistem Informasi Akademik Berbasis Web
  3. Aplikasi Akuntansi dengan CodeIgniter
  4. Aplikasi SPK Metode Profile Matching
  5. E-Commerce Rainkids dengan codeigniter
  6. Sistem Informasi Alumni Berbasis Web

Mungkin sampai disini dulu untuk tutorial kali ini yaitu Tutorial Membuat Grafik dengan PHP Mysql dan Chartjs, semoga apa yang saya sampaikan pada materi tutorial kali ini dapat bermanfaat bagi sahabat lupacode semuanya.

Sampai berjumpa kembali pada postingan materi berikutnya dari blog lupacode - Tutorial Pemrograman jangan sampai ketinggalan update materi terbaru lainnya yang akan saya share setiap hari. Terimakasih telah berkunjung ke dalam blog lupacode, happy coding ! wassalamualaikum, wr, wb.

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon