MIF_E31211879/application/views/Home/dashboard.php

<div class="row">
    <div class="col-12">
        <div class="card card-cascade narrower z-depth-1">
            <div class="view view-cascade gradient-card-header peach-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">
                <div></div>
                <a href="" class="white-text mx-3">Grafik Peramalan</a>
                <div></div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="myTable1" class="table table-striped table-bordered"></table>
                </div>
                <!-- Dropdown for filtering per desa -->
                <div class="mb-3">
                    <select id="desaDropdown" class="select2 form-control custom-select" style="width: 100%; height:36px;" name="id_desa" required onchange="toggleDataset()">
                        <option value="">Pilih Nama Desa</option>
                        <?php foreach ($desa as $index => $value): ?>
                            <option value="<?= $index ?>"><?= $value->nama_desa ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <!-- Canvas for Line Chart -->
                <canvas id="myLineChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card card-cascade narrower z-depth-1">
            <div
                class="view view-cascade gradient-card-header peach-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">
                <div>
                </div>
                <a href="" class="white-text mx-3">Tabel Hasil Peramalan</a>
                <div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="myTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                            <th width="10%">No</th>
                                <th width="40%">Nama Desa</th>
                                <?php
                                $years = [];
                                foreach ($stunting as $data) {
                                    if (!in_array($data->tahun, $years)) {
                                        $years[] = $data->tahun;
                                    }
                                }
                                foreach ($years as $year): ?>
                                    <th><?php echo $year; ?></th>
                                <?php endforeach; ?>
                                <th width="5%">Peramalan (Tahun <?= $year + 1 ?>)</th>
                                <th width="5%">MAPE</th>
                            </tr>
                        </thead>
                        <tbody id="forecasting-data">
                        <?php $no = 1;
                            foreach ($dataPerhitungan as $data): ?>
                                <tr>
                                <td><?php echo $no++; ?></td>
                                    <td><?php echo $data['nama_desa']; ?></td>
                                    <?php foreach ($years as $year): ?>
                                        <td><?php echo $data['aktual'][$year]; ?></td>
                                    <?php endforeach; ?>
                                    <td><?php echo $data['forecast']; ?></td>
                                    <td><?php echo $data['mape']; ?>%</td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('myLineChart').getContext('2d');
    const myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [
                <?php foreach ($years as $year): ?>
                    '<?= $year ?>',
                <?php endforeach; ?>
                '<?= $year + 1 ?> (Peramalan)'
            ], // Example labels
            datasets: [
                <?php
                    $colors = [
                        'rgb(255, 191, 0)',
                        'rgb(255, 127, 80)',
                        'rgb(22, 49, 99)',
                        'rgb(64, 224, 208)',
                        'rgb(100, 149, 237)'
                    ];
                    
                    $colorIndex = 0;
                    foreach ($dataPerhitungan as $index => $data): ?>
                    {
                        label: '<?= $data['nama_desa'] ?>',
                        data: [
                            <?php foreach ($years as $year): ?>
                                <?= $data['aktual'][$year] ?>,
                            <?php endforeach; ?>
                            <?= $data['forecast'] ?>
                        ], // Example data  
                        fill: false,
                        borderColor: '<?= $colors[$colorIndex % count($colors)] ?>',
                        tension: 0.1,
                        hidden: true
                    },
                    <?php
                        $colorIndex++;
                    endforeach;
                    ?>
            ]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Tahun'
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Nilai'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    function toggleDataset() {
        const selectedIndex = document.getElementById('desaDropdown').value;
        const ci = myLineChart;
        ci.data.datasets.forEach((dataset, index) => {
            ci.getDatasetMeta(index).hidden = (selectedIndex !== '' && index != selectedIndex);
        });
        ci.update();
    }
</script>