Affichage graphique avec Chart.js, mysql et formattage Json

Version imprimable

Bonjour,

J'ai besoin d'une piste pour etre capable d'afficher un graphique via Chart.js, en utilisant une requete mysql formattée en JSON.

Voici le resultat de ma requete : depuis la page :

http://localhost/seb/data_pxt_inputs_bday.php

Code:

1
2
 
[{"Date_in":"2018-09-14","Inc_in":"11","Srq_in":"53","Total":"64"},{"Date_in":"2018-09-17","Inc_in":"20","Srq_in":"55","Total":"75"},{"Date_in":"2018-09-18","Inc_in":"12","Srq_in":"52","Total":"64"},{"Date_in":"2018-09-19","Inc_in":"19","Srq_in":"43","Total":"62"},{"Date_in":"2018-09-20","Inc_in":"23","Srq_in":"54","Total":"77"},{"Date_in":"2018-09-21","Inc_in":"17","Srq_in":"58","Total":"75"},{"Date_in":"2018-09-22","Inc_in":"1","Srq_in":"0","Total":"1"},{"Date_in":"2018-09-23","Inc_in":"0","Srq_in":"2","Total":"2"},{"Date_in":"2018-09-24","Inc_in":"19","Srq_in":"61","Total":"80"},{"Date_in":"2018-09-25","Inc_in":"16","Srq_in":"45","Total":"61"},{"Date_in":"2018-09-26","Inc_in":"16","Srq_in":"48","Total":"64"},{"Date_in":"2018-09-27","Inc_in":"15","Srq_in":"53","Total":"70"},{"Date_in":"2018-09-28","Inc_in":"11","Srq_in":"49","Total":"60"},{"Date_in":"2018-09-29","Inc_in":"2","Srq_in":"2","Total":"4"},{"Date_in":"2018-09-30","Inc_in":"1","Srq_in":"0","Total":"1"},{"Date_in":"2018-10-01","Inc_in":"22","Srq_in":"80","Total":"102"},{"Date_in":"2018-10-02","Inc_in":"17","Srq_in":"49","Total":"68"},{"Date_in":"2018-10-03","Inc_in":"11","Srq_in":"47","Total":"58"},{"Date_in":"2018-10-04","Inc_in":"12","Srq_in":"61","Total":"74"},{"Date_in":"2018-10-05","Inc_in":"11","Srq_in":"33","Total":"44"},{"Date_in":"2018-10-07","Inc_in":"2","Srq_in":"0","Total":"2"},{"Date_in":"2018-10-08","Inc_in":"22","Srq_in":"54","Total":"76"},{"Date_in":"2018-10-09","Inc_in":"21","Srq_in":"50","Total":"71"},{"Date_in":"2018-10-10","Inc_in":"20","Srq_in":"43","Total":"63"},{"Date_in":"2018-10-11","Inc_in":"13","Srq_in":"52","Total":"65"},{"Date_in":"2018-10-12","Inc_in":"13","Srq_in":"51","Total":"64"},{"Date_in":"2018-10-13","Inc_in":"0","Srq_in":"1","Total":"1"}]

Voici mon bout de script, qui recupere bien les donné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
48
49
50
51
52
53
54
55
56
57
58
 
script  type="text/javascript" > 
 
 
// RECUPERATION DES DONNES JSON GENEREES PAR LA REQUETE MYSQL
var jsonData = $.ajax({
	  method: 'GET',
      url: 'data_pxt_inputs_bday.php',
      dataType: 'json',
    }).done(function (results){
	// AFFICHE DANS LA CONSOLE LE RESULTAT DU SCRIPT
	// console.log(results);
 
var tableau = {
                // Axe x => Dates
                x: [],
                // Axe y1 => incidents
                y1: [],
                 // Axe y2 => Request
                y2: [],
                 // Axe y3 => TOTAL
                y3: []
            };
var len = results.length;
 
for (var i = 0; i < len; i++) {
                tableau.x.push(results[i].Date_in);   	//On place le score Date_in => variable tableau.x
                tableau.y1.push(results[i].Inc_in);   	//On place le score Inc_in => variable tableau.y1
                tableau.y2.push(results[i].Srq_in); 	//On place le score Srq_in => variable tableau.y2
                tableau.y3.push(results[i].Total); 		//On place le score Total => variable tableau.y3
            }
// AFFICHE LE TABLEAU
console.log(tableau);
 
 
 
 
 
 
var data = {
                labels: ["tableau test"],
                datasets: [
                    {
                        label: tableau.x, //Libelle du site
                        backgroundColor: "rgba(255,221,50,0.2)",
                        borderColor: "rgba(255,221,50,1)",
                        data: [{
                                x: tableau.x, //Score 1
                                y: tableau.y1, //Score 2
                                r: 10
                            }]
                    }
                ]
            };
 
 
});
</script>

A partir de là, je seche. Je ne saisi pas comment formater mes données pour l'affichage par Chart.js.
Surement une notion sur les tableaux qui m'echappe.

Merci par avance.

