Membuat Grafik Dari Database MySQL dan PHP dengan Chartjs

Selamat datang di warung belajar, melanjutkan pembahasan dari seri tutorial PHP, pada part 55 kita akan belajar membuat grafik untuk menampilkan data dari database mysql dengan php menggunakan Chart.js

Chart.js adalah salah satu library Javascript yang digunakan untuk membuat grafik.

Pada tutorial ini kita akan membuat grafiknya untuk menampilkan data dari database MySQL.

 

Persiapan Library Chart.js

Sebelumnya kita memulai kita akan persiapkan dulu library Chart.js, silahkan buka website resmi Chart.js :

https://www.chartjs.org/

didalamnya terdapat banyak jenis chart yang bisa anda buat dengan menggunakan Chart.js, anda melihat contoh grafiknya di menu sample : https://www.chartjs.org/samples/latest/

 

Kita persiapkan dulu library Chart.js, silahkan mengakses alamat :

https://github.com/chartjs/Chart.js/releases

akan terdapat library chart.js dengan versi yang paling baru, saat tutorial ini dibuat chart.js ada diversi 2.8.0.

Untuk mempermudah anda dalam download library Chart.js, kita sudah siapkan link downloadnya, untuk download library chart.js : Klik Disini

 

Buat Folder Project

Berikutnya silahkan buat folder projectnya.

Karena dalam contoh ini kita menggunakan xampp, sehingga kita akan simpan file project di drive C:/xampp/htdocs

Dalam contoh ini kita akan buat folder dengan nama belajarchart, sehingga folder project kita ada di direktori C:/xampp/htdocs/belajarchart

Pada direktori tersebut, silahkan letakkan file Chart.js hasil download sebelumnya, lalu berikutnya silahkan buat 4 file PHP lainnya :

  1. grafik_bulan.php
  2. grafik_pie.php
  3. index.php
  4. koneksi.php

baik saya asumsikan teman – teman sudah membuat folder project, serta telah mempersiapkan file seperti gambar diatas.

 

Membuat Database

Berikutnya silahkan buat sebuah database dengan nama db_penjualan, yang didalamnya terdapat 2 tabel, antara lain :

tabel tb_barang

 

tabel tb_penjualan

 

Untuk mempermudah anda dalam membuat database, tabel, serta record didalam tabel, anda bisa menggunakan perintah SQL dibawah ini :

Baik kita asumsikan teman – teman sudah memiliki database seperti database db_penjualan diatas.

 

 

Membuat File Koneksi.php

Silahkan buka file koneksi.php yang sebelumnya kita buat, lalu isikan code dibawah ini :

Keterangan :

  • Perintah diatas digunakan untuk koneksi ke database db_penjualan yang sebelumnya telah kita buat.
  • $host dengan nilai “localhost” yang merupakan alamat server databasenya
  • $user dengan nilai “root” yang merupakan user dari databasenya
  • $password dengan nilai “” yang merupakan password untuk mengakses database, nilainya kosong karena default dari xampp untuk password user root adalah kosong
  • $database dengan nilai “db_penjualan” yang merupakan nama dari database yang sebelumnya telah kita buat
  • Baris 6 adalah perintah untuk melakukan koneksi ke database, dan hasilnya disimpan di variabel $koneksi.

 

 

Membuat Grafik Penjualan Per Barang

Baik kita asumsikan anda sudah memiliki database, dan telah membuat sebuah file koneksi.php yang digunakan untuk melakukan koneksi ke database.

Berikutnya kita akan membuat grafik Penjualan Perbarang, silahkan buka file index.php yang sebelumnya telah kita buat, lalu isikan code dibawah ini :

 

Untuk mengakses file index.php anda bisa mengaksesnya melalui alamat : localhost/belajarchart

maka tampilannya adalah seperti berikut ini :

Maka akan ditampilkan grafik penjualan yang dibagi per barang.

 

Penjelasan code :

Baris 2 kita include file koneksi.php

 

Baris 3 kita tuliskan query untuk mengambil data di tabel tb_barang

 

Baris 4 kita extract data hasil query di baris 3 dan datanya kita simpan di variabel $row

 

Baris 5 kita buat array dengan nama $nama_produk, dimana array ini digunakan untuk menyimpan nama barang hasil query dibaris 3

 

Baris 7 kita menuliskan query untuk menjumlahkan nilai pada kolom jumlah di tabel tb_penjualan, berdasarkan id_barang disetiap perulangan data barang.

 

Baris 8 kita membuat variabel $row digunakan untuk menyimpan hasil query di baris 7 kedalam bentuk array dengan perintah fetch_array

 

Baris 9 kita membuat array $jumlah_produk untuk menyimpan data jumlah disetiap barang yang terjual di tabel tb_penjualan

Nah sampai sini kita memiliki 2 array :

  • $nama_produk yang berisi nama – nama dari barang
  • $jumlah_produk yang berisi jumlah penjualan dari masing – masing barang di tabel tb_penjualan

 

