Pasti teman teman tau yah apa itu reporting, reporting sering kali dibuat dengan sebuah data table atau data yang berada didalam sebuah table, sudah umum yah denganhal ini, tapi bagaimana jika seorang clint atau bos teman teman memintanya dengan tampilan sebuah graphic sehingga
memudahkan boss dalam membaca sebuah laporan, pasti sangat menarik yah melihat dengan tampilan graphic dan tidak membaca baca lagi tentang laporan tersebut karena dengan grapic semua sudah jelas banget, baikalh pada kasus ini kita akan membuat sebuah report menggunakan graphic dari plugin CHARTJS, caranya mudah, pastikan teman teman ikuti langkah berikut :
Buatkan sebuah file baru dan beri nama index.html lalu tambahkan script berikut:
|
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 |
<?php $con = mysqli_connect('localhost','root','','dbku'); if (!$con){ die("Databases tidak tersedia " . mysqli_connect_error()); } $bulan = mysqli_query($con, "SELECT * FROM ismet_graphic WHERE tahun = '2016' ORDER BY id ASC "); $penghasilan = mysqli_query($con,"SELECT total_jual FROM ismet_graphic WHERE tahun = '2016' ORDER BY id ASC"); ?> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <style type="text/css"> .container { width: 35%; 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 myDoughnutChart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: [<?php while($data = mysqli_fetch_array($penghasilan)){ echo '"' . $data['total_jual'] .'", ';} ?>], 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)' ], 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)' ], borderWidth: 1 } ], labels: [<?php while($row = mysqli_fetch_array($bulan)){ echo '"' . $row['bulan'] . ' / ' . $row['product']. '", ';} ?>] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); </script> </body> </html> |
Jika sudah disave dan jalankan jika semua berhasil maka tampilannya akan seperti ini :
Untuk lebih lanjutnya teman teman bisa situ dari chartjs.org
Oke sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLeran
#IsmetMA