FloatBackOfffice/application/views/emission/view_emissionmodel.php

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-5">
        <!-- Recent Members -->

        <div class="panel panel-flat" style="background-color: #ffffff; height: 380px;">
            <div class="panel-heading">
                <h6 class="panel-title">Emission Model</h6>

            </div>
            <div class="table-responsive">
                <?= $emission_model??'' ?>
            </div>
        </div>
        <!-- /Recent Members -->
    </div>
    <div class="col-lg-7">
        <div class="panel panel-flat" style="background-color: #ffffff;">
            <div class="panel-heading" style="display: flex; justify-content: space-between;">
                <h6 class="panel-title">AVERAGE COMMUTING DISTANCE (KM)</h6>
                <div class="page-title-right text-right action">
                    <a href="/emission/create" class="btn btn-success">New emission avrg</a>
                </div>
            </div>
            <?php if (isset($emission_model_item['results'])): ?>
                <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered table-condensed"
                       style="padding:0px; background-color:lightgreen;">
                    <thead class="bg-indigo">
                    <tr>
                        <th>id</th>
                        <th>transport_mode</th>
                        <th>country</th>
                        <th>state</th>
                        <th>city</th>
                        <th>gramskm_perc</th>
                        <th>a</th>
                        <th>b</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($emission_model_item['results']->result_array() as $key => $value): ?>
                        <tr>
                            <td><?php echo $value['id']; ?></td>
                            <td><?php echo $value['transport_mode']; ?></td>
                            <td><?php echo $value['country']; ?></td>
                            <td><?php echo $value['state']; ?></td>
                            <td><?php echo $value['city']; ?></td>
                            <td><?php echo $value['gramskm_perc']; ?></td>
                            <td><?php echo $value['a']; ?></td>
                            <td><?php echo $value['b']; ?></td>
                            <td class="input-group-btn">
                                <a href="/emission/edit/<?php echo $value['id']; ?>" type="button"
                                   class="btn btn-info btn-sm btn-update legitRipple">Update
                                    <div class="legitRipple-ripple"></div>
                                </a>
                                <button type="button" class="btn btn-secondary btn-sm btn-cancel hidden legitRipple">
                                    Cancel
                                </button>
                                <button type="button" class="btn btn-danger btn-sm btn-delete legitRipple"
                                        data-id="<?php echo $value['id']; ?>">Delete
                                </button>
                            </td>
                        </tr>
                    <?php endforeach ?>
                    </tbody>
                </table>
                </div>
            <?php endif ?>

            <!--CHART-->

            <div class="row" style="padding: 20px 0;">
                <div class="col-md-6">
                    <canvas id="SG"></canvas>
                </div>
                <div class="col-md-6">
                    <canvas id="US"></canvas>
                </div>
            </div>

        </div>
        <div class="pagi" style="margin-top: 30px;">
            <?php if (isset($emission_model_item['pagination'])): ?>
                <?php echo $emission_model_item['pagination']; ?>
            <?php endif ?>
        </div>
        <!-- /Recent Members -->
    </div>

</div>
<!-- /dashboard content -->

<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var emissionCRUD = {
            init: function () {
                this.deleteEmissionManagement();
            },
            deleteEmissionManagement: function () {
                $('.btn-delete').on('click', function (e) {
                    e.preventDefault();
                    if (!confirm('Are you sure want to delete?')) {
                        return;
                    }
                    var $this = $(this),
                        id = $this.data('id');
                    $.ajax({
                        url: origin + '/emission/deleteEmissionAvrg/' + id,
                        type: 'POST'
                    })
                        .done(function (res) {
                            if (res) {
                                $this.closest('tr').remove();
                            } else {
                                alert('Delete emission average distance get errors!');
                            }
                        });
                });
            }
        };
        emissionCRUD.init();
    });
</script>
<script>
    var radar_data = <?php echo json_encode($emission_model_item['charts']) ?>;
    for (let country in radar_data) {
        let marksCanvas = document.getElementById(country);
        let chart = radar_data[country];
        let marksData = {
            labels: chart.label,
            datasets: [{
                label: "AVG person in your city (" + country + ")",
                backgroundColor: "rgba(0,0,200,0.2)",
                data: chart.data
            }]
        };
        new Chart(marksCanvas, {
            type: 'radar',
            data: marksData,
            options: {
                backgroundColor: 'red',
                scale: {
                    gridLines: {
                        circular: true
                    },
                    ticks: {
                        beginAtZero: true
                    },
                    pointLabels: {
                        fontSize: 14,
                    },
                },
                plugins: {
                    labels: {
                        render: 'percentage',
                        fontColor: function (data) {
                            var rgb = chartHexToRgb(data.dataset.backgroundColor[data.index]);
                            var threshold = 140;
                            var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
                            return luminance > threshold ? 'black' : 'white';
                        },
                        precision: 2
                    }
                }
            }
        });

    }
</script>