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 : Sélectionner tout - Visualiser dans une fenêtre à part
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) :
> Résultats des tableaux de données dans la console :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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); } }); });
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.
Partager