Membuat Chart atau Grafik dengan PHP

Membuat Chart atau Grafik dengan PHP

Membuat Chart atau Grafik dengan PHP
Membuat Chart atau Grafik dengan PHP

Hallo sobat ruangcoder, artikel kali ini tentang Tutorial Membuat Chart atau Grafik dengan PHP , nah tapi apa Sobat tau 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

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 Chart atau Grafik dengan PHP :


Dalam membuat sebuah chart atau grafik , nanti kita akan memunculkan datanya , jadi sebelum masuk kelangkah selanjutnya , sobat silahkan buat database baru , disini admin menamakan database admin dengan nama ruangcoderchart dan buat table baru dengan nama table nya siswa dan untuk kolomnya cukup 3 , kemudian untuk isi field nya sobat bisa lihat gambar dibawah ini :



Nah setelah sobat selesai membuat table nya , sobat silahkan isi table nya , diantara lain untuk id_siswa sobat kosongkan , untuk kelas silahkan sobat isi dimana terdiri dari Kelas X, Kelas XI, Kelas XII , nah untuk jumlah_siswa nya silahkan sobat isi dari kelas X terdiri dari 30 jumlah_siswa, begitu juga seterusnya , untuk jumlah sebenernya bebas , kreasikan sendiri ya , sehingga sobat mempunyai 3 data seperti gambar dibawah ini :


Kemudian setelah selesai membuat database baru dan membuat data nya , sekarang sobat buat folder baru disini admin membuat folder tersebut dengan nama latihan_chart , kemudian sobat letakkan di local server sobat (htdocs), lalu sobat drag and drop ke Text Editor sobat , seperti biasa admin menggunakan Text Editor Sublime , dan silahkan sobat buat file baru yaitu dengan nama index.php sobat silahkan simpan di dalam folder latihan_chart dan sobat ketikkan kode dibawah ini :



<?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>

Untuk penjelasan kode nya sudah ada disitu ya , jadi silahkan sobat baca saja, hasilnya seperti dibawah ini dan juga sobat perhatikan pada kode ini :



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.
Silahkan sobat ganti aja sesuai keinginan sobat , cukup dingati PieChart dengan keinginan sobat ya , oke mungkin tutorial Membuat Chart atau Grafik dengan PHP , sekian sampai sini saja , apabila bermanfaat jangan lupa di share ya , dan terimakasih sobat semua sudah berkunjung 

Anda mungkin menyukai postingan ini