<footer class="main-footer">
    <div class="float-right d-none d-sm-block">
        <b>Version</b> 2.2.5
    </div>
    <strong>Copyright &copy; 2021 <a href="https://adminlte.io">Desa Cantik-Sroyo</a>.</strong> by TIM Desa Cantik BPS Karanganyar.
</footer>

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


<!-- jQuery -->
<script src="<?= base_url('assets/'); ?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?= base_url('assets/'); ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="<?= base_url('assets/'); ?>plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- DataTables  & Plugins -->
<script src="<?= base_url('assets/'); ?>plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/jszip/jszip.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/pdfmake/pdfmake.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/pdfmake/vfs_fonts.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- Select2 -->
<script src="<?= base_url('assets/'); ?>plugins/select2/js/select2.full.min.js"></script>
<!-- chart -->
<script src="<?= base_url('assets/'); ?>plugins/chart.js/Chart.min.js"></script>
<!-- chart -->
<script src="<?= base_url('assets/'); ?>plugins/chart.js/chartjs-plugin-labels.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="<?= base_url('assets/'); ?>plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<!-- InputMask -->
<script src="<?= base_url('assets/'); ?>plugins/moment/moment.min.js"></script>
<script src="<?= base_url('assets/'); ?>plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- date-range-picker -->
<script src="<?= base_url('assets/'); ?>plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="<?= base_url('assets/'); ?>plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="<?= base_url('assets/'); ?>plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Bootstrap Switch -->
<script src="<?= base_url('assets/'); ?>plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<!-- BS-Stepper -->
<script src="<?= base_url('assets/'); ?>plugins/bs-stepper/js/bs-stepper.min.js"></script>
<!-- dropzonejs -->
<script src="<?= base_url('assets/'); ?>plugins/dropzone/min/dropzone.min.js"></script>

