ChartJS和Ajax调用

I would like to make charts using ChartJS and PHP ( Silex Framework )

This is my ajax call

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

This is my PHP function which i managed to call

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);
return ?????

}

And here is my chart :

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

Route.php

$app->post('/stats', function () use ($app) {
session_start();
if(isset($_POST['method']) && !empty($_POST['method'])) {
  $method = $_POST['method'];
  switch($method) {
    case 'dossierRepartitionType' :
     $dossiers=$app['dao.dossier']->dossierRepartitionType();
     break;
    }
  }
  return new ResponseSilex("$dossiers");
 });

So my AJAX call the route and then get the result of the function into $dossiers which is ouput in the Reponse, am i doing it right ?

How can i return an array with all the datas value for each count ? I struggle to catch error and to find a proper way to bind MYSQL count value to my chart

Thank you

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