Baris 16 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

 

Baris 20 kita membuat sebuah object dengan menggunakan tag <canvas> dimana didalamnya kita menuliskan nama id=”myChart”

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

 

Baris 25 kita menuliskan myChart itu adalah id dari object yang kita buat di baris 20

 

Baris 29 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $nama_produk yang berisi daftar nama barang, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $nama_produk menjadi bentuk JSON

 

Baris 32 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan per barang, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

 

Baris 33 anda dapat memodifikasi warna dari chart, dalam contoh ini kita buat warnanya adalah warna merah

 

Baris 34 anda dapat memodifikasi border dari bagian chart

 

 

Membuat Laporan Penjualan Per Bulan

Berikutnya kita akan membuat laporan penjualan per bulan, silahkan buka file grafik_bulan.php, lalu isikan code dibawah ini :

 

Untuk menampilkan grafiknya anda bisa mengakses alamat : localhost/belajarchart/grafik_bulan.php

Keterangan Code :

Baris 2 kita include file koneksi.php

 

Baris 3 kita membuat array $label yang berisi data bulan, dimana data bulan ini nanti akan kita jadikan label dari grafik

 

Baris 5 kita membuat perulangan dengan menggunakan perintah for, dimana for diawal dari variabel $i dengan nilai 1, dan melakukan perulangan 12 kali, ini kita gunakan untuk menjadi bulan, yang nantinya digunakan sebagai perhitungan data penjualan perbulannya

 

Baris 7 setiap perulangannya kita buat query untuk menghitung jumlah pada kolom jumlah dari tabel tb_penjualan yang terjadi pada bulan di variabel $i yaitu dari angka 1 – 12

 

Baris 8 kita buat variabel $row untuk menyimpan hasil dari query baris 7

 

Baris 9 kita membuat array $jumlah_produk, untuk menyimpan data jumlah penjumlahan disetiap bulannya.

Nah sampai sini kita memiliki 2 array :

  • $label yang berisi nama – nama bulan
  • $jumlah_produk yang berisi jumlah penjualan di masing – masing bulan

 

Baris 16 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

 

Baris 20 kita membuat sebuah object dengan menggunakan tag <canvas> dimana didalamnya kita menuliskan nama id=”myChart”

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

 

Baris 25 kita menuliskan myChart itu adalah id dari object yang kita buat di baris 20

 

Baris 31 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $label yang berisi daftar nama bulan, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $label menjadi bentuk JSON

 

Baris 32 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan barang perbulan, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

Untuk warna disini kita sengaja tidak set, sehingga grafik menampilkan warna defaultnya yaitu abu – abu

 

Membuat Grafik PIE

Berikutnya kita akan membuat grafik PIE untuk menampilkan presentase penjualan dengan bentuk PIE, baik silahkan buka file grafik_pie.php yang sebelumnya telah kita buat, lalu isikan dengan code dibawah ini :

 

Untuk menampilkan grafik, silahkan mengakses menggunakan alamat : localhost/belajarchart/

Keterangan Code :

Baris 2 kita include file koneksi.php

 

Baris 3 kita membuat query untuk mengambil data di tabel tb_barang, dan hasil query disimpan di variabel $produk.

 

Baris 4 kita extract hasil query dengan menggunakan perintah while, dimana setiap datanya disimpan di variabel $row

 

Baris 5 kita membuat array $nama_produk yang digunakan untuk menyimpan nama barang disetiap perulangan, array ini yang akan kita gunakan sebagai label grafik

 

Baris 7 kita membuat query untuk menghitung jumlah di kolom jumlah pada tabel tb_penjualan untuk setiap barangnya, hasil query disimpan di variabel $query

 

Baris 8 kita membuat variabel $row yang digunakan untuk menyimpan hasil konversi ke dalam bentuk array

 

Baris 9 kita membuat array $jumlah_produk untuk digunakan menyimpan data jumlah penjualan disetiap barangnya.

Nah sampai sini kita memiliki 2 array :

  • $nama_produk yang berisi nama – nama barang
  • $jumlah_produk yang berisi jumlah penjualan di masing – masing barang

 

Baris 17 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

 

Baris 22 kita membuat sebuah object dengan menggunakan tag <canvas> dimana didalamnya kita menuliskan nama id=”canvas-area”

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

 

Baris 29 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan barang perbulan, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

 

Baris 42 kita bisa set bagian judul chart

 

Baris 44 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $nama_produk yang berisi daftar nama barang, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $nama_produk menjadi bentuk JSON

 

Baris 51 kita menuliskan bagian ID chart-area yang kita tulis pada baris 22

 

Source Code Hasil Belajar

Untuk hasil belajar bisa anda download disini :

 

Baik teman – teman sekian dulu pembahasan tutorial kali ini, kita sudah belajar membuat grafik untuk menampilkan data dari database MySQL dengan PHP menggunakan ChartJS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial berikutnya.

Leave a Comment

Your email address will not be published.