Bonjour,
le format des options que tu dois passer à ta « chart » est incorrect, tu devrais avoir au minimum la structure suivante sur base de tes données :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var config = {
  type: 'line',
  data: {
    labels: tableau.x,
    datasets: [{
        label: "Inc_in",
        data: tableau.y1
      },
      {
        label: "Srq_in",
        data: tableau.y2
      },
      {
        label: "Total",
        data: tableau.y3
      }
    ]
  }
}

Bonjour,

Désolé pour le délai, j'etais en congés.

C'est mieux comme cela ?

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
 
<script>
new Chart(document.getElementById("chart"), {
  type: 'line',
  data: {
    labels: [<?php $DATESOUM44 ?>],
    datasets: [{ 
        data: [<?php $INC_IN99 ?>],
        label: "INC_IN99",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [<?php $SREQ_IN99 ?>],
        label: "SREQ_IN99",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [<?php $TOTAL99 ?>],
        label: "TOTAL99",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [<?php $SREQ_IN99 ?>],
        label: "SREQ_IN99",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [<?php $SOMM99 ?>],
        label: "SOMM99",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
          options: {
                title: {
                  display: true,
                  text: 'TITRE DU GRAPH'
                }
          }
});
</script>

Code:

1
2
3
    <script type="text/javascript">
         $.getJSON("data_pxt_inputs_bday.php", chart);
    </script>

26/11/2018, 16h21
NoSmoking

Citation:

C'est mieux comme cela ?

je crois que tu mélanges tout PHP/JS et appel via Ajax.

Il te faut traiter les données dans le success de ton appel Ajax.

1 pièce(s) jointe(s)

Bonjour,

Tu as raison !
J'avais vraiment besoin de vacances.
J'ai pu reprendre à tete reposée et j'ai abandonné l'idée de départ (obtenir mes données via ajax, car pas besoin d'etre asynchrone ici).
Ainsi j'execute une requete MySql et je mets en forme mes données de sortie, pour les réutiliser dans le script.

Ca donne cela et ça fonctionne !

Ma requête et sa mise en forme :

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
$REQ2="SELECT DISTINCT(`MoisFerme`) AS `MoisFerme`, 
	SUM((case when (`Nature` = 'Incident') then 1 else 0 end))	AS `INC_IN00`, 
	SUM((case when (`Nature` IN ($NatSrq)) then 1 else 0 end))	AS `SREQ_IN00`,
	COUNT(`mrID`) as `TOTAL00` 
	FROM `_imp_full` 
	WHERE
	`AssigneA` IN ($GrpCible)
	AND (`MoisFerme` BETWEEN '201610' AND '201809')
	AND (`Categorisation` REGEXP '$CatCible') 
	GROUP BY `MoisFerme` ASC"; 
 
if($res=mysqli_query($mysqli,$REQ2)){ while($r=$res->fetch_assoc()){ 
		$horiz[] 	= $r['MoisFerme'];
		$verti1[] 	= $r['INC_IN00'];
		$verti2[] 	= $r['SREQ_IN00'];
		$verti3[] 	= $r['TOTAL00'];
$MOY = number_format(((array_sum($verti1)+ array_sum($verti2))/(count($horiz))),1);
}}else{ echo "Erreur MySQL:".mysqli_connect_error(); } 
 
$AxeX 	= implode("','",$horiz); 
$AxeY1 	= implode("','",$verti1); 
$AxeY2 	= implode("','",$verti2); 
$AxeY3	= implode("','",$verti3); 
?>

Le Script pour le graph :

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
<script>
var grap00 = new Chart(document.getElementById("grap00").getContext('2d'), {
  type: 'bar',
  data: {
    labels: [<?php echo"'$AxeX'" ?>],
    datasets: [
				{ 
				data: [<?php echo "'$AxeY1'" ?>],
				label: "Inc_in",
				borderWidth: 1,
				backgroundColor: '#ADADFF',
				fill: true
				  }, 
			  { 
				data: [<?php echo"'$AxeY2'" ?>],
				label: "Srq_in",
				borderWidth: 1,
				backgroundColor: '#FFB5B5',
				fill: true
			  },
			    { 
				data: [<?php echo"'$AxeY3'" ?>],
				label: "Total",
				backgroundColor: '#2C2A2A',
				fill: false,
				type: 'line'
			  }
    ]
  },
	  options: {
 
			title: {
			display: true,
			fontSize: 18,
			responsive:true,
			maintainAspectRatio: false,
			text: 'Volumétries: <?php echo "$AffCat" ?>'
 
			},
 
			scales: {
					xAxes: [{
					type: 'category',
					stacked: true
						}],
					yAxes: [{
					stacked: true
						}]
					}
			}
});
 
 
</script>

J'ai contourné une problematique d'affichage de la taille du graph, qui ne respectais pas les specification de "Width" et "Height", de la maniere suivante avec du CSS et du HTML.

Pour la page HTML :

Code:

1
2
3
<DIV class="chart-container">
<canvas id="grap00" width="750" height="380"></canvas>
</DIV>

Pour le CSS :

Code:

.chart-container { width: 750px; height: 380px; }

Merci à tous pour votre aide.

Ma page filtre en fonction d'une catgorisation voulue et voir le résultat graphique :

Pièce jointe 430130