Ajax won't retrieve the data from my script

Question

Hello so i try to retrieve data from a .php with Ajax to make a Doughnut chart with Chart.JS

Here is what i have (value 1, 2, 3, 4 in the legend order) :

This is my Chart.JS Script :

// Set new defawult font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

$.ajax({
url:"./inc/pie_chart.inc.php",
method:"GET",
success:function(data)  {
console.log(data);
var appelsnum =[1];
var mailsnum =[2];
var anomaliesnum =[3];
var decnum =[4];

// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Appels", "Mails", "Anomalies", "DEC"],
    datasets: [{
      data: [appelsnum, mailsnum, anomaliesnum, decnum],
      backgroundColor: ['#36b9cc', '#1cc88a', '#e74a3b', '#f6c23e'],
      hoverBackgroundColor: ['#2c9faf', '#17a673', '#a3281c', '#dbac32'],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {
      display: false
    },
    cutoutPercentage: 80,
  },
});
},
});

And this is my "pie_chart.inc.php" file (the one who Ajax is retrieving) :

<?php
header('Content-Type:text/plain');

require_once('./loggedin.inc.php');
require_once('./db.inc.php');
require_once('./settings.inc.php');

$sql="SELECT SUM(appels_res) AS totalsumappelsmonth FROM resultats ORDER BY id DESC LIMIT 14";
$result = mysqli_query($conn, $sql);
$appelsnum = mysqli_fetch_assoc($result);
$appelsnum = $appelsnum['totalsumappelsmonth'];

$sql="SELECT SUM(mails_res) AS totalsummailsmonth FROM resultats ORDER BY id DESC LIMIT 14";
$result = mysqli_query($conn, $sql);
$mailsnum = mysqli_fetch_assoc($result);
$mailsnum = $mailsnum['totalsummailsmonth'];

$sql="SELECT SUM(anomalies_res) AS totalsumanomaliesmonth FROM resultats ORDER BY id DESC LIMIT 14";
$result = mysqli_query($conn, $sql);
$anomaliesnum = mysqli_fetch_assoc($result);
$anomaliesnum = $anomaliesnum['totalsumanomaliesmonth'];

$sql="SELECT SUM(dec_res) AS totalsumdecmonth FROM resultats ORDER BY id DESC LIMIT 14";
$result = mysqli_query($conn, $sql);
$decnum = mysqli_fetch_assoc($result);
$decnum = $decnum['totalsumdecmonth'];

$data=array();
$data[0]=$appelsnum;
$data[1]=$mailsnum;
$data[2]=$anomaliesnum;
$data[3]=$decnum;


$result->close();
$conn->close();

print json_encode($data);
?>

When i'm visiting this page, there is what it's returning to me :

Theses are the good values that must be on the Charts. However, i'm getting 1, 2, 3, 4.

Do you know how to fix this?

Thanks for reading :) Greetings.

Answer 1

You are getting 1,2,3,4 because they are hardcoded. Try changing

var appelsnum =[1];
var mailsnum =[2];
var anomaliesnum =[3];
var decnum =[4];

to

var appelsnum =[data[0]];
var mailsnum =[data[1]];
var anomaliesnum =[data[2]];
var decnum =[data[3]];