[Solved]-ChartJS and Ajax calls-Chart.js

The main idea is that you should format your data in your model, then return JSON to the front end via json_encode. After that, you would parse the json in your ajax returns and then pass the appropriate data to the chart.

You can send JSON data from php

Try this:

Php:

public function dossier(){
    $stmt = "SELECT count(*) FROM dossier GROUP BY typedossier";
    $stmt = $this->db->prepare($stmt);
    $rows=$stmt->execute();
    $rows = $stmt->fetch(PDO::FETCH_NUM);
    exit(json_encode(array('counts' => $rows)));
}

After ajax successfully complete you need to initialize chart plugin inside success callback like below:

Ajax:

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
      if (output.counts) {
        dataDossierRepartitionType=output.counts.join();
        alert(dataDossierRepartitionType)
        initCharts(dataDossierRepartitionType);
      }
   },
   error: function () {
                 alert("Oops there is an error.");
  }});

Finally wrap chart initialization code inside callback function

Chart:

function initCharts(dataDossierRepartitionType){
    var ctx = document.getElementById("myChart");
    ctx.width = 400;
    ctx.height = 400;
    data = {
      datasets: [{
      data: [dataDossierRepartitionType, 20],
      backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      ],
      borderColor: [
      'white',
      'white',
      ],
      borderWidth: 1
      }],

      // These labels appear in the legend and in the tooltips when hovering        different arcs
      labels: [
        'Red',
        'Blue',
      ]
      };
    var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
    legend: {
    labels: {
        fontColor: "white",
        fontSize: 18
    }
    },
    maintainAspectRatio: false,
    responsive: false
    }
    });
}

it's very easy, you need to modify your php code like this:

    public function dossier(){
$stmt = "SELECT count(*) as total FROM dossier";
$stmt = $this->db->prepare($stmt);
$rows=$stmt->execute();
$number_of_rows = $rows->fetchColumn(); 

return json_encode(["total" => $number_of_rows]);

In your ajax petition you are specifying a "json" return so in your script php need's return a json.

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
               dataDossierRepartitionType=output.total;
             },
   error: function () {
                 alert("Oops there is an error.");
  }});

You should to receive a json from php with this structure

{total: rows_total}

so in your ajax response you'll receive that answer and you can get the data like this:

dataDossierRepartitionType=output.total;

Sorry for my english, hope can help you