показывает неопределенные данные в chart.js, но показывает массив в элементе inspect

Question

Я пытаюсь отобразить общий объем продаж финансового апреля за март года. Я использую chart.js и codeigniter для этого ..

Я попробовал запрос в phpmyadmin и дал мне столбцы там, тот же массив отображается в журнале консоли, но когда я запускаю chartjs. Это показывает меня неопределенным. Кроме того, я написал запрос для отображения данных за прошлые годы, но он дает мне один столбец 2015 года, не знаю, как это происходит там.

<< >> добавлено редактирование- я пробовал гугл чарты, диаграммы морриса, хай чарты, чарты.js, jpgraph и некоторые другие. на нем нет гистограммы :( пожалуйста, помогите мне .. как узнать, что в ней происходит не так ..?

Моя модель -

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();
    }

Мой контроллер-

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);
    }
  });
});

Проверка элемента в сети, показывает->

[{"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"}]