Undefined values in chart.js from json

Question

i am working on showing data in a bar chart with chart.js . my json response is already ready there but chart says its undefined values.

here is jquery with json

    $(document).ready(function(){
    $.ajax({
        url: "<?php base_url();?>/charts/getsome",
        method: "GET",
        success: function(data) {
            console.log(data);
            var month = [];
            var customers = [];

            for(var i in data) {
                month.push("Customer in" + data[i].apply_month);
                customers.push(data[i].no_customers);
            }
            var chartdata = {
                labels: month,
                datasets : [
                    {
                        label: 'monthly customers',
                        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: customers
                    }
                ]
            };

            // alert(chartdata);

            var ctx = $("#mycanvas");

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

below is a snap for json response in console

And here is also a snap for chart with error

Please guide me where i am wrong. Thanks

Answer 1

You are getting response as a string. you should parse using JSON.parse(data)

success: function(data) {
            console.log(data);
            data = JSON.parse(data)
            //the rest of your code
         }