<!-- AdminLTE App -->
<script src="<?= base_url('assets/'); ?>dist/js/adminlte.min.js"></script>
<script>
    $(function() {
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        var canvas = document.getElementById("canvas");
        var donutChartCanvas = $('#sumberairchart').get(0).getContext('2d')

        // if (getContext !== "undefined") {


        var donutData = {

            labels: [
                'Air Kemasan Bermerk',
                'Air Isi Ulang',
                'Leding Meteran',
                'Leding Eceran',
                'Sumur Bor/Pompa',
                'Sumur Terlindungi',
                'Sumur Tak Terlindungi',
                'Mata Air Terlindungi',
                'Mata Air Tak Terlindungi',
                'Air Sungai/Danau/Waduk',
                'Air Hujan',
                'Lainnya',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='4'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='5'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='6'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='7'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='8'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='9'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='10'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='11'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberair='12'");
                    echo $q->num_rows();
                    ?>,
                ],
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }

        var donutOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'left'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        });
        //   }
        // }
    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        var canvas = document.getElementById("canvas");
        // if (canvas != null) {
        //   if (canvas.getContext) {
        // console.log(canvas.getContext);
        var donutChartCanvas = $('#jenisatapchart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Beton/Genteng Beton',
                'Genteng Keramik',
                'Genteng Metal',
                'Genteng Tanah Liat',
                'Asbes',
                'Seng',
                'Sirap',
                'Bambu',
                'Jerami',
                'Lainnya',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='4'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='5'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='6'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='7'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='8'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='9'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisatap='10'");
                    echo $q->num_rows();
                    ?>,
                ],
                borderAlign: 'start',
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }

        var donutOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'bottom'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })
        //   }
        // }
    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        var canvas = document.getElementById("canvas");
        // if (canvas != null) {
        //   if (canvas.getContext) {
        var donutChartCanvas = $('#jenislantaichart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Marmer/Granit',
                'Keramik',
                'Parket/Vinil/Permadani',
                'Ubin/Tegel',
                'Kayu/Papan Kualitas Tinggi',
                'Semen/Bata Merah',
                'Bambu',
                'Kayu/Papan Kualitas Rendah',
                'Tanah',
                'Lainnya',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='4'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='5'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='6'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='7'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='8'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='9'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenis='10'");
                    echo $q->num_rows();
                    ?>,
                ],
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }

        var donutOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'left'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            let maxVal = 0xFFFFFF; // 16777215
            let randomNumber = Math.random() * maxVal;
            randomNumber = Math.floor(randomNumber);
            randomNumber = randomNumber.toString(16);
            let randColor = randomNumber.padStart(6, 0);
            return `#${randColor.toUpperCase()}`
        }
        var canvas = document.getElementById("canvas");

        var donutChartCanvas = $('#jenisdindingchart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Tembok',
                'Plesteran Anyaman Bambu/Kawat',
                'Kayu',
                'Anyaman Bambu',
                'Batang Kayu',
                'Bambu',
                'Lainnya',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='4'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='5'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='6'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where jenisdinding='7'");
                    echo $q->num_rows();
                    ?>
                ],
                borderColor: '#fff',
                borderWidth: 2,
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
                hoverBorderColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
                hoverBorderWidth: 4,
                // offset: 10,
                // hoverOffset: 20,
                // rotation: 10,
            }],
            // hoverOffset: 1000
        }
        var donutOptions = {

            maintainAspectRatio: false,
            responsive: true,
            // borderAlign: 'start',
            // borderColor: '#fff',
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'right',
                onhover: true,
            },

        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,

            options: donutOptions
        })

    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            let maxVal = 0xFFFFFF; // 16777215
            let randomNumber = Math.random() * maxVal;
            randomNumber = Math.floor(randomNumber);
            randomNumber = randomNumber.toString(16);
            let randColor = randomNumber.padStart(6, 0);
            return `#${randColor.toUpperCase()}`
        }
        var canvas = document.getElementById("canvas");
        // if (canvas != null) {
        //   if (canvas.getContext) {
        var donutChartCanvas = $('#sumberpenchart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Listrik PLN',
                'Listrik non PLN',
                'Bukan Listrik',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberpen='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberpen='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where sumberpen='3'");
                    echo $q->num_rows();
                    ?>
                ],
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'bottom',
                align: 'start'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })
        //   }
        // }
    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            let maxVal = 0xFFFFFF; // 16777215
            let randomNumber = Math.random() * maxVal;
            randomNumber = Math.floor(randomNumber);
            randomNumber = randomNumber.toString(16);
            let randColor = randomNumber.padStart(6, 0);
            return `#${randColor.toUpperCase()}`
        }
        var canvas = document.getElementById("canvas");

        var donutChartCanvas = $('#bahanchart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Listrik',
                'Gas > 3kg',
                'Gas 3kg',
                'Gas Kota',
                'Minyak Tanah',
                'Briket',
                'Arang',
                'Kayu Bakar',
                'Tidak Memasak di Rumah',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='4'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='5'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='6'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='7'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='8'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where bahan='9'");
                    echo $q->num_rows();
                    ?>,
                ],
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'right'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            let maxVal = 0xFFFFFF; // 16777215
            let randomNumber = Math.random() * maxVal;
            randomNumber = Math.floor(randomNumber);
            randomNumber = randomNumber.toString(16);
            let randColor = randomNumber.padStart(6, 0);
            return `#${randColor.toUpperCase()}`
        }
        var canvas = document.getElementById("canvas");


        var donutChartCanvas = $('#babchart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Sendiri',
                'Bersama',
                'Umum',
                'Tidak Ada',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where pengguna='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where pengguna='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where pengguna='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where pengguna='4'");
                    echo $q->num_rows();
                    ?>
                ],
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'top',
                align: 'start'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

    });
</script>
<script>
    $(function() {
        function getRandomColor() {
            let maxVal = 0xFFFFFF; // 16777215
            let randomNumber = Math.random() * maxVal;
            randomNumber = Math.floor(randomNumber);
            randomNumber = randomNumber.toString(16);
            let randColor = randomNumber.padStart(6, 0);
            return `#${randColor.toUpperCase()}`
        }
        var canvas = document.getElementById("canvas");

        var donutChartCanvas = $('#akhichart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Tangki',
                'SPAL',
                'Lubang Tanah',
                'Kolam',
                'Pantai',
                'Lainnya',
            ],
            datasets: [{
                data: [
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where tempatpembuangan='1'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where tempatpembuangan='2'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where tempatpembuangan='3'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where tempatpembuangan='4'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where tempatpembuangan='5'");
                    echo $q->num_rows();
                    ?>,
                    <?php
                    $q = $this->db->query("SELECT * FROM dc_ruta where tempatpembuangan='6'");
                    echo $q->num_rows();
                    ?>
                ],
                // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', getRandomColor()],
                backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()],
            }]
        }

        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                labels: {
                    render: 'percentage',
                    fontColor: ['white', 'white', 'white', 'white', 'white', 'white'],
                    precision: 0
                }
            },
            legend: {
                position: 'right'
            },
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

    });
</script>