Chart.js没有显示数据

Question

My chart is not showing complete data. At the bottom is multiple names but it says "undefined" and at the side it starts at -1.0 then goes up to 1.0. I can get the item_name and the remaining in my console and it is complete it's just not showing in my chart. Below are my codes:

MODEL

public function get_charts(){
                $str="select
                    I.item_name,
                    I.stocked,
                    ifnull(dispensed,0) as dispensed,
                    COALESCE (I.Stocked, 0) - COALESCE (S.dispensed, 0) AS remaining
                    FROM
                        (
                            SELECT
                                item_name AS 'item_name',
                                SUM(amount) AS 'stocked'
                            FROM
                                com_inv
                            GROUP BY
                                item_name
                        ) I
                    LEFT JOIN (
                        SELECT
                            item_name,
                            order_status,
                            SUM(amount) AS dispensed
                        FROM
                            sls_ordrs
                        WHERE
                            order_status = 'received'
                        GROUP BY
                            item_name
                    ) S ON I.item_name = S.item_name;";

                    $query=$this->db->query($str);

                    return $query->result();
                }

CONTROLLER

public function get_charts(){
        $result=$this->commissary_model->get_charts();
        print json_encode($result);
    }

VIEW

var urlCharts="<?php echo site_url('commissary/get_charts');
                    ?>";
        $.ajax({
            url:urlCharts,
            method:"GET",
            success:function(data){
                console.log(data);
                var item=[];
                var remaining=[];

                for(var i in data){
                    item.push(data[i].item_name);
                    remaining.push(data[i].remaining);
                }

                var chartdata={
                    labels: item,
                    datasets:[
                        {
                            label:'Remaining Items',
                            backgroundcolor:'rgba(200,200,200,0.75)',
                            borderColor:'rgba(200,200,200,0.75)',
                            hoverBackgroundColor:'rgba(200,200,200,1)',
                            hoverBorderColor:'rgba(200,200,200,1)',
                            data:remaining
                        }
                    ]
                };

                var ctx=$("#mycanvas");
                var barGraph = new Chart(ctx, {
                    type: 'bar',
                    data: chartdata
                });
            },
            error:function(data){
                console.log("data");
            }
        });

SAMPLE OF CONSOLE.LOG

[{"item_name":"aaa","stocked":"23456","dispensed":"0","remaining":"23456"},{"item_name":"accumsan Curae","stocked":"889.74","dispensed":"123.5","remaining":"766.24"},{"item_name":"ad bibendum Donec","stocked":"659.12","dispensed":"0","remaining":"659.12"},{"item_name":"Aenean cursus","stocked":"169.63","dispensed":"0","remaining":"169.63"},{"item_name":"Aenean magna","stocked":"272.11","dispensed":"0","remaining":"272.11"}, ....etc...

Can you please tell me where I am getting it wrong. Thank you.

Answer 1

The for loop does not look correct

for(var i = 0; i < data.length; i++) {
    item.push(data[i].item_name);
    remaining.push(data[i].remaining);
}