How to implement doughnut ChartJS with CodeIgniter 3 and display data from database

问题

I've been trying to get doughnut chart to work with my CI3 application to no avail as this is my first time trying ChartJS out.

What I tried

-PHP

public function get( $data ) {
    if ( $this->input->is_ajax_request() ) {
        $this->load->library('user_utils');

        if ( $data == 'subscriptions' ) {
            $this->load->model('Fetcher', 'fetcher');

            $options = [
               // Database specific key/value pairs
            ];

            $fetch = $this->fetcher->fetch( 'where', $options );

            if ( $fetch ) {
                echo json_encode( $fetch->result_array() ); 

                // needs review
                $fetch->free_result();
            } else {
                print json_encode( 'false' );
            } 
        }
    } else {
        show_404();
    }
}

-JS

$(function() {
if ($("#subChart").length) {
    // donut chart data
    jQuery.ajax({
        type: "GET",
        url: 'dashboard/get/subscriptions',
        success: function(response) {
            console.log(response);

            var subscriptions = {
                status : []
            };
            var len = response.length;

            for (var i = 0; i < len; i++) {
                subscriptions.status.push(response[i].subscriptions);
            }
            var chart = $("#subChart");
            var fontFamily = '"Proxima Nova W01", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

            // set defaults
            Chart.defaults.global.defaultFontFamily = fontFamily;
            Chart.defaults.global.tooltips.titleFontSize = 14;
            Chart.defaults.global.tooltips.titleMarginBottom = 4;
            Chart.defaults.global.tooltips.displayColors = false;
            Chart.defaults.global.tooltips.bodyFontSize = 12;
            Chart.defaults.global.tooltips.xPadding = 10;
            Chart.defaults.global.tooltips.yPadding = 8;
            var data = {
                labels: ["Processed", "Pending", "Cancelled"],
                datasets: [
                    {
                        data: subscriptions.status,
                        backgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                        hoverBackgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                        borderWidth: 0
                    }
                ]
            };

            // -----------------
            // init donut chart
            // -----------------
            new Chart(chart, {
                type: 'doughnut',
                data: data,
                options: {
                    legend: {
                        display: false
                    },
                    animation: {
                        animateScale: true
                    },
                    cutoutPercentage: 80
                }
            });
        }
    })
}
});

I'm getting the chart data through ajax on page load, what i'm i missing?, should I set default chart data and update them after fetching thorugh ajax first? Your answer will be highly appreciated, thanks.

回答1:

After going through the ChartJS documentation, I found and utilized the .update(config) method after previously initializing my chart with dummy data. Here's what the JavaScript file looks like now:

$(function() {
if ($("#subChart").length) {
    var chart = $("#subChart");
    var fontFamily = '"Proxima Nova W01", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

    // set defaults
    Chart.defaults.global.defaultFontFamily = fontFamily;
    Chart.defaults.global.tooltips.titleFontSize = 14;
    Chart.defaults.global.tooltips.titleMarginBottom = 4;
    Chart.defaults.global.tooltips.displayColors = false;
    Chart.defaults.global.tooltips.bodyFontSize = 12;
    Chart.defaults.global.tooltips.xPadding = 10;
    Chart.defaults.global.tooltips.yPadding = 8;
    var data = {
        labels: ["Processed", "Pending", "Cancelled"],
        datasets: [
            {
                data: [1, 1, 1],
                backgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                hoverBackgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                borderWidth: 0
            }
        ]
    };

    // -----------------
    // init donut chart
    // -----------------
    var subsChart = new Chart(chart, {
        type: 'doughnut',
        data: data,
        options: {
            legend: {
                display: false
            },
            animation: {
                animateScale: true
            },
            cutoutPercentage: 80
        }
    });

    // donut chart data
    jQuery.ajax({
        type: "GET",
        url: 'dashboard/get/subscriptions',
        success: function(response) {
            console.log(response);

            var obj = JSON.parse(response);
            console.log(obj);
            console.log(obj[0].count);

            var active = obj[0].count;
            var pending = obj[1].count;
            var cancelled = obj[2].count;

            console.log('Initial value:' + subsChart.data.datasets[0].data);
            subsChart.data.datasets[0].data[0] = active;
            subsChart.data.datasets[0].data[1] = pending;
            subsChart.data.datasets[0].data[2] = cancelled;
            subsChart.update(); 

            console.log('Updated value:' + subsChart.data.datasets[0].data);
        }
    })
 }
});

and here's the output:

Many thanks to @briangottier

来源：https://stackoverflow.com/questions/47841697/how-to-implement-doughnut-chartjs-with-codeigniter-3-and-display-data-from-datab