Visualisasi Data Siswa yang Lulus dengan Google Pie Chart

Cara mengimplementasikan google pie chart untuk visualisasi data dengan CodeIgniter. Masih seperti sebelumnya kita butuh data yang akan kita tampilkan dalam bentuk chart. Data yang saya gunakan adalah data dummy dari tabel Siswa.

Model_google_pie_chart.php (MODEL)

<?php

class Model_google_pie_chart extends CI_Model
{
    public function get_data_siswa()
    {
        $query = "SELECT COUNT(*) AS total, tahun_lulus FROM tb_siswa
                    GROUP BY tahun_lulus ORDER BY tahun_lulus DESC";

        $result = $this->db->query($query)->result_array();
        return $result;
    }
}

<?php

class Model_google_pie_chart extends CI_Model

{

public function get_data_siswa()

{

$query = "SELECT COUNT(*) AS total, tahun_lulus FROM tb_siswa

GROUP BY tahun_lulus ORDER BY tahun_lulus DESC";

$result = $this->db->query($query)->result_array();

return $result;

}

Google_pie_chart.php (CONTROLLER)

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Google_pie_chart extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('Model_google_pie_chart', 'Mchart');
    }
    public function index()
    {
        $data["title"] = "Membuat Chart dengan Google Pie Chart";
        $data["dataSiswa"] = $this->Mchart->get_data_siswa();
        $this->load->view("google_pie_chart", $data);
    }
}

<?php

defined('BASEPATH') or exit('No direct script access allowed');

class Google_pie_chart extends CI_Controller

{

public function __construct()

{

parent::__construct();

$this->load->model('Model_google_pie_chart', 'Mchart');

}

public function index()

{

$data["title"] = "Membuat Chart dengan Google Pie Chart";

$data["dataSiswa"] = $this->Mchart->get_data_siswa();

$this->load->view("google_pie_chart", $data);

}

google_pie_chart.php (VIEW)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title; ?></title>

    <!-- CDN Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- JS Google Chart -->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
    <div class="container mt-3" style="width:600px">
        <h4><?= $title; ?></h4>
        <br />
        <div id="piechart" style="width: 900px; height: 500px;">

        </div>
    </div>
</body>

</html>
<script>
    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Tahun', 'Total'],
            <?php
            foreach ($dataSiswa as $siswa) {
                echo "['" . $siswa['tahun_lulus'] . "'," . $siswa['total'] . "],";
            }
            ?>
        ]);
        var options = {
            title: 'Total Siswa Yang Lulus',
            is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
</script>

<!DOCTYPE html>

<head>

</head>

<body>

<br />

</div>

</body>

</html>

google.charts.load('current', {

'packages': ['corechart']

});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Tahun', 'Total'],

<?php

foreach ($dataSiswa as $siswa) {

echo "['" . $siswa['tahun_lulus'] . "'," . $siswa['total'] . "],";

}

]);

var options = {

title: 'Total Siswa Yang Lulus',

is3D: true,

};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

}

</script>

Untuk menjalankan program silahkan ketik url berikut http://localhost/blog/google_pie_chart
Sumber : https://www.pasirganting.com

Dibaca: 7,573

Baca Juga

Rekomendasi untuk kamu