Utilisation de Apache eCharts en Ajax

Version imprimable

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:

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:

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

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:

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

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:

  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:

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:

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

23/12/2021, 22h20
Toufik83

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?

1 pièce(s) jointe(s)

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:

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:

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

Pièce jointe 610714

pfff ... pas simple :mur:

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:

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

25/12/2021, 14h03
wd_newbie

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 !

:merci::merci:
25/12/2021, 19h27
Toufik83
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.

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:

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

26/12/2021, 17h32
Toufik83

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.
28/12/2021, 08h33
wd_newbie

Merci pour le tips , je ne savais pas