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>NamaMahasiswa</th>
<th>NIM</th>
<th>JK</th>
<th>Fakultas</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
$data=mysqli_query($koneksi,"select * from mahasiswa");
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'");
echomysqli_num_rows($jumlah_laki);
?>,
<?php
$jumlah_perempuan=mysqli_query($koneksi,"select * from mahasiswa where jenis_kelamin='P'");
echomysqli_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
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.
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Membuat Form Login Dengan PHP Tanpa Database – Form login adalah fitur yang sangat berguna dalam sebuah aplikasi atau website. Dengan adanya fitur form login, ...
Menghitung selisih waktu dengan PHP adalah hal yang penting untuk dikuasai. Kenapa begitu? Karena terkadang kita dihadapkan dengan kondisi dimana aplikasi yang sedang kita buat ...
Membuat crud menggunakan ajax php pada operasi hapus data pada database. Artikel ini lanjutan dari artikel sebelumnya mengenai bagaimana cara menginput data menggunakan ajax jquery. ...
Membuat crud menggunakan ajax php dalam operasi input data. Artikel ini dilanjutkan dari materi sebelumnya yang membahas bagaimana cara menampilkan data menggunakan ajax dan php. ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
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 ?