8768 sujets

Développement web côté serveur, CMS

[Résolu] Chart JS Afficher des données à l'aide de procédure stockée M

Bonjour, alors voilà j'ai créer un graphique a l'aide de la bibliothèque Chart JS
et j'aimerais afficher mes données avec des procédure stockée
mon graphique : 
<html>
	<head>
		<?php include './style/head.php'; ?>
		<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
		<script async="" src="//www.google-analytics.com/analytics.js"></script>
	</head>	
		<center>					
		<canvas id="birdsChart" width="37%"></canvas>
<script>
var birdsCanvas = document.getElementById("birdsChart");

Chart.defaults.global.defaultFontFamily = "Helvetica";
Chart.defaults.global.defaultFontSize = 14;

	var birdsData = {
	  labels: ["Spring", "Summer", "Fall", "Winter", "lo"],
	  datasets: [{
		data: [1200, 1700, 800, 200, 1500],
		backgroundColor: [
		  "rgba(205, 97, 85, 0.5)",
		  "rgba(136, 78, 160, 0.5)",
		  "rgba(202, 111, 30, 0.5)",
		  "rgba(84, 153, 199, 0.2)",
		  "rgba(241, 196, 15, 0.2)"
		],
		borderColor: "rgba(255, 255, 255, 0.8)"
	  }]
	};

	var chartOptions = {
	  startAngle: -Math.PI / 4,
	  legend: {
		position: 'right',
	
	  },
	  animation: {
		animateRotate: true
	  }
	};

	var polarAreaChart = new Chart(birdsCanvas, {
	  type: 'polarArea',
	  data: birdsData,
	  options: chartOptions
	});
</script>
</html>


Je n'est encore jamais fait ça...
Merci d'avance,
Modifié par LenaMora (03 Jun 2021 - 15:56)
Modérateur
Bonjour,

Je ne comprends pas la question et je ne dois pas être le seul.

C'est quoi le problème ?

Amicalement,
parsimonhi a écrit :
Bonjour,

Je ne comprends pas la question et je ne dois pas être le seul.

C'est quoi le problème ?

Amicalement,


Le problème est que je ne sais pas comment appeler ma procédure stockée dans le graphique
je veux juste afficher les données du résultat de la requête sql dans le graph
amicalement,
Modérateur
Bonjour,

Le résultat de ta requête SQL, ça ressemble à quoi ? C'est un tableau ? Il y a quoi dedans ?

Amicalement,
Modifié par parsimonhi (11 Mar 2021 - 07:10)
oui, alors en effet j'ai une table activité et une table Theme
je souhaite compter combien l'utilisateur a eu de theme (un count de chaque theme) pour toutes ces activités.
Exemple : il a fait 18 activités, 5 avec tel theme, 5 avec tel theme, 8 avec tel theme ect ....
et ça pour tous les theme qu'il à déjà utiliser.

SELECT COUNT(activite.IdSujet) , LibelleTheme 
		        from activite,theme 
				where theme.codetheme=(select codetheme from sujet where idsujet=activite.idsujet ) 
				AND dateDebut BETWEEN :dtDeb 
				AND :dtFin 		
				group by libelleTheme


J'espère avoir été clair pour vous,
Merci par avance,
Modérateur
Bonjour,

