Menampilkan Data Menggunakan PHP dan Chart.js

Hasil yang akan kita penuhi dari tutorial Menampilkan Data Menggunakan PHP dan Chart.js

Dalam tutorial kali ini Saya akan sedikit memberikan sebuah contoh bagaimana menampilkan sebuah data dari database mysql kedalam bentuk chart, dimana tentu saja dalam proses penampilan data ke chart tersebut juga akan melibatkan php untuk proses pengambilan datanya.


Proses ini sebenarnya tidak jauh berbeda seperti crud php ajax dengan modal, dimana nanti ajax/javascript akan melakukan request ke sebuah file php, lalu kemudian dari php nilai data akan dirubah kedalam bentuk json untuk selanjutnya ditampilkan dalam bentuk chart.

Dalam tutorial ini kita membutuhkan dua library utama yaitu jquery dan chart.js, untuk chart.js nya sendiri disini saya menggunakan versi terbaru 2.7.2.

Untuk dapat menampilkan sebuah data dari database mysql menggunakan php dan chart.js dalam bentuk sebuah grafik,  Anda bisa mengikuti langkah – langkah berikut ini :

CREATE TABLE `tb_janda` (
  `id` int(3) NOT NULL,
  `nama_daerah` varchar(30) NOT NULL,
  `jumlah` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `tb_janda`
--

INSERT INTO `tb_janda` (`id`, `nama_daerah`, `jumlah`) VALUES
(1, 'Bandung', '5200'),
(2, 'Jakarta', '3000'),
(3, 'Yogyakarta', '3500'),
(4, 'Denpasar', '500');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_janda`
--
ALTER TABLE `tb_janda`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_janda`
--
ALTER TABLE `tb_janda`
  MODIFY `id` int(3) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

<?php
header('Content-Type: application/json');
$koneksi = mysqli_connect("localhost","root","","statistik_janda");
$sql= "SELECT id,nama_daerah,jumlah FROM tb_janda ORDER BY id";
$result = mysqli_query($koneksi,$sql);
$data = array();
foreach ($result as $row) {
 $data[] = $row;
}

mysqli_close($koneksi);

echo json_encode($data);
?>

<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Data Menggunakan PHP and Chart.js - ROOT93</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("datajanda.php",
                function (data)
                {
                    console.log(data);
                     var nama_daerah = [];
                    var jumlah = [];

                    for (var i in data) {
                        nama_daerah.push(data[i].nama_daerah);
                        jumlah.push(data[i].jumlah);
                    }

                    var chartdata = {
                        labels: nama_daerah,
                        datasets: [
                            {
                                label: 'Statistik Janda',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: jumlah
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

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

</body>
</html>

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple