IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Affichage graphique avec Chart.js, mysql et formattage Json


Sujet :

Bibliothèques & Frameworks

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Analyse système
    Inscrit en
    Mars 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyse système

    Informations forums :
    Inscription : Mars 2016
    Messages : 7
    Points : 6
    Points
    6
    Par défaut Affichage graphique avec Chart.js, mysql et formattage Json
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 : 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
    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
          }
        ]
      }
    }

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Analyse système
    Inscrit en
    Mars 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyse système

    Informations forums :
    Inscription : Mars 2016
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Bonjour,

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

    C'est mieux comme cela ?

    Code html : 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
     
    <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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        <script type="text/javascript">
             $.getJSON("data_pxt_inputs_bday.php", chart);
        </script>

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Analyse système
    Inscrit en
    Mars 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyse système

    Informations forums :
    Inscription : Mars 2016
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    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 php : 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
    $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 : 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
    <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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <DIV class="chart-container">
    <canvas id="grap00" width="750" height="380"></canvas>
    </DIV>

    Pour le CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    .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 :

    Nom : resultat.png
Affichages : 3063
Taille : 30,6 Ko

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] affichage Graphique avec PHP/MYSQL et GD
    Par Kitetkat dans le forum PHP & Base de données
    Réponses: 25
    Dernier message: 01/06/2017, 21h53
  2. Production des graphiques avec Chart en VB Net
    Par MN_jacques dans le forum VB.NET
    Réponses: 2
    Dernier message: 03/08/2015, 09h42
  3. [XL-2000] Graphique avec Chart space
    Par zeralium dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 15/12/2009, 15h04
  4. Problème d'affichage avec charte graphique
    Par aminos88 dans le forum Servlets/JSP
    Réponses: 6
    Dernier message: 11/06/2009, 19h21
  5. graphique avec chart
    Par moumouss dans le forum VB 6 et antérieur
    Réponses: 12
    Dernier message: 12/12/2007, 09h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo