Membuat Grafik Dari Database Dengan PHP Part 2

Membuat Grafik Dari Database Dengan PHP Part 2
Membuat Grafik Dari Database Dengan PHP Part 2 – Tutorial ini merupakan kelanjutan dari tutorial Membuat Grafik dari database MySQL dan PHP Dengan Chart.js. Untuk melanjutkan tutorial sebelumnya tentang cara membuat grafik dari database MySQL dan PHP dengan Chart.js, pada tutorial ini kita akan belajar tentang membuat grafik pie dengan php dan chart.js.
Jika sebelumnya kita membuat grafik dengan grafik batang, maka pada tutorial ini kita akan belajar membuat grafik yang berbentuk pie atau sering disebut dengan nama “grafik pie”.
Grafik pie adalah grafik yang berbentuk bulat dan ada pembagian-pembagian kategori di dalamnya.
Untuk membuat grafik dinamis dengan PHP teman-teman bisa membaca tutorial sebelumnya di malasngoding.com. sebelumnya kita telah belajar tentang cara membuat chart atau grafik dengan chart.js dan belajar membuat grafik dari database dengan PHP menggunakan chart.js.
Silahkan teman-teman baca dulu tutorial sebelumnya jika teman-teman belum membacanya.
Di tutorial ini kita tidak lagi mengulang dari awal, tapi akan melanjutkan penjelasan sebelumnya. silahkan baca dulu tutorial pada link di atas jika belum.
Membuat Grafik Dari Database Dengan PHP
Pada tutorial ini kita akan membuat grafik dalam bentuk pie. untuk membuat grafik dalam bentuk pie, kita hanya perlu mengubah pada “type” grafik nya. silahkan teman-teman lihat pada file index.php yang sudah kita buat sebelumnya.
Sebelumnya type grafik yang kita buat adalah grafik “bar”. maka sekarang coba kita ubah dengan “pie”.

membuat grafik dari database dengan php
setelah merubah type grafik dari bar ke pie. selanjutnya coba kita lihat hasilnya.
jalankan kembali project kita dengan membuka localhost/grafik_mahasiswa pada browser.

Membuat Grafik Dari Database Dengan PHP Part 2
Mantap kita telah berhasil membuat grafik pie dengan php dari database mahasiswa yang menampilkan data jumlah mahasiswa berdasarkan fakultas nya masing-masing. mantap ! 😀
Untuk lebih lengkap tentang grafik pie pada chart.js teman-teman bisa membaca nya di panduan grafik Doughnut & Pie yang telah di sediakan oleh si developernya chart.js. Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js
Sampai di sini tapi saya masih belum puas. saya ingin membagikan ke teman-teman tentang cara membuat grafik berdasarkan jenis kelamin mahasiswa dengan menggunakan grafik chart.js.
Membuat Grafik Pie Berdasarkan Jenis Kelamin Mahasiswa
Seperti grafik fakultas yang sudah kita buat, grafik jenis kelamin ini juga akan kita buat dengan dinamis.
Oke langsung saja silahkan teman-teman buka file index.php. sekarang kita juga akan menampilkan jenis kelamin pada table data mahasiswa.
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table border="1"> <thead> <tr> <th>No</th> <th>Nama Mahasiswa</th> <th>NIM</th> <th>JK</th> <th>Fakultas</th> </tr> </thead> <tbody> <?php $no = 1; $data = mysqli_query($koneksi,"select * from mahasiswa"); while($d=mysqli_fetch_array($data)){ ?> <tr> <td><?php echo $no++; ?></td> <td><?php echo $d['nama']; ?></td> <td><?php echo $d['nim']; ?></td> <td align="center" bgcolor="pink"><?php echo $d['jenis_kelamin']; ?></td> <td><?php echo $d['fakultas']; ?></td> </tr> <?php } ?> </tbody> </table> |
Oke langsung saja lihat hasilnya.

