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

Par PetiteFlamme31, il y a 7 ans

Javascript

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

Le code du graphique avec ces options :

//DIAGRAMME A BULLES --> new Chart(document.getElementById("bubble-chart"), { type: 'bubble', data: { labels: "Rapport PageSpeed / Yslow", datasets: [ { label: ["Site 1"], backgroundColor: "rgba(255,221,50,0.2)", borderColor: "rgba(255,221,50,1)", data: [{ x: 0.2, //YSLOW y: 15, //PAGE SPEED r: 10 }] }, { label: ["Site 2"], backgroundColor: "rgba(60,186,159,0.2)", borderColor: "rgba(60,186,159,1)", data: [{ x: 0.9, y: 98, r: 10 }] } ] }, options: { title: { display: true, text: 'Rapport PageSpeed / Yslow' }, scales: { yAxes: [{ scaleLabel: { display: true, labelString: "Score de performance (Google)" }, ticks: { //Commencer à zéro ? beginAtZero: true, //Valeur maximum max: 100} }], xAxes: [{ scaleLabel: { display: true, labelString: "Indice de Yslow" }, ticks: { //Commencer à zéro ? beginAtZero: true, //Valeur maximum max: 1} }] } } });

Ce que j'obtient pour le moment sans les données de la BDD :

https://zupimages.net/up/18/26/hz4p.png (avec tout les sites d'une selection faite depuis la BDD)

Avec un enregistrement et un graphique plus simple j'y arrive en mettant un $row en json_encode dans le script de ma page, mais là je ne vois pas trop...

J'ai vu pas mal de méthodes avec des export en JSON puis une récupération du tableau/de la page avec une fonction AJAX, un for each en javascript ?Mais je vois absolument pas comment m'y prendre... Si jamais vous pouvez m'aider svp :). Je dois terminer ceci ce soir :D.

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

6 réponses

PetiteFlamme31, il y a 7 ans

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

Lartak, il y a 7 ans

C'est peut-être ceci que tu veux obtenir.

PetiteFlamme31, il y a 7 ans

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.

PetiteFlamme31, il y a 7 ans

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 :) !

Lartak, il y a 7 ans

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.

PetiteFlamme31, il y a 7 ans

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.