Table diatas merupakan table berjenis line atau dikenal dengan line chart, table diatas dikoneksikan langsung ke database mysql, sehingga para pengguna sangat mudah untuk menganalisa data, adapun saat ini kita akan membahas cara menampilkam data pada database mysql dengan menggunakan grafik line, sebenarnya grafik model apa saja dapat dikoneksikan ke database, banyak model grafik yang dapat dikoneksikan dan anda dapat mengunjunginya disini :

Aneka Ragam Grafik

Kita langsung saja pada inti pembahasan yakni: menampilkam data pada database mysql dengan menggunakan grafik line, Langkah pertama tentu membuat database, jika sudah membuatnya dengan nama databse yang sudah diberi nama, tentu dilanjutkan membuat table database, adapun pada artikel ini kita membuat table database dengan nama grafik_manpower seperti pada gambar dibawah ini :

Kemudian kita isi datanya seperti dibawah ini :

Jika sudah maka kita hanya membuat file php untuk menampilkan grafik line sekaligus data yang diambil dari database mysql, dan hal ini membutuhkan jquery.js dan chart.js adapun skripnya sebagai berikut :

<?php
include_once "connection.php"; // koneksi database 

$planningjanuari = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='januari' ORDER BY jumlah ");
$planningfebruari = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='februari' ORDER BY jumlah ");
$planningmaret = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='maret' ORDER BY jumlah ");
$planningapril = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='april' ORDER BY jumlah ");
$planningmei = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='mei' ORDER BY jumlah ");
$planningjuni = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='juni' ORDER BY jumlah ");
$planningjuli = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='planning' AND bulan='juli' ORDER BY jumlah ");
// Batasan

$plantationjanuari = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='januari' ORDER BY jumlah ");
$plantationfebruari = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='februari' ORDER BY jumlah ");
$plantationmaret = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='maret' ORDER BY jumlah ");
$plantationapril = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='april' ORDER BY jumlah ");
$plantationmei = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='mei' ORDER BY jumlah ");
$plantationjuni = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='juni' ORDER BY jumlah ");
$plantationjuli = mysqli_query($koneksidb, "SELECT jumlah FROM grafik_manpower WHERE dept='plantation' AND bulan='juli' ORDER BY jumlah ");

?>

// Skrip Grafik (javascript)
<script>
$(function () { 
var areaChartCanvas = $('#areaCharttiga').get(0).getContext('2d')
var areaChartData = {
labels  : ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli'], // disini bisa anda ambil datanya dari database

datasets: [
{
label               : 'Man Power Planning',
backgroundColor     : 'rgba(60,141,188,0.9)',
borderColor         : 'rgba(60,141,188,0.8)',
pointRadius          : false,
pointColor          : '#3b8bba',
pointStrokeColor    : 'rgba(60,141,188,1)',
pointHighlightFill  : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data                : //Masukan data dari database disini
  
// JUMLAH MAN POWER PLANNING

[  
 <?php while  ($plann_jan = mysqli_fetch_array($planningjanuari)) { echo  '"' .$plann_jan['jumlah'].'",'; } ?>
 <?php while  ($plann_feb = mysqli_fetch_array($planningfebruari)) { echo  '"' .$plann_feb['jumlah'].'",'; }?>
 <?php while  ($plann_mar = mysqli_fetch_array($planningmaret)) { echo  '"' .$plann_mar['jumlah'].'",'; }?>
 <?php while  ($plann_april = mysqli_fetch_array($planningapril)) { echo  '"' .$plann_april['jumlah'].'",'; }?>
 <?php while  ($plann_mei = mysqli_fetch_array($planningmei)) { echo  '"' .$plann_mei['jumlah'].'",'; }?>
 <?php while  ($plann_juni = mysqli_fetch_array($planningjuni)) { echo  '"' .$plann_juni['jumlah'].'",'; }?>
 <?php while  ($plann_juli = mysqli_fetch_array($planningjuli)) { echo  '"' .$plann_juli['jumlah'].'",'; }?>

  ]

  },{

  label               : 'Man power Plantation',
  backgroundColor     : 'rgba(210, 214, 222, 1)',
  borderColor         : 'rgba(210, 214, 222, 1)',
  pointRadius         : false,
  pointColor          : 'rgba(210, 214, 222, 1)',
  pointStrokeColor    : '#c1c7d1',
  pointHighlightFill  : '#fff',
  pointHighlightStroke: 'rgba(220,220,220,1)',
  data                : //[75, 59, 90, 61, 56, 55, 90]

  
// JUMLAH MAN POWER PLANTATION

[  
<?php while  ($plant_jan = mysqli_fetch_array($plantationjanuari)) { echo  '"' .$plant_jan['jumlah'].'",'; } ?>
<?php while  ($plant_feb = mysqli_fetch_array($plantationfebruari)) { echo  '"' .$plant_feb['jumlah'].'",'; }?>
<?php while  ($plant_mar = mysqli_fetch_array($plantationmaret)) { echo  '"' .$plant_mar['jumlah'].'",'; }?>
<?php while  ($plant_april = mysqli_fetch_array($plantationapril)) { echo  '"' .$plant_april['jumlah'].'",'; }?>
<?php while  ($plant_mei = mysqli_fetch_array($plantationmei)) { echo  '"' .$plant_mei['jumlah'].'",'; }?>
<?php while  ($plant_juni = mysqli_fetch_array($plantationjuni)) { echo  '"' .$plant_juni['jumlah'].'",'; }?>
<?php while  ($plant_juli = mysqli_fetch_array($plantationjuli)) { echo  '"' .$plant_juli['jumlah'].'",'; }?>
] 
},
]
}
var areaChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
}
}],
yAxes: [{
gridLines : {
display : false,
}
}]
}}
// anda harus menggunakan chart.js dan jquery.js, karena skrip dibawah ini adalah mengembalikan node pada koleksi jQuery.
// Perhatikan skrip yang diberi huruf tebal, merupakan skrip yang terhubung dengan jquery yang akan kita bahas dilain artikel.
// Jika anda ingin menggunakan grafik lain, dan menemukan skrip yang berbeda pada akhir skripnya  maka harus dirubah lebih dahulu seperti skrip dibawah ini:

var areaChart  = new Chart(areaChartCanvas, { 
type: 'line',
data: areaChartData, 
options: areaChartOptions
})})

</script>

Jika sudah selesai, maka kita hanya meletakkan areaCharttiga pada id="areaCharttiga", biasanya dapat kita letakkan dimana tempat yang disuka, dengan cara <div id="areaCharttiga"></div>, kitapun dapat mengatur ukuran seperti : meletakkan style pada div tersebut contohnya : <div id="areaCharttiga" style="min-height: 500px; height: 500px; max-height: 500px; max-width: 100%;"></div>

nama areaCharttiga dapat diganti dengan nama yang sesuai data yang ingin ditampilkan agar mudah ketika anda mengerjakan projek yang besar.

Selamat mencoba dan semoga berhasil.