membuat grafik dinamis dengan php
kemudian pada data grafik juga kita ubah, di sini kita akan menampilkan data mahasiswa berdasarkan jenis kelamin. kemudian kita hitung jumlahnya.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["Laki-laki", "Perempuan"], datasets: [{ label: '', data: [ <?php $jumlah_laki = mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='L'"); echo mysqli_num_rows($jumlah_laki); ?>, <?php $jumlah_perempuan = mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='P'"); echo mysqli_num_rows($jumlah_perempuan); ?> ], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> |
Perhatikan pada data.
Di sini kita mengambil data mahasiswa yang jenis kelamin nya sama dengan “L”. dan menghitung jumlahnya. begitu juga dengan mahasiswa yang berjenis kelamin “P”.
1 2 3 4 5 6 7 8 9 10 |
data: [ <?php $jumlah_laki = mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='L'"); echo mysqli_num_rows($jumlah_laki); ?>, <?php $jumlah_perempuan = mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='P'"); echo mysqli_num_rows($jumlah_perempuan); ?> ] |
Maka hasilnya

membuat grafik jenis kelamin dengan php dan mysql chartjs
Nah grafik jenis kelamin mahasiswa pun telah selesai kita buat.
Full Source Code Membuat Grafik Dari Database Dengan PHP Part 2
koneksi.php
1 2 3 |
<?php $koneksi = mysqli_connect("localhost","root","","grafik_mahasiswa"); ?> |
Index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html> <html> <head> <title>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS - www.malasngoding.com</title> <script type="text/javascript" src="chartjs/Chart.js"></script> </head> <body> <style type="text/css"> body{ font-family: roboto; } table{ margin: 0px auto; } </style> <center> <h2>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS<br/>- www.malasngoding.com -</h2> </center> <?php include 'koneksi.php'; ?> <div style="width: 800px;margin: 0px auto;"> <canvas id="myChart"></canvas> </div> <br/> <br/> <table border="1"> <thead> <tr> <th>No</th> <th>Nama Mahasiswa</th> <th>NIM</th> <th>JK</th> <th>Fakultas</th> </tr> </thead> <tbody> <?php $no = 1; $data = mysqli_query($koneksi,"select * from mahasiswa"); while($d=mysqli_fetch_array($data)){ ?> <tr> <td><?php echo $no++; ?></td> <td><?php echo $d['nama']; ?></td> <td><?php echo $d['nim']; ?></td> <td align="center" bgcolor="pink"><?php echo $d['jenis_kelamin']; ?></td> <td><?php echo $d['fakultas']; ?></td> </tr> <?php } ?> </tbody> </table> <script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["Laki-laki", "Perempuan"], datasets: [{ label: '', data: [ <?php $jumlah_laki = mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='L'"); echo mysqli_num_rows($jumlah_laki); ?>, <?php $jumlah_perempuan = mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='P'"); echo mysqli_num_rows($jumlah_perempuan); ?> ], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> </body> </html> |
Direkomendasikan untuk membaca tutorial berikut, agar materi lebih jelas dan terarah.
- Membuat grafik dengan Chart.js
- Menampilkan data dari database dengan PHP
- Membuat grafik dari database MySQL dan PHP Dengan Chart.JS
Oke teman-teman, sekian dulu tutorial Membuat Grafik Dari Database Dengan PHP Part 2. semoga bermanfaat. sampai jumpa di tutorial selanjutnya di www.malasngoding.com.
Tutorial Menarik Lainnya

Membuat Form Login Dengan PHP Tanpa Database


Menghitung Selisih Waktu Dengan PHP


Membuat CRUD menggunakan Ajax PHP – Hapus Data


Makasi infonya om .
sangat membantu untuk tugas kuliah saya
mau nanya mas misal datanya aja 100, biar labelsnya ga ngoding satu satu, gmna mas ?, querynya gmna ?
mau nanya apakah bisa mas memasukkan 2 database dalam satu web gmana ya mas ? kalau bisa bagaimana caranya ?