showing undefined data in chart.js but showing array in inspect element

问题

I am trying to display total montly sales of a financial april to march of a year. I am using chart.js and codeigniter for this ..

I have tried query in phpmyadmin , and giving me columns there, the same array is displaying in console log but when I run chartjs. It shows me undefined. Also I have written query for displaying last years data, but it is giving me one column of 2015, dont know how it is comming there.

<<>> added edit- i tried google charts, morris charts, highcharts, charts.js, jpgraph, and few others. its not displaying bar graph :( please help me .. how to know whats going wrong in it..?

My Model --

function getRetailYtd() 
    {
    $query = $this->db->query("select
    DATE_FORMAT(created_on, '%b-%Y') AS month,
         SUM(total_amount) as total 
    FROM
        orders 
    WHERE
        dispatched_on >= CONCAT(YEAR(NOW()), '-04-01') - INTERVAL 1 YEAR
        AND dispatched_on  < CONCAT(YEAR(NOW()), '-04-01')
    GROUP BY
        DATE_FORMAT(created_on, '%m-%Y') 
    ORDER BY
        DATE_FORMAT(created_on, '%Y-%m') DESC");
        return $query->result_array();
    }

My Controller-

function retail_ytd_data(){
  $this->load->model('dashboard_model','dm');
  $data  = $this->dm->getRetailYtd();
  $this->load->view('retail_ytd');
  print_r(json_encode($data, true));

  }

My View-

<div id="chart-container">
  <canvas id="mycanvas"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src='<?php echo base_url();?>assets/global/scripts/app.js'></script>

App.js--

     $(document).ready(function(){
  $.ajax({
    url: "http://localhost/project5/flow/retail_ytd_data",
    method: "GET",
    success: function(data) {
      console.log(data);
      var month = [];
      var total = [];

     for(var i in data) {
        month.push("month " + data[i].month);
        total.push(data[i].total);
      }

      var chartdata = {
        labels: month,
        datasets : [
          {
            label: 'month total',
            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: total
          }
        ]
      };

      var ctx = $("#mycanvas");

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

Inspect element in network showing- >

[{"month":"Mar-2019","total":"2127.40"},{"month":"Feb-2019","total":"7906.00"},{"month":"Jan-2019","total":"586.89"},{"month":"Dec-2018","total":"7200.10"},{"month":"Apr-2018","total":"16234.39"},{"month":"Mar-2018","total":"13174.33"},{"month":"Dec-2015","total":"0.00"}]

来源：https://stackoverflow.com/questions/55570335/showing-undefined-data-in-chart-js-but-showing-array-in-inspect-element

标签

php

mysql

codeigniter

graph

chart.js