Tutorial PHP MySQL, Menampilkan Data Grafik Menggunakan ChartJS

Beberapa waktu lalu admin mengerjakan sebuah proyek pembuatan aplikasi web, nah dalam aplikasi web tersebut terdapat modul untuk menampilkan laporan dalam bentuk grafik, sempat bingung memilih plugin grafik apa yang akan digunakan, setelah coba sana-sini akhirnya ketemu salah satu plugin grafik namanya ChartJS, ada banyak plugin-plugin javascript untuk membuat grafik tapi admin memilih untuk menggunakan plugin ini saja.

Alasanya selain tampilanya simple, mudah digunakan serta dokumentasinya lengkap sangat mudah dimengerti, cocok untuk menampilkan data statis dan juga bisa menampilkan data dinamis yang datanya diambil dari database yang tiap saat atau realtime berubah-ubah.





Cukup untuk Intro nya :), saat ini kita langsung saja.

Langkah pertama sobat download dahulu library  ChartJS di website resminya http://www.chartjs.org/  kita juga bisa menggunakan library  ChartJS yang ada di CDN silahkan sobat cek disini https://cdnjs.com/libraries/Chart.js.

Untuk tutorial ini menggunakan librari yang berada di CDN.

 

Langkah selanjutnya sobat  masuk ke dalam direktori localhost dan buat satu buah file dan beri nama grafik.php, kemudian pastekan script dibawah ini.

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <title>Tutorial PHP dan MySQL Menampilkan Data Kedalam Grafik ChartJS</title>
</head>

<body>

<div style="height: 75%; width: 75%;">
    <canvas id="myChart" class="chart"></canvas>
</div>

</body>
</html>

Pada script HTML diatas sudah berisi tag <canvas id=”myChart” class=”chart”></canvas> tag canvas ini yang nantinya akan menampilkan grafik  ChartJS.

Jangan lupa juga untuk menambahkan link library javascript  ChartJS  di dalam tag <head> untuk tutorial ini admin menggunakan library yang ada di CDN https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js atau jika sobat sudah mendownload library tersebut silahkan menyesuaikan dengan link/path yang berada di direktori laptop/komputer sobat.

 