Je vais supposer que tu as réussi à faire un tableau php qui contient la liste des thèmes de l'utilisateur (c'est le tableau $labels), et un autre tableau où tu mets le nombre des activités pour chaque thème (c'est le tableau $data).

Pour simplifier dans l'exemple ci-dessous, je code en dur les données pour ces deux tableaux (il faudra que tu fasses le php qui extrait les données de ta base et construit ces tableaux php).

Je suppose aussi que tu connais le nombre de thèmes (j'ai supposé ici 5 thèmes), et j'ai donc défini a priori 5 couleurs (une pour chaque thème) que j'ai mis dans le tableau php $backgroundColor.

Alors la page ci-dessous devrait fonctionner :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script async="" src="//www.google-analytics.com/analytics.js"></script>
</head>	
<body>					
<canvas id="birdsChart" width="37%"></canvas>
<script>
<?php
$backgroundColor=[
	"rgba(204, 0, 0, 0.5)",
	"rgba(0, 204, 0, 0.5)",
	"rgba(0, 0, 204, 0.5)",
	"rgba(204, 204, 0, 0.5)",
	"rgba(204, 0, 204, 0.5)"
];
$labels=["travail","entretien","sport","étude","culture"];
$data=[5,7,2,9,4];
?>
var birdsCanvas = document.getElementById("birdsChart");

Chart.defaults.global.defaultFontFamily = "Helvetica";
Chart.defaults.global.defaultFontSize = 14;

var birdsData = {
	labels: <?php echo json_encode($labels);?>,
	datasets: [{
		data: <?php echo json_encode($data);?>,
		backgroundColor: <?php echo json_encode($backgroundColor);?>,
		borderColor: "rgba(204, 204, 204, 0.8)"
	}]
};

var chartOptions = {
	startAngle: -Math.PI / 4,
	legend: {
		position: 'right',
	},
	animation: {
		animateRotate: true
	}
};

var polarAreaChart = new Chart(birdsCanvas, {
	type: 'polarArea',
	data: birdsData,
	options: chartOptions
});
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (11 Mar 2021 - 09:48)
Meilleure solution
parsimonhi a écrit :
Bonjour,

Je vais supposer que tu as réussi à faire un tableau php qui contient la liste des thèmes de l'utilisateur (c'est le tableau $labels), et un autre tableau où tu mets le nombre des activités pour chaque thème (c'est le tableau $data).

Pour simplifier dans l'exemple ci-dessous, je code en dur les données pour ces deux tableaux (il faudra que tu fasses le php qui extrait les données de ta base et construit ces tableaux php).

Je suppose aussi que tu connais le nombre de thèmes (j'ai supposé ici 5 thèmes), et j'ai donc défini a priori 5 couleurs (une pour chaque thème) que j'ai mis dans le tableau php $backgroundColor.

Alors la page ci-dessous devrait fonctionner :
&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"&gt;&lt;/script&gt;
&lt;script async="" src="//www.google-analytics.com/analytics.js"&gt;&lt;/script&gt;
&lt;/head&gt;	
&lt;body&gt;					
&lt;canvas id="birdsChart" width="37%"&gt;&lt;/canvas&gt;
&lt;script&gt;
&lt;?php
$backgroundColor=[
	"rgba(204, 0, 0, 0.5)",
	"rgba(0, 204, 0, 0.5)",
	"rgba(0, 0, 204, 0.5)",
	"rgba(204, 204, 0, 0.5)",
	"rgba(204, 0, 204, 0.5)"
];
$labels=["travail","entretien","sport","étude","culture"];
$data=[5,7,2,9,4];
?&gt;
var birdsCanvas = document.getElementById("birdsChart");

Chart.defaults.global.defaultFontFamily = "Helvetica";
Chart.defaults.global.defaultFontSize = 14;

var birdsData = {
	labels: &lt;?php echo json_encode($labels);?&gt;,
	datasets: [{
		data: &lt;?php echo json_encode($data);?&gt;,
		backgroundColor: &lt;?php echo json_encode($backgroundColor);?&gt;,
		borderColor: "rgba(204, 204, 204, 0.8)"
	}]
};

var chartOptions = {
	startAngle: -Math.PI / 4,
	legend: {
		position: 'right',
	},
	animation: {
		animateRotate: true
	}
};

var polarAreaChart = new Chart(birdsCanvas, {
	type: 'polarArea',
	data: birdsData,
	options: chartOptions
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Amicalement,


Merci infiniment pour votre réponse
pour le $data je vais afficher le résultat de ma requete sql on est d'accord,
cependant comment je peux appeler ma procédure stockée et justement tout stockée dans ma variable,
amicalement
Modérateur
Bonjour,

Je ne comprends pas ce que tu veux dire par "procédure stockée" ? C'est quoi ? C'est en quel langage ? Ça fait quoi ?

Et qu'est-ce que tu appelles "ma variable" ? Elle a quel nom ? Elle est déclarée où ?

Amicalement,
Sujet clos
Aller à