Ajax won’t retrieve the data from my script

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) :
Ajax won't retrieve the data from my script

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 :

Ajax won't retrieve the data from my script

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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]];


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x