Langkah selanjutnya kita akan menampilkan contoh tampilan grafiknya, pastekan script dibawah ini didalam tag <body>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',        //Tipe tampilan grafik, sobat bisa menggunakan tampilan bar, pie, line, radar dan sebagainya
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //keterangan nama-nama label
        datasets: [{
            label: '# of Votes', //Judul Grafik
            data: [12, 19, 3, 5, 2, 3], //Data Grafik
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', //Warna Background Data Grafik
                'rgba(54, 162, 235, 0.2)', //Warna Background Data Grafik
                'rgba(255, 206, 86, 0.2)', //Warna Background Data Grafik
                'rgba(75, 192, 192, 0.2)', //Warna Background Data Grafik
                'rgba(153, 102, 255, 0.2)', //Warna Background Data Grafik
                'rgba(255, 159, 64, 0.2)' //Warna Background Data Grafik
            ],
            borderColor: [
                'rgba(255,99,132,1)', //Warna Garis Data Grafik
                'rgba(54, 162, 235, 1)', //Warna Garis Data Grafik
                'rgba(255, 206, 86, 1)', //Warna Garis Data Grafik
                'rgba(75, 192, 192, 1)', //Warna Garis Data Grafik
                'rgba(153, 102, 255, 1)', //Warna Garis Data Grafik
                'rgba(255, 159, 64, 1)' //Warna Garis Data Grafik
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

 

Untuk source kode lengkapnya silahkan menyesuaikan seperti dibawah ini.

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <title></title>
</head>

<body>


<div style="height: 75%; width: 75%;">
    <canvas id="myChart" class="chart"></canvas>
</div>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',        //Tipe tampilan grafik, sobat bisa menggunakan tampilan bar, pie, line, radar dan sebagainya
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //keterangan nama-nama label
        datasets: [{
            label: '# of Votes', //Judul Grafik
            data: [12, 19, 3, 5, 2, 3], //Data Grafik
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', //Warna Background Data Grafik
                'rgba(54, 162, 235, 0.2)', //Warna Background Data Grafik
                'rgba(255, 206, 86, 0.2)', //Warna Background Data Grafik
                'rgba(75, 192, 192, 0.2)', //Warna Background Data Grafik
                'rgba(153, 102, 255, 0.2)', //Warna Background Data Grafik
                'rgba(255, 159, 64, 0.2)' //Warna Background Data Grafik
            ],
            borderColor: [
                'rgba(255,99,132,1)', //Warna Garis Data Grafik
                'rgba(54, 162, 235, 1)', //Warna Garis Data Grafik
                'rgba(255, 206, 86, 1)', //Warna Garis Data Grafik
                'rgba(75, 192, 192, 1)', //Warna Garis Data Grafik
                'rgba(153, 102, 255, 1)', //Warna Garis Data Grafik
                'rgba(255, 159, 64, 1)' //Warna Garis Data Grafik
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

</body>
</html>

 

Coba sobat panggil file grafik.php tadi di browser sobat. Jika tampilannya sudah seperti dibawah ini berarti sobat berhasil menampilkan tampilan grafik  ChartJS.

 

Setelah langkah-langkah percobaan diatas selesai selanjutnya kita akan menampilkan data yang ada di database ke dalam grafik  ChartJS.

Sobat buat sebuah database kemudian buat struktur tabel seperti dibawah ini.

CREATE TABLE IF NOT EXISTS `pekerjaan` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `nama_pekerjaan` varchar(100) NOT NULL,
  `jumlah` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;


INSERT INTO `pekerjaan` (`id`, `nama_pekerjaan`, `jumlah`) VALUES
(1, 'Tani', '30'),
(2, 'Nelayan', '15'),
(3, 'Swasta', '11'),
(4, 'PNS', '20'),
(5, 'TNI', '16'),
(6, 'Polri', '9'),
(7, 'Wiraswasta', '3'),
(8, 'Pedagang', '8');

 

Selanjutnya kita akan menampilkan data pekerjaan yang ada di dalam database ke dalam tampilan grafik.

sobat buka lagi file grafik.php tadi dan sesuaikan isinya dengan script di bawah ini.

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <title></title>
</head>

<body>

<?php
    $conn = new mysqli('localhost', 'root', 'root', 'test');
    $sql = "SELECT * FROM pekerjaan";
    $nama_pekerjaan = $conn->query($sql);
    $jumlah = $conn->query($sql);
?>

<div style="height: 75%; width: 75%;">
    <canvas id="myChart" class="chart"></canvas>
</div>

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',        //Tipe tampilan grafik, sobat bisa menggunakan tampilan bar, pie, line, radar dan sebagainya
    data: {
        labels: [<?php while($b = mysqli_fetch_array($nama_pekerjaan)) { echo '"' . $b['nama_pekerjaan'] . '",'; } ?>], //keterangan nama-nama label
        datasets: [{
            label: 'GRAFIK PEKERJAAN', //Judul Grafik
            data: [<?php while($a = mysqli_fetch_array($jumlah)) { echo $a['jumlah'] . ', '; } ?>], //Data Grafik
            backgroundColor: [
                'red',  //Warna Background
                'blue', //Warna Background
                'green', //Warna Background
                'silver', //Warna Background
                'black', //Warna Background
                'yellow', //Warna Background
                'purple', //Warna Background
                'brown' //Warna Background
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>


</body>
</html>

Jika tidak error hasilnya akan seperti dibawah ini.

ChartJs juga memiliki beberapa tampilan, seperti line, bar, radar, doughnut, pie, polar dan sebagainya, sobat bisa mengubahnya dengan merubah parameter  type: ‘JENIS_GRAFIK’, menyesuaikan dengan kebutuhan tampilan grafik yang sobat inginkan.

Kita juga bisa merubah background warna grafiknya dan lain-lain. Tutorial ini belum begitu terlalu lengkap masih banyak fitur-fitur menarik yang ada di ChartJS yang berlum diulas, sobat bisa langsung menuju ke halaman dokumentasinya disini http://www.chartjs.org/docs/latest/ untuk mempelajari fitur-fitur menarik yang ada di ChartJS.

Demikian untuk tutorial kali ini, jika sobat memiliki pertanyaan, kritik, saran, maupun masukkan silahkan sobat menuliskannya di kolom komentar dibawah atau menghubungi kami melalui halaman kontak. Terima kasih. 🙂

Add a Comment

Your email address will not be published. Required fields are marked *