Utilisation de Apache eCharts en Ajax

**wd_newbie** · 23/12/2021, 13h26

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 ...

**Toufik83** · 23/12/2021, 14h42

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...

**wd_newbie** · 23/12/2021, 18h00

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);
 
}

**Toufik83** · 23/12/2021, 22h20

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?

**wd_newbie** · 24/12/2021, 10h56

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 : 203
Taille : 9,5 Ko

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

pfff ... pas simple

**Toufik83** · 24/12/2021, 15h59

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);

**wd_newbie** · 25/12/2021, 14h03

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 !

**Toufik83** · 25/12/2021, 19h27

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.

**wd_newbie** · 26/12/2021, 14h17

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();

**Toufik83** · 26/12/2021, 17h32

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.

**wd_newbie** · 28/12/2021, 08h33

Merci pour le tips , je ne savais pas

Utilisation de Apache eCharts en Ajax

AJAX

Discussions similaires

Partager

Partager