Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js.Â 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. Pada artikel kali ini saya akan membuat contoh untuk membuat tampilan grafik dengan menggunakan pustaka 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 tanda siswa. Saya membaca data mark dan memasukkannya ke fungsi Chart.js untuk membuat grafik dengan statistik tanda.
Kanvas Bagan HTML5

Unduh library Chartjs dari GitHub dan sertakan file pustaka dalam contoh Anda jika ingin mengikuti pembuatannya. Di halaman HTML, 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>Creating Dynamic Data Graph using PHP and 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 name = [];
                    var marks = [];

                    for (var i in data) {
                        name.push(data[i].student_name);
                        marks.push(data[i].marks);
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
        </script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Creating Dynamic Data Graph using PHP and Chart.js</title>

BODY {

width: 550PX;

}

#chart-container {

width: 100%;

height: auto;

}

</style>

</head>

<body>

</div>

$(document).ready(function () {

showGraph();

});

function showGraph()

{

$.post("data.php",

function (data)

{

console.log(data);

var name = [];

var marks = [];

for (var i in data) {

name.push(data[i].student_name);

marks.push(data[i].marks);

}

var chartdata = {

labels: name,

datasets: [

{

label: 'Student Marks',

backgroundColor: '#49e2ff',

borderColor: '#46d5f1',

hoverBackgroundColor: '#CCCCCC',

hoverBorderColor: '#666666',

data: marks

}

]

};

var graphTarget = $("#graphCanvas");

var barGraph = new Chart(graphTarget, {

type: 'bar',

data: chartdata

});

}

</script>

</body>

</html>

Kode PHP untuk Membaca Tanda Siswa dari Database MySQL

File data PHP.php diminta melalui AJAX untuk mengakses database untuk membaca tanda siswa. Setelah membaca catatan, ia mengembalikannya sebagai respons JSON.berikut ini scriptnya,

<?php
header('Content-Type: application/json');

require_once('db.php');

$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);
?>

<?php

header('Content-Type: application/json');

require_once('db.php');

$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";

$result = mysqli_query($conn,$sqlQuery);

$data = array();

foreach ($result as $row) {

$data[] = $row;

}

mysqli_close($conn);

echo json_encode($data);

Grafik Grafik Data Dinamis .js

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

Oke itulah tadi pembahasan saya tentang Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js semoga bermanfaat.

Membuat Grafik Data Dinamis menggunakan PHP dan Chart.js

Facebook DUMET School

Categories