Pushing PHP Array in a JS Script

Question

This is my first post so please apologize me if it's not that good.

This is my "area_chart.charts.php" where the Array is :

$data=array();
foreach ($result as $row) {
  $chartDate = date("d/m", strtotime($row['created_at']));
  $chartResultats = $row['traitements'];
  $chart = array("chartResultats" => $chartResultats,"chartDate" => $chartDate);
  array_push($data, $chart);
}

JSON Response: https://prnt.sc/1whxygm

I'm trying to retrieve the data to use it with Chart.JS using Ajax, but the way i'm doing it doesn't work. Do someone have an idea how to do it?

The result i want is :

chartResultats: [10, 30, 20]
chartDate: ["16/10", "16/10", "16/10"]

I tried to use Ajax like this :

$.ajax({
url:"./inc/charts/area_chart.charts.php",
method:"GET",
success:function(data)  {
console.log(data);
chartResultats = data["chartResultats"];
chartDate = data["chartDate"];

// Area Chart

var ctx = document.getElementById("chartResultats");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [chartDate],
    datasets: [{
      data: [chartResulats],
    }],

and Fetch but it didn't succeded. My chart is returning me underfined.

Can you please help me or clarify me? Thanks in advance!

Please share more details. What exactly is not working with the given code? What have you tried to make it work? — Nico Haase
– Nico Haase, Commented Oct 17, 2021 at 18:13

LSerni · Accepted Answer · 2021-10-17 18:40:10Z

2

You do not say how you output the $data array to make it available to AJAX.

To output $data as JSON, you have to end your script with,

header('Content-Type: application/json;charset=UTF-8');
print json_encode($data);
exit();

You can then use your browser to open the charts.php page and inspect the JSON output.

To have the JSON you require, however, you need something like,

$data=array(
    'chartResultats' => array(),
    'chartDate' => array(),
);

foreach ($result as $row) {
  $data['chartDate'][] = date("d/m", strtotime($row['created_at']));
  $data['chartResultats'][] = $row['traitements'];
}

header('Content-Type: application/json;charset=UTF-8');
print json_encode($data);
exit();

The output should be like,

{
    "chartResultats": [10, 30, 20],
    "chartDate": ["16/10", "16/10", "16/10"]
}

In the code you posted, you create at each iteration a new dictionary with one chartResultats r and one chartDate d (let us call this { r: 1, d: 1 }):

$chart = array("chartResultats" => $chartResultats,"chartDate" => $chartDate);

and then you push this object onto data, getting an array of such objects:

array_push($data, $chart);

So your data is [ { r: 1, d: 1 }, { r: 2, d: 2 }, ... ] (an array of dictionaries) instead of being { r: [ 1, 2, ... ], d: [ 1, 2, ... ] } (a dictionary of two arrays).

Note.

I think that this way, you already formatted correctly the two arrays; there is no need to format them again in the success callback. So, try

data: {
   labels: data["chartDate"],    // Not [chartDate]
   datasets: [{
      data: data["chartResultats"],  // Not chartResultats
   }],

edited Oct 17, 2021 at 18:40

answered Oct 17, 2021 at 18:12

LSerni

57.7k10 gold badges70 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

newcomerindev Over a year ago

I already done this, i just didn't uploaded all the file, but it's already in JSON type because it gives me the response. You can see it on the screenshot! :)

LSerni Over a year ago

Sorry: in "the JSON I need" you did not include braces or quotes; in the JSON you generated and posted, the code pushes the data the wrong way, as objects inside an array. You need to add to entries in a dictionary (see the second part of this answer).

newcomerindev Over a year ago

Thanks for your answer. It now don't display undefined anymore. It's showing me dates however not the way it must be, and the 'resultats' don't display too. Screenshot: prnt.sc/1wivl38

LSerni Over a year ago

@newcomerindev hmm, I think you might have overdone the subscripting. Adding note.

Fil · Accepted Answer · 2021-10-17 18:16:56Z

0

Or you can use echo

echo json_encode($data);

answered Oct 17, 2021 at 18:16

Fil

8,91118 gold badges64 silver badges90 bronze badges

Comments

ebichuhamster · Accepted Answer · 2021-10-17 18:27:21Z

0

LSerni's answer will probably lead to solving the issue as it addresses what I see as the most important thing missing from the premise in order to solve the issue chart is returning undefined.

Beyond that I see that when you would get a response, in your $.AJAX.success function is that you are only doing a single assignment which will probably fail, because data.chartResultats and data.chartDate are undefined. Instead data is an array of objects that have both chartResultats and chartDate.

chartResultats = data["chartResultats"];
chartDate = data["chartDate"];

Therefore, one solution to produce your intended output(

chartResultats: [10, 30, 20]
chartDate: ["16/10", "16/10", "16/10"]

) is to iterate over the data. Here is one implementation:

var chartResultats = [];
var chartDate = [];
data.forEach(function(record){
  chartResultats.push(record.chartResultats);
  chartDate.push(record.chartDate);
});

answered Oct 17, 2021 at 18:27

ebichuhamster

2361 silver badge12 bronze badges

2 Comments

newcomerindev Over a year ago

Thanks for your answer. So i did it like you said, and now it doesn't display me anything. :/

ebichuhamster Over a year ago

Did you solve this issue? What doesn't display? Did you check the contents of chartResultats and chartDate ? If you also implemented LSerni's solution for your PHP code to print the JSON, then what I said was not necessary.

Collectives™ on Stack Overflow

Pushing PHP Array in a JS Script

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related