Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js

2 24

Jika kita ingin memvisualisasikan statistik, grafik adalah salah satu cara terbaik untuk representasi. Memahami data menjadi mudah dan jelas dengan penggunaan grafik. Ada berbagai pustaka grafik seperti Google Charts, Highchart, Chart.js, dan banyak lagi. Sebelumnya, kita telah membuat kode untuk menghasilkan grafik menggunakan Highchart. Mari kita membuat contoh untuk membuat tampilan grafik dengan menggunakan library Chart.js.

Membuat tampilan grafik menggunakan Chart.js sederhana dan mudah. Saya telah membuat output grafik untuk data dinamis yang diambil dari database. Saya memiliki tabel database MySQL tbl_marks yang berisi keterangan siswa. Saya membaca data mark dan memasukkannya ke fungsi Chart.js untuk membuat grafik dengan statistik keterangan.

Chart HTML5 Canvas

Unduh library Chartjs dari GitHub dan sertakan file library dalam contoh kamu. Di halaman HTML landing page, saya memiliki elemen kanvas HTML5 untuk memplot output grafik. Saat memuat halaman landing, saya mengirim permintaan AJAX ke PHP untuk membaca nilai siswa dari database. Respons JSON ini akan diuraikan dan disediakan sebagai parameter ke fungsi Chart.js untuk membuat grafik.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js</title>
<style type="text/css">
body {
    width: 550PX;
}

#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>
    <script>
        $(document).ready(function () {
            showGraph();
        });

        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var nama = [];
                    var remarks = [];

                    for (var i in data) {
                        nama.push(data[i].nama_siswa);
                        remarks.push(data[i].remarks);
                    }

                    var chartdata = {
                        labels: nama,
                        datasets: [
                            {
                                label: 'Keterangan Siswa',
                                backgroundColor: '#f049ff',
                                borderColor: '#eb46f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: remarks
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");
                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
        </script>
</body>
</html>

Kode PHP untuk Membaca Ketarangan Siswa dari Basis Data MySQL

File data PHP.php diminta melalui AJAX untuk mengakses database untuk membaca ketarangan siswa. Setelah membaca records, ia mengembalikannya sebagai respons JSON. Kode nya adalah,

<?php
header('Content-Type: application/json');
$conn = mysqli_connect("localhost","root","","infokoding_demo")
$sqlQuery = "SELECT siswa_id,nama_siswa,remarks FROM tbl_siswa ORDER BY siswa_id";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
	$data[] = $row;
}
mysqli_close($conn);
echo json_encode($data);
?>

Output Grafik Data Dinamis chart.js

Screenshot ini menunjukkan output grafik yang dihasilkan oleh library chart.js charting dengan data dinamis dari database.

 

Get real time updates directly on you device, subscribe now.

2 Comments
  1. ikhwanul says

    misi gan.. mw nnya.. untuk nampilkan format uang di grafik chart.js kayakmana gan.. kayak 100000 menjadi 100.000 itu kayak mana gan.. nambah titiknya… makasi gan

    1. Infokoding says

      Gunakan variabel seperti dibawah ini

      function addCommas(nStr)
      {
      nStr += ”;
      x = nStr.split(‘.’);
      x1 = x[0];
      x2 = x.length > 1 ? ‘.’ + x[1] : ”;
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
      x1 = x1.replace(rgx, ‘$1’ + ‘,’ + ‘$2’);
      }
      return x1 + x2;
      }

      Bisa baca dokumentasi nya di sini
      https://stackoverflow.com/questions/25880767/chart-js-number-format
      https://code.i-harness.com/en/q/2335667

Leave A Reply

Your email address will not be published.