Как использовать данные из базы данных для chart.js (пузырьковая диаграмма) с методом Ajax / JSON?

Я хотел бы манипулировать данными из базы данных, чтобы использовать их с моей пузырьковой диаграммой.

Вот что я сделал:

1) Файл data.php, который помещает запрошенные данные в формате JSON:

<?php
/* data.php
* Description : Retourne le score Page Speed, le score Yslow et le libelle du site depuis la BDD.*/
​
//Header > JSON
header('Content-Type: application/json');
​
//Connexion Base de donnée
include ("../inc/connexion_bd.inc.php");
​
//Requête
$query = sprintf("SELECT
libelle_site,
score_pagespeed,
score_yslow
FROM
sites
INNER JOIN ANALYSE ON ANALYSE
.id_site = sites.id_site
INNER JOIN secteur_activite ON sites.id_secteur = secteur_activite.id_secteur
INNER JOIN(
SELECT sites.id_site,
MAX(date_analyse) AS last_analyse
FROM
sites
INNER JOIN ANALYSE ON ANALYSE
.id_site = sites.id_site
GROUP BY
sites.id_site
) AS TEMP
ON
TEMP.id_site = sites.id_site AND TEMP.last_analyse = ANALYSE.date_analyse
WHERE
secteur_activite.id_secteur = 5");
​
//Execution rapide de la requête
$result = $bdd->query($query);
​
//Boucle pour chaques résultats
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
​
//Affichage du résultat
print json_encode($data);

> Результат в консоли:
https://zupimages.net/up/18/26/6jwb.png

2) Файл buble_db_php.js, который получает данные с этой страницы и создает график (Ajax):

$(document).ready(function () {
​
/**
* Appel de la page data.php pour mettre les résultats de la BDD dans un tableau
*/
$.ajax({
url: "http://127.0.0.1/projets/Multi_Evaluation_Tool/api/data.php",
type: "GET",
success: function (data) {
console.log(data);
​
var site = {
//Libelle du site
label: [],
//Score 1
x: [],
//Score 2
y: []
};
​
var len = data.length;
​
for (var i = 0; i < len; i++) {
site.label.push(data[i].libelle_site); //On place le libelle du site dans la variable site.label
site.x.push(data[i].score_pagespeed); //On place le score PageSpeed du site dans la variable site.x
site.y.push(data[i].score_yslow);      //On place le score Yslow du site dans la variable site.y
}
​
console.log(site);
​
//On récupère l'ID du graphique (canvas) situé dans la page result.php (bubble chart)
var ctx = $("#bubble-chart");
​
//Configuration des données et des options du graphique
var data = {
labels: ["Rapport entre les scores"],
datasets: [
{
label: site.label, //Libelle du site
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: site.x, //Score 1
y: site.y, //Score 2
r: 10
}]
}
]
};
​
var options = {
title: {
display: true,
text: 'Rapport PageSpeed / Yslow'
},
scales: {
yAxes:
[{
scaleLabel: {
display: true,
labelString: "Score 1"},
ticks: {
//Commencer à zéro ?
beginAtZero: true,
//Valeur maximum
max: 100
}
}],
xAxes:
[{
scaleLabel: {
display: true,
labelString: "Score 2"},
ticks: {
//Commencer à zéro ?
beginAtZero: true,
//Valeur maximum
max: 100}
}]
}
};
var chart = new Chart(ctx, {
type: "bubble",
//On appel les données et les options configurées :
data: data,
options: options
});
},
error: function (data) {
console.log(data);
}
});
});

> Результат в консоли:
https://zupimages.net/up/18/26/845x.png

Моя проблема ? Все результаты помещаются в один «пузырь», как если бы мы, наконец, хотели столбик, за исключением того, что это пузырьки. Итак, я вижу свою ошибку, но не знаю, как ее исправить, я должен сделать еще один цикл, чтобы ** создать пузырь по результату **? Как действовать ?

> Моя пузырьковая диаграмма, без бублей …
https://zupimages.net/up/18/26/i936.png

Заранее благодарю за то, что уделили время на то, чтобы прочитать все это и попытаться мне помочь.

PS: извините за мой плохой английский …