Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 2

Seperti pada part 1 sebelumnya kami telah mengatakan bahwa disini kami akan menampilkan jumlah data perbulanny, tetapi sebelumnya temna-teman harus ketahui bahwa data yang ada pada database hanya data dari bulan januari sampai mei, jadi otomatis data yang akan tampil pada chart line nanti ahnya data dari januari sampai mein saja.

Read More : Cara Menggunakan Google Chart (Line Chart)  Pada PHP Part 1

Selanjutnya yang harus kalian lakukan adalah memanggil database, tetapi ssebelum memanggil database kita harus terkoneksi dengan daabase yang tadi kalian masukkan, berikut cara koneksinya.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'chart');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Setelah sudah terkoneksi, berikutnya yang harus kita lakukan adalah memanggil jumlah data perbulan yang ada di dalam database tadi menggunakan php.

 <?php
$tahun=date("Y");
$total = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints where YEAR(regDate)='$tahun'");
$data = mysqli_fetch_row($total);
$totalall = $data[0];

$hasil1 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun'");
$data1 = mysqli_fetch_row($hasil1);
$jumlah1 = $data1[0];


$hasil2 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun'");
$data2 = mysqli_fetch_row($hasil2);
$jumlah2 = $data2[0];


$hasil3 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun'");
$data3 = mysqli_fetch_row($hasil3);
$jumlah3 = $data3[0];


$hasil4 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun'");
$data4 = mysqli_fetch_row($hasil4);
$jumlah4 = $data4[0];


$hasil5 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun'");
$data5 = mysqli_fetch_row($hasil5);
$jumlah5 = $data5[0];


$hasil6 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun'");
$data6 = mysqli_fetch_row($hasil6);
$jumlah6 = $data6[0];


$hasil7 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun'");
$data7 = mysqli_fetch_row($hasil7);
$jumlah7 = $data7[0];


$hasil8 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun'");
$data8 = mysqli_fetch_row($hasil8);
$jumlah8 = $data8[0];


$hasil9 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun'");
$data9 = mysqli_fetch_row($hasil9);
$jumlah9 = $data9[0];


$hasil10 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun'");
$data10 = mysqli_fetch_row($hasil10);
$jumlah10 = $data10[0];

$hasil11 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun'");
$data11 = mysqli_fetch_row($hasil11);
$jumlah11 = $data11[0];


$hasil12 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun'");
$data12 = mysqli_fetch_row($hasil12);
$jumlah12 = $data12[0];

?> 

Dalam tipe timestamp di database bulan janury-february bisa di tuliskan 01-12, berikutnya data di atas kita panggil kedalam chart line dengan php.

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Total Complaint'],
      ['Jan',  <?php echo $jumlah1 = $data1[0]; ?>],
      ['Feb',  <?php echo $jumlah2 = $data2[0]; ?>],
      ['Mar',  <?php echo $jumlah3 = $data3[0]; ?>],
      ['Apr',  <?php echo $jumlah4 = $data4[0]; ?>],
      ['Mei',  <?php echo $jumlah5 = $data5[0]; ?>],
      ['Jun',  <?php echo $jumlah6 = $data6[0]; ?>],
      ['Jul',  <?php echo $jumlah7 = $data7[0]; ?>],
      ['Aug',  <?php echo $jumlah8 = $data8[0]; ?>],
      ['Sep',  <?php echo $jumlah9 = $data9[0]; ?>],
      ['Oct',  <?php echo $jumlah10 = $data10[0]; ?>],
      ['Nov',  <?php echo $jumlah11 = $data11[0]; ?>],
      ['Dec',  <?php echo $jumlah12 = $data12[0]; ?>]
      ]);

    var options = {
      curveType: 'function',
      legend: { position: 'bottom' }
    };
    
    //css 
    options.chartArea = { left: '10%', top: '5%', width: "85%", height: "80%" };
    
        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
  drawChart(data);
});
//end

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
}
</script> 

