如何以绘图表格式输出PHP结果

Question

I am trying to use https://plot.ly/javascript/ for plotting PHP output from a MySQL database. I need the output to be formatted like this -

var data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

This is currently the code I am using to get my output -

#PHP
$x = array();
$y = array();

while($query_result = $result->fetch_assoc()) {
    $x[] = $query_result['Animal'];
    $y[] = $query_result['Count'];
}

print_r($y);


#Javascript
$.get('../assets/php/Animals.php', function(data) {
    Plotly.newPlot('AnimalChart', data);
});

But it returns the data like this -

Array
(
    [0] => 20
    [1] => 14
    [2] => 23
)

I've also tried to json_encode like this -

$rows = array();

while($query_result = $result->fetch_assoc()) {
    $rows[] = $query_result;
}

echo json_encode($rows);

But the output is this, which does not match the format expected for the plot -

[{"Animal":"giraffes","Count":"20"},
 {"Animal":"orangutans","Count":"14"},
 {"Animal":"monkeys","Count":"23"}]

In both scenarios, Plot.ly returns an error, which is why I think it needs to be formatted like the first example.

Uncaught TypeError: Cannot read property 'selectAll' of undefined

Answer 1

Your data is not just $x you need something like:

$x = array();
$y = array();

while($query_result = $result->fetch_assoc()) {
    $x[] = $query_result['Animal'];
    $y[] = $query_result['Count'];
}

$data = [ [
   "x" => $x,
   "y" => $y,
   "type" => "bar"  
] ]; 

echo json_encode($data);

Your JS also needs to use the correct dataType:

$.get('../assets/php/Animals.php', null, function(data) {
    Plotly.newPlot('AnimalChart', data);
}, "json");