Tuesday 10 October 2017

Cara Membuat Grafik di PHP

Cara Membuat Grafik di PHP



Di sebuah aplikasi terutama berbasis web pasti menemukan adanya grafik untuk pelaporan. Lalu bagaimana cara membuat grafik menggunakan PHP ?
Mari kita pelajari sama sama

1. Pertama kita buat tabelnya seperti di bawah ini.

itu ada field id_lap_pelanggaran merupakan berelasi dengan tabel lain,  untuk kasus ini saya menggunakan field tahun sebagai untuk acuan value nya untuk menampilkan grafiknya

2. Setelah itu masukkan kode di bawah ini.

<html>
  <head>
  <title>Chart Pelanggaran</title>
  <script src="../js/jquery2.min.js" type="text/javascript"></script>
  <script src="../js/highcharts.js" type="text/javascript"></script>
  <script type="text/javascript">

  var chart1;
  $(document).ready(function() {
    chart1 = new Highcharts.Chart({

      chart: {
              renderTo: 'container',
              width: '550',
              height: '470',
              type: 'column'
          },
          title: {
              text: 'Grafik Pelanggaran Siswa'
          },
          xAxis: {
              categories: ['Tahun Pelanggaran']
          },
          yAxis: {
              title: {
              text: 'Jumlah Pelanggaran',
            },
            tickInterval: 1
        },

    series:          
         
      [
        <?php
        include('include/config.php');

        $sql = mysql_query("SELECT tahun, count(tahun) as 'jumlah' FROM pelanggaran_siswa WHERE tahun group by tahun") or die (mysql_error());
        while ($data = mysql_fetch_array($sql))
        {
          $tahun    = $data['tahun'];
          $jmltahun = mysql_query("SELECT tahun, count(tahun) as 'jumlah' FROM pelanggaran_siswa WHERE tahun='$tahun' group by tahun")
            or die (mysql_error());
          while ($datajumlah = mysql_fetch_array($jmltahun)) {
            $jumlah = $datajumlah['jumlah'];
        }
        ?>
          {
            name: '<?php echo $tahun; ?>',
            data: [<?php echo $jumlah; ?>]
          },
        <?php
        }
        ?>
            ]
    });
  });
</script>

  </head>
  <body>
    <center><div id='container'></div></center>  
  </body>
</html>

//NB : Kode diatas saya menginclude kan file JS, untuk kasus ini saya menggunakan Highcharts sebagai pembuatan Chartnya.
3. Jika step-step yang dilakukan benar, maka akan muncul grafiknya seperti gambar di bawah ini



Sekian postingan saya , semoga bermanfaat bagi para pembacanya dan memiliki kasus yang sama :D

Enjoy your coding :D

Jika ada pertanyaan, silahkan bertanya di kolom komentar dengan sopan :)
Share:

0 comments:

Post a Comment

Motivasi

Jalani hari-hari dengan bismillah dan ikhlas

Contact

WA : 085 727 109 286

Service

Menerima jasa pembuatan aplikasi