Membuat Grafik Chart dengan PHP

Membuat Chart dengan PHP
Membuat Chart dengan PHP

Membuat Grafik Chart dengan PHP -  Apa itu Grafik? Bagan, juga diistilahkan sebagai grafik atau diagram, adalah sebuah representasi grafis dari sebuah data. Yang dimana data tersebut diwakili dibentuk oleh simbol-simbol, seperti batang dalam bagan batang, garis-garis dalam sebuah bagan garis, atau irisan dalam bagan pai, nah untuk penggunaan nya ini , sering dipakai di sistem informasi penjualan , pendataan penduduk dan banyak lagi macamnya , nah untuk model graffik ini sendiri banyak macam nya , seperti yang tadi admin jelaskan , atau juga sobat bisa lihat gambar dibawah ini :

Model Grafik Chart


Model Grafik

Nah jadi itulah model dari grafik itu sendiri , nah sekarang kita akan membuatnya untuk pendataan data siswa di sebuah kelas , menggunakan bahasa pemrograman PHP tentunya , oke tanpa banyak basa - basi , langsung saja kita buat chart atau grafiknya.

Membuat Grafik Chart dengan PHP

  1. Siapkan Text Editor kalian masing - masing.
  2. Kemudian buat database baru dengan nama ruangcoderchart .
  3. Dan kalian buat table baru dengan nama siswa.
  4. Kemudian kalian buat 3 field saja cukup, dan isi dengan sebagai berikut.

  5. Perhatikan!
    Silahkan isi field tersebut kreasikan sendiri, untuk bagian id_siswa kalian kosongkan saja.

  6. Lanjut, kalian buat folder baru dengan nama latihan_chart
  7. Kemudian kalian buat file baru dengan nama index.php
  8. Selanjutnya, kalian ketikkan kode dibawah ini.
  9. <?php
    //koneksi ke database
    $conn = new mysqli("localhost", "root", "", "ruangcoderchart");
    if ($conn->connect_errno) {
        echo die("Failed to connect to MySQL: " . $conn->connect_error);
    }
    
    $rows = array();
    $table = array();
    $table['cols'] = array(
        //membuat label untuk nama nya, tipe string
        array('label' => 'Kelas', 'type' => 'string'),
        //membuat label untuk jumlah siswa, tipe harus number untuk kalkulasi persentasenya
        array('label' => 'Jumlah siswa', 'type' => 'number')
    );
    
    //melakukan query ke database select
    $sql = $conn->query("SELECT * FROM siswa");
    //perulangan untuk menampilkan data dari database
    while($data = $sql->fetch_assoc()){
        //membuat array
        $temp = array();
        //memasukkan data pertama yaitu nama kelasnya
        $temp[] = array('v' => (string)$data['kelas']);
        //memasukkan data kedua yaitu jumlah siswanya
        $temp[] = array('v' => (int)$data['jumlah_siswa']);
        //memasukkan data diatas ke dalam array $rows
        $rows[] = array('c' => $temp);
    }
    
    //memasukkan array $rows dalam variabel $table
    $table['rows'] = $rows;
    //mengeluarkan data dengan json_encode. silahkan di echo kalau ingin menampilkan data nya
    $jsonTable = json_encode($table);
    
    ?>
    <html>
    <head>
        <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() {
    
            // membuat data chart dari json yang sudah ada di atas
            var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
    
            // Set options, bisa anda rubah
            var options = {'title':'Data siswa',
                           'width':500,
                           'height':400};
    
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
        </script>
    </head>
    <body>
        
        <!--Div yang akan menampilkan chart-->
        <div id="chart_div"></div>
        
    </body>
    </html>
    
    
    Hasilnya akan seperti gambar dibawah ini

  10. Selesai...
Perhatikan!
Kode dibawah ini merupakan untuk mengganti style terhadap chart tersebut

google.visualization.PieChart

Ini adalah untuk mengubah style atau bentu chart nya disini admin menggunakan PieChart silahkan sobat ganti sesuai keinginan sobat , gak tau namanya tenang ini admin sediakan daftarnya dibawah :
  • Line Chart.
  • Bar Chart.
  • Radar Chart.
  • Polar Area Chart.
  • Pie & Doughnut Chart.
  • Bubble Chart.
  • Scatter.
  • Horizontal Bar.

Penutup

Silahkan sobat ganti aja sesuai keinginan sobat , cukup dingati PieChart dengan keinginan sobat ya , oke mungkin tutorial Membuat Grafik Chart dengan PHP , sekian sampai sini saja , apabila bermanfaat jangan lupa di share ya , dan terimakasih sobat semua sudah berkunjung.