Menampilkan
Data dari Database dengan Grafik
B.
PENDAHULUAN
1.
Pengertian
Grafik
adalah
2.
Latar Belakang
Bagaimana
pun juga, manusia lebih mudah menangkap informasi menggunakan gambar
daripada hanya tulisan maka dari itu, disini saya mencoba menyajikan
data dalam sebuah grafik.
3.
Maksud danTujuan
-
Agar data mudah dibaca
-
Informasi yang disajikan lebih mudah ditangkap
-
Lebih menarik
4.
Hasil yang Diharapkan
Dengan
data yang ditampilkan dalam bentuk grafik ini, semoga data lebih
mudah untuk dimengerti.
C.
ALAT dan BAHAN
-
PC
-
Chart.js bisa di download disini
-
Database
-
Text editor
D.
JANGKA WAKTU
1
jam
E.
LANGKAH-LANGKAH
- Download plugin nya.
-
Buat database dan table nya, isikan datanya sekalian
- Buat direktory, dan file yakni index.php. Tuliskan script dibawah.
<html><head><title>Tampil Data lewat grafik nih - ChartJS</title><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>
-
Nah untuk memanggil chart nya, kita tambahkan script ini pada bawah tag title
<script src="Chart/Chart.bundle.js"></script>
-
Jangan lupa untuk koneksi nya, diletakkan paling atas ya. Sebelaum tag html.
<?php$koneksi = mysqli_connect("localhost", "root", "database", "perusahaan");$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");?>
-
Simpan file tersebut.
-
Buka file lewat browser.
F.
HASIL yang DIDAPAT
Data
dari database ditampilkan dalam bentuk grafik balok.
G.
PENEMUAN PERMASALAHAN
-
H.
KESIMPULAN
Jadi,
Dengan grafik ini data yang disajikan lebih menarik, serta informasi
lebih mudah ditangkap dan dipahami.
I.
REFERENSI
Tidak ada komentar:
Write komentar