Как использовать данные из базы данных для 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: извините за мой плохой английский …

0

Решение

Решено, спасибо за помощь!

https://examples.lartak.fr/graphs/bulles

jQuery(document).ready(function ($) {

var getSites = function () {

var ctx = $("#bubble-chart");
$.ajax({
url: 'http://127.0.0.1/projets/Multi_Evaluation_Tool/api/data.php',
type: 'GET',
dataType: 'JSON',
success: function (results) {

var dynamicColors = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};

var sites = [];

for (var i = 0; i < results.length; i++) {

var site = {
label: results[i].libelle_site.toString(),
backgroundColor: dynamicColors(),
borderColor: "rgb(69,70,72)",
radius: 10,
borderWidth: 1,
hoverBorderWidth: 2,
hoverRadius: 5,
data: [
{
x: Number(results[i].score_pagespeed),
y: Number(results[i].score_yslow),
r: 10
}
]
};
sites.push(site);
//console.log(sites);
}
console.log(sites);

var data = {labels: ["Rapport entre les scores"], datasets: sites};
var options = {
title: {display: true, text: 'Rapport score PageSpeed / Indice'},
scales: {
yAxes:
[
{
scaleLabel: {display: true, labelString: "Scores : Page Speed"},
ticks: {beginAtZero: true, max: 100}
}
],
xAxes:
[
{
scaleLabel: {display: true, labelString: "Indice"},
ticks: {beginAtZero: true, max: 100}
}
]
}
};
new Chart(ctx, {type: "bubble", data: data, options: options});
},
error: function (results) {
console.log(results);
}
});
};
getSites();

});

0

Другие решения

Других решений пока нет …