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

AJAX Discussion :

Utilisation de Apache eCharts en Ajax


Sujet :

AJAX

  1. #1
    Membre chevronné Avatar de wd_newbie
    Homme Profil pro
    Développeur
    Inscrit en
    Mars 2007
    Messages
    760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2007
    Messages : 760
    Par défaut Utilisation de Apache eCharts en Ajax
    Bonjour,

    je suis en train d'essayer de charger des graphiques Apache eCharts avec des données provenant d'une requête AJAX

    Le résultat de ma requête AJAX est mise en forme par un json_encode() et me donne ce type de données :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    {"mois":"'4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','11.2021',","nbre":"1290,1818,1821,1825,1834,1911,1982,2071,2211,2265,2355,2417,2446,2491,2547,2599,2715,2766,3040,3155,3337,3365,3507,3549,3596,3636,3671,3798,3914,3949,4015,4123,4203,4321,4412,4494,4618,4691,4692,","total":4692}
    Deux simples suite de valeurs : 1 x pour le mois/ année et une autre pour la valeur

    Avec ces données, je voudrais pouvoir créer un graphique eChart, voila le code donnée en exemple (qui fonctionne très bien tel quel, mais je n'y intègre pas mes données) , a vrai dire c'est le "comment" qui me pose des soucis.

    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
     
          // Initialize the echarts instance based on the prepared dom
          var myChart = echarts.init(document.getElementById('main'));
     
          // Specify the configuration items and data for the chart
     
          option = {
                xAxis: {
                    data: ['test1', 'test2', 'test3']
                },
                yAxis: {},
                series: [
                    {
                    type: 'bar',
                    data: ['10.2','25.3','15.6']
                    }
                ]
    };
          // Display the chart using the configuration items and data just specified.
          myChart.setOption(option);
     
     
     
      var myChart = echarts.init(document.getElementById('main'));
            window.onresize = function() {
                myChart.resize();
            };

    Comment passer de mon json pour injecter mes valeurs dans les datas de xAxis et yAxis ?

    ça ne doit pas être compliqué ... mais je sèche ...

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Bonjour,

    Il faudrait transformer les valeurs de json.mois et json.nbre en tableaux en les séparant par la virgule, et supprimer surtout les apostrophes ' de json.mois :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    let json= 
    {"mois":"'4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','11.2021',","nbre":"1290,1818,1821,1825,1834,1911,1982,2071,2211,2265,2355,2417,2446,2491,2547,2599,2715,2766,3040,3155,3337,3365,3507,3549,3596,3636,3671,3798,3914,3949,4015,4123,4203,4321,4412,4494,4618,4691,4692,","total":4692};
    option = {
      xAxis: {
        data: json.nbre.split(",")
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: json.mois.replace(/'/g, "").split(",")
      }]
    };
    /* le reste...*/
    Remarque : il y'a une virgule en trop à la fin de json.mois et json.nbre, ce qui va rajouter une case vide dans chaque tableau...

  3. #3
    Membre chevronné Avatar de wd_newbie
    Homme Profil pro
    Développeur
    Inscrit en
    Mars 2007
    Messages
    760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2007
    Messages : 760
    Par défaut
    Merci pour ton aide ... mais je n'y arrive pas ...

    Si je mets en place les valeurs au moyen de smarty , pas de soucis ça fonctionne, les valeurs donnent :

    abscisse :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      data : ['4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019',' ...
    ordonnées :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      data : [1289,1816,1819,1823,1832,1909,1980,2069,2208,2262,2352,2414,2443,2488,2544,2596,2712,2763,3037,3152,3334,3361,

    Si je tente de les mettre en place avec le parsing des valeurs de mon json, ça me donne n'importe quoi (et j'ai supprimé la dernière ,)

    Si je fais un alert(sMois) ou sNbre, j'ai bien il me semble les même valeurs que celles que je récupère en smarty pour mes tests ...

    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
    jsonValues < ----- json repris de ma fonction AJAX
     
     
    function loadChart(jsonValues){
     
              // convert json values
              const objJSON = JSON.parse(jsonValues);
     
              sMois = objJSON.mois; 
              sNbre = objJSON.nbre; 
     
              // Initialize the echarts instance based on the prepared dom
              var myChart = echarts.init(document.getElementById('main'));
              // Specify the configuration items and data for the chart
     
              option = {
                    xAxis: {
                       data: [sMois]
                       //data : [{$fiches_mois}] // en smarty = OK 
                    },
                    yAxis: {},
                    series: [
                        {
                        type: 'bar',
                        data: [sNbre]
                        //data : [{$fiches_nbre}] // en smarty = OK 
                        }
                    ]
              };
              // Display the chart using the configuration items and data just specified.
              myChart.setOption(option);
     
    }

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Bonjour,

    Je viens d'apercevoir que les données du mois représentent aussi l'année, car '4.2018' représente le mois 4 de l'année 2018, et,'5.2018' représente le mois 5 de l'année 2018...

    Comment voulez-vous présenter les données graphiquement ? les regrouper par année ou par mois ou les deux?

  5. #5
    Membre chevronné Avatar de wd_newbie
    Homme Profil pro
    Développeur
    Inscrit en
    Mars 2007
    Messages
    760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2007
    Messages : 760
    Par défaut
    Je récupère effectivement depuis ma requête SQL les données regroupées par "mois.annee" et valeur :

    04.2010 --> 25
    05.2010 --> 32
    etc..

    Dans le code source de ma page, quand je mets mes valeur avec smarty data : [{$fiches_mois}] }, , j'ai bien ça dans le code source de ma page

    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
     
     
              option = {
                    xAxis: {
                      // data: [sMois]
                      data : ['4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','9.2021','10.2021','11.2021']
                    },
                    yAxis: {},
                    series: [
                        {
                        type: 'bar',
                        //data: [sNbre]
                       data : [1289,1816,1819,1823,1832,1909,1980,2069,2208,2262,2352,2414,2443,2488,2544,2596,2712,2763,3037,3152,3334,3361,3503,3545,3592,3632,3667,3789,3902,3937,4001,4106,4186,4303,4394,4475,4598,4682,4785,4849,4866]
                        }
                    ]
              };
    et ça fonctionne

    Ce qui me pose soucis est que, si je mets bêtement les valeurs par smarty, donc "écrites" lors de la création de la page depuis le template, ça fonctionne.

    Su je passe mes valeurs par du javascript, boum .. ça ne marche plus

    J'ai fait un: alert(sMois + "\n {$fiches_mois}" ); , donc une fois par js et une fois par les données "écrites" en smarty , ça me donne exactement le même texte ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    '4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','9.2021','10.2021','11.2021'
     
    '4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','9.2021','10.2021','11.2021'
    J'imagine que mon sNbre= objJSON.nbre; est vu comme une simple chaine, j'ai tenté de passer en tableau avec ton exemple de sNbre = objJSON.nbre.split(",");, mais sans plus de succès...

    Si je laisse les valeur de "nbre" en mode smarty (écrites lors de la construction de la page) , et que je mets les mois en mode javascript (en dynamique), j'ai bien un tableau avec une seule barre, preuve que mes dates sont bien comprise comme une seule chaine ...

    Nom : AJAX_Samrty.png
Affichages : 200
Taille : 9,5 Ko


    pfff ... pas simple

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Bonjour,

    Il faudrait seulement adapter les données correctement pour ensuite les passer au chart, voir ce lien fonctionnel que je viens de créer.

    L'idée c'est de regrouper les mois (grâce à l'option type de xAxis) de chaque année, et attribuer la valeur 0 pour ceux qui n'existent pas car les mois 1,2,3 ,7,8,9 de l'année 2018 et 9,10,12 de l'année 2021 n'existent pas.

    Le code au complet, au cas ou je supprimerai le lien jsfiddle :
    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
     
    function loadChart(jsonValues) {
      let 
        months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Séptembre", "Octobre", "Novembre", "Décembre"],
        objMois = jsonValues.mois.replace(/'/g, "").split(","),
        objNbre = jsonValues.nbre.split(','),
        years = [...new Set(objMois.map(v => v.split('.')[1]))],
        series = [],
        data = [];
      years.forEach((y, i) => {
        data[y] = [];
        months.forEach((m, i1) => {
          objMois.forEach((v, i2) => {
            let mois = v.substr(0, v.indexOf('.'));
            let annee = v.substr(v.indexOf(".") + 1, v.length - 1);
            if (!data[y][i1])
              data[y][i1] = mois == i1 + 1 &&
              annee == y ? objNbre[i2] : 0;
          });
        });
        if (series.filter(val => val.name == y).length == 0)
          series.push({
            type: 'bar',
            name: y,
            data: data[y]
          });
      });
      console.log(series)
     
      var myChart = echarts.init(document.getElementById('main'));
     
      // Specify the configuration items and data for the chart
     
      option = {
        legend: {},
        tooltip: {},
        xAxis: {
          type: "category",
          data: months,
          axisLabel: {
            rotate: 30
          }
        },
        yAxis: {},
        series: series
      };
    // Display the chart using the configuration items and data just specified.
      myChart.setOption(option);
    }
     
    const objJSON = {
      "mois": "'4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','11.2021'",
      "nbre": "1290,1818,1821,1825,1834,1911,1982,2071,2211,2265,2355,2417,2446,2491,2547,2599,2715,2766,3040,3155,3337,3365,3507,3549,3596,3636,3671,3798,3914,3949,4015,4123,4203,4321,4412,4494,4618,4691,4692",
      "total": 4692
    };	
    var myChart = echarts.init(document.getElementById('main'));
    window.onresize = function() {
      myChart.resize();
    };
    /* Exécuter la fonction */
    loadChart(objJSON);

  7. #7
    Membre chevronné Avatar de wd_newbie
    Homme Profil pro
    Développeur
    Inscrit en
    Mars 2007
    Messages
    760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2007
    Messages : 760
    Par défaut
    A vrai dire la visualisation des années une à côté des autres n'est pas ce qu'il me faut, car je veux avoir l'évolution des chiffres dans le temps.

    par contre ton exemple m'a permis de voir mes erreurs et j'ai pu créer le graphique voulu. je garde ton code d'exemple sous le coude au cas ou

    Un tout grand merci pour ton aide !


  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Bonjour,

    Tu devrais être content puisque tu as résolu le problème (je le suis aussi), mais peux-tu nous montrer le code que tu as utilisé ? (pour 2 raisons)
    • Si jamais quelqu'un d'autre aura le même souci, on le redirige vers cette discussion.
    • Pour moi, car j'enregistres des exemples d'utilisation des Plugins js.

  9. #9
    Membre chevronné Avatar de wd_newbie
    Homme Profil pro
    Développeur
    Inscrit en
    Mars 2007
    Messages
    760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2007
    Messages : 760
    Par défaut
    Alors voila ci-dessous, pas très différent de mon code de base, mais ton codes m'a permis de comprendre mes erreurs et d'ajouter quelques infos en + (comme la légende dynamique)

    ... encore merci pour ta patience !


    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
     
     
    function getEvoValues(){
     
            $.ajax({
                url      : "xxxxxxxxxxx/mapage_ajax.php",
                type     : 'GET',
                data     : "td=getEvoFiches"
                cache    : false,
                error    : function(request, error) { // Info Debuggage si erreur         
                            alert(error);
                            },
                success  : function(text) {  
                                if(text!=''){
                                    loadChart(text);                               
     
                                }
                            }       
            });     
     
    }
     
     
     
     
     
    function loadChart(jsonValues){
     
      // convert json values
       const objJSON = JSON.parse(jsonValues);
      objMois = objJSON.mois.replace(/'/g, "").split(","); 
      objNbre = objJSON.nbre.replace(/'/g, "").split(","); 
     
    // Initialize the echarts instance based on the prepared dom
    var myChart = echarts.init(document.getElementById('main'));
    // Specify the configuration items and data for the chart
     
      option = {
        legend: {},
        tooltip: {},
            xAxis: {
              data: objMois
            },
            yAxis: {},
            series: [
                {
                type: 'bar',
              data: objNbre
                }
            ]
      };
      // Display the chart using the configuration items and data just specified.
      myChart.setOption(option);
    }
     
     
     
    //-- premier chargement --
    getEvoValues();

  10. #10
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Ah d'accord, tu as passé les valeurs telles quelles.

    En passant, tu peux utilisé dataType:"json" dans les paramètres d'ajax, comme ça le retour est converti automatiquement en JSON sans avoir à utiliser JSON.parse.

    Merci.

  11. #11
    Membre chevronné Avatar de wd_newbie
    Homme Profil pro
    Développeur
    Inscrit en
    Mars 2007
    Messages
    760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2007
    Messages : 760
    Par défaut
    Merci pour le tips , je ne savais pas

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 19/01/2009, 16h00
  2. Utilisation d'apacheds !
    Par fairyyoy dans le forum Tomcat et TomEE
    Réponses: 1
    Dernier message: 22/11/2008, 20h05
  3. Utilisation avec Apache Tomcat 6.0
    Par issamglad dans le forum Glassfish et Payara
    Réponses: 5
    Dernier message: 13/11/2008, 14h20
  4. Déployer une application utiliser ASP.NET 2.0 AJAX.
    Par insane_80 dans le forum ASP.NET
    Réponses: 1
    Dernier message: 30/09/2008, 16h58
  5. Réponses: 1
    Dernier message: 21/06/2006, 14h10

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