Kode dibawah ini yan saya pasang pada kode di atas sebenarnya kurang penting itu hanya kod eyang saya tambahkan, fungsinya adalah membuat line chart menajdi responsive dengan syarat anda harus menmghapus panjang atau width: 1200px jadi nantinya dia akan menyesuaikan sendiri panjangnya.

     //css 
    options.chartArea = { left: '10%', top: '5%', width: "85%", height: "80%" };
    
        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
  drawChart(data);
});
//end 

Langsung saja berikut kodingan lengkap dan gambarnya ketika chartnya sudah jadi.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'chart');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>LINE CHART</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  

  
  <?php
  $tahun=date("Y");
  $total = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints where YEAR(regDate)='$tahun'");
  $data = mysqli_fetch_row($total);
  $totalall = $data[0];

  $hasil1 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun'");
  $data1 = mysqli_fetch_row($hasil1);
  $jumlah1 = $data1[0];


  $hasil2 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun'");
  $data2 = mysqli_fetch_row($hasil2);
  $jumlah2 = $data2[0];


  $hasil3 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun'");
  $data3 = mysqli_fetch_row($hasil3);
  $jumlah3 = $data3[0];


  $hasil4 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun'");
  $data4 = mysqli_fetch_row($hasil4);
  $jumlah4 = $data4[0];


  $hasil5 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun'");
  $data5 = mysqli_fetch_row($hasil5);
  $jumlah5 = $data5[0];


  $hasil6 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun'");
  $data6 = mysqli_fetch_row($hasil6);
  $jumlah6 = $data6[0];


  $hasil7 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun'");
  $data7 = mysqli_fetch_row($hasil7);
  $jumlah7 = $data7[0];


  $hasil8 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun'");
  $data8 = mysqli_fetch_row($hasil8);
  $jumlah8 = $data8[0];


  $hasil9 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun'");
  $data9 = mysqli_fetch_row($hasil9);
  $jumlah9 = $data9[0];


  $hasil10 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun'");
  $data10 = mysqli_fetch_row($hasil10);
  $jumlah10 = $data10[0];

  $hasil11 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun'");
  $data11 = mysqli_fetch_row($hasil11);
  $jumlah11 = $data11[0];


  $hasil12 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun'");
  $data12 = mysqli_fetch_row($hasil12);
  $jumlah12 = $data12[0];

  ?>



  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Month', 'Total Complaint'],
        ['Jan',  <?php echo $jumlah1 = $data1[0]; ?>],
        ['Feb',  <?php echo $jumlah2 = $data2[0]; ?>],
        ['Mar',  <?php echo $jumlah3 = $data3[0]; ?>],
        ['Apr',  <?php echo $jumlah4 = $data4[0]; ?>],
        ['Mei',  <?php echo $jumlah5 = $data5[0]; ?>],
        ['Jun',  <?php echo $jumlah6 = $data6[0]; ?>],
        ['Jul',  <?php echo $jumlah7 = $data7[0]; ?>],
        ['Aug',  <?php echo $jumlah8 = $data8[0]; ?>],
        ['Sep',  <?php echo $jumlah9 = $data9[0]; ?>],
        ['Oct',  <?php echo $jumlah10 = $data10[0]; ?>],
        ['Nov',  <?php echo $jumlah11 = $data11[0]; ?>],
        ['Dec',  <?php echo $jumlah12 = $data12[0]; ?>]
        ]);

      var options = {
        curveType: 'function',
        legend: { position: 'bottom' }
      };
      
    //css 
    options.chartArea = { left: '10%', top: '5%', width: "85%", height: "80%" };
    
        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
  drawChart(data);
});
//end

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
}
</script>


</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="#">GOOGLE CHART</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
       <ul class="dropdown-menu"></ul>
     </li>
   </ul>
 </div>
</nav>
<br />
<h2 align="center">LINE CHART</h2>
<br />
<form method="post">
 <div class="form-group">
   <div id="curve_chart" style="width: 1200px; height: 500px"></div>
 </div>
</form>

</div>
</body>
</html>
 


Sekian tutorial kali ini semoga apa yang kami share bermanfaat bagi anda semua, Jika teman-teman belum paham dengan kodingan atau tutorial di atas silahkan tinggalkan comment dibawah. dan jika teman-teman mempunyai saran atau masukan tutorial yang ingin saya bahas silahkan tinggalkan koment dibawah.