[Chart.js] Graphique bubble avec données BDD

Graphique bubble avec données BDD

Bonjour,

Voila, comme indiqué dans le titre, je souhaiterai manipuler 3 données par enregistrements de ma base de données afin de l'afficher sur un graphique (en nuage de points).

Ainsi, voilà ce que je peux obtenir comme résultat de la BDD (dans un $rows en suite ou à mettre simplement dans un tableau) :
> https://zupimages.net/up/18/26/541m.png

[EDIT 25/06/2018 : 16h15] :

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 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<?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) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
$(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.

Merci d'avance pour votre aide !
A très vite.

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

si vous avez déjà les points biens placés, vous pouvez vous inspirer de cet exemple pour ajouter l'information au survol :
http://www.chartjs.org/samples/lates...om-points.html

Merci pour le lien, je viens tout juste de réussir :

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 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(), //"rgba(220, 91, 48, 0.8)",
                        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();
});

Bonne continuation :) !