Graphique (buble de chart.js) avec données BDD

Bonjour.
Si je comprends bien, tu ne sais ni comment faire un appel ajax, ni comment faire une boucle de données ?
Si c'est bien le cas :

Je dois terminer ceci ce soir :D

Sans vouloir te démoraliser, tu n'y arriveras pas ou alors il faut que tu demandes à quelqu'un de ton entourage de t'aider à le faire, car nous, nous ne te donnerons pas la solution toute faite, surtout que pour ceci, il faut aussi prévoir le retour fait côté serveur, de ton code PHP par exemple.

Bonjour,
Merci beaucoup pour votre réponse !
Je n'attends absolument pas un code tout fait mais un minimum d'aide :).
Pour vous le prouver, voici ce que j'ai fais, j'espère que vous pourrez me guider un peu.
J'ai déjà bien avancé, je n'ai que quelques petites erreurs et mon graphique devrait bientôt pouvoir s'afficher je pense.
Voici ce que j'ai fais :

1) Un fichier data.php qui met au format JSON les données demandées :

<?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);

> Résultat dans la console :
https://zupimages.net/up/18/26/6jwb.png

2) Un fichier buble_db_php.js qui reçoit les données de cette page et qui créé le graphique (avec 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);
        }
    });
});

> Résultats des tableaux de données dans la console :
https://zupimages.net/up/18/26/845x.png

Mon problème ? Tout les résultat se mettent dans une seule "bulle" (bubble chart), comme si on voulait une barre finalement, sauf que c'est des bubulles. Du coup je vois mon erreur mais ne sais pas comment la corriger, je dois faire une autre boucle pour créer une bulle par résultat ? Comment procéder svp ?

> Mon graphique à bulles, sans bulles.. :'( :
https://zupimages.net/up/18/26/i936.png

Merci encore pour votre temps passer à lire tout ceci et essayer de m'aider.

UP svp ... :'(

J'arrive maintenant à afficher les points mais je n'arrive pas à faire en sorte d'afficher 1 label (un site) par points, il n'y a que les coordonnées qui fonctionnent.

Lien : https://zupimages.net/up/18/26/z9o3.png

Merci pour votre réponse @Lartak, en effet c'est exactement ce que je souhaiterai obtenir :D ! Merci je vais essayer de remettre à jour ce que j'ai fais.

J'ai mis un success au début au lieu du then[...] et :

            error: function (results) {
                console.log(results);
            }

Mon graphique s'affiche bien pour le moment, merci beaucoup :) !