Discussion :

[clickandgo]

Bonjour � tous,

Je n'arrive pas � ce que la variable colDepenses qui est un tableau pr�par� pour chart.js soit enregistr�e suite � mon fetch pour �tre disponible dans le reste du code, elle reste "undefined".
J'ai pourtant utilis� la m�thode async/await et je vois bien le bon tableau de valeurs si je mets un console.log dans le fetch, mais d�s que je sollicite la variable ailleurs dans le code elle devient undefined !

Que fais-je mal ?

Merci d'avance

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const filtreAnneeDepenses = (selectionAnnee) => {
let formData = new FormData();
formData.append("selectionAnnee", selectionAnnee);
 
for (let item of formData) {
console.log(item[0], item[1]);
}
let colDepenses
async function statsDepenses() {
let response = await fetch("/admin/statistiques", {
body: formData,
method: "POST",
cache: "no-cache",
headers: {
"X-Requested-With": "XMLHttpRequest"
}
})
let colDepenses = await response.json();
return colDepenses
};
statsDepenses()
}
 
// Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page
if (selectAnneesDepenses.value) {
let selectionAnnee = selectAnneesDepenses[0].value;
selectAnneesDepenses.value = selectionAnnee;
filtreAnneeDepenses(selectionAnnee);
 
}
 
selectAnneesDepenses.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
filtreAnneeDepenses(selectionAnnee);
});
// Graphique dépenses
const afficherGraphique = (colDepenses) => {
 
let graph = new Chart(graphDepenses, {
type: "line",
data: {
labels: [
"Janv",
"Févr",
"Mars",
"Avr",
"Mai",
"Juin",
"Juil",
"Août",
"Sept",
"Oct",
"Nov",
"Déc",
],
datasets: [
{
label: "Dépenses pour l'année",
data: colDepenses,
backgroundColor: [
"red",
"blue",
"green",
"red",
"blue",
"green",
"red",
"blue",
"green",
"red",
"blue",
"green",
],
borderWidth: 1
},
]
}
})
};
afficherGraphique()
	</script>

[clickandgo]

Bon, j'ai r�ussi � faire fonctionner le bazar

J'ai repris un fetch classique avec appel � fonction interne.

Il fallait faire un JSON.parse sur le tableau de data.
J'ai aussi mis en place un destroy() sur le graphique � chaque instance car cela bloquait ... Merci pour votre aide

Je partage ici le code pour qui en aurait besoin :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const selectAnneesDepenses = document.querySelector(".selectAnneesDepenses");
const graphDepenses = document.querySelector("#graphDepenses");
 
const filtreAnneeDepenses = (selectionAnnee) => {
  let formData = new FormData();
  formData.append("selectionAnnee", selectionAnnee);
 
  for (let item of formData) {
    console.log(item[0], item[1]);
  }
 
  let colDepenses;
  fetch("/admin/graphique-depenses", {
    body: formData,
    method: "POST",
    cache: "no-cache",
    headers: {
      "X-Requested-With": "XMLHttpRequest",
    },
  })
    .then((response) => response.json())
    .then((data) => {
      colDepenses = JSON.parse(data);       
      afficherGraph()     
    });
    const afficherGraph=()=>{
      let graph=Chart.getChart('graphDepenses')
      if(graph) graph.destroy()
      graph = new Chart(graphDepenses, {
        type: "bar",
        // options:{indexAxis:'y'},
        data: {
          labels: [
            "Janv",
            "Févr",
            "Mars",
            "Avr",
            "Mai",
            "Juin",
            "Juil",
            "Août",
            "Sept",
            "Oct",
            "Nov",
            "Déc",
          ],
          datasets: [
            {
              label: "Dépenses pour l'année",
              data: colDepenses,
              backgroundColor: [
                "red",
                "blue",
                "green",
                "red",
                "blue",
                "green",
                "red",
                "blue",
                "green",
                "red",
                "blue",
                "green",
              ],
              borderWidth: 1,
            },
          ],
        },
      });
    }
};
 
//Obtenir liste des dépenses après sélection de l'année
selectAnneesDepenses.addEventListener("change", (e) => {
  let selectionAnnee = e.target.value;
  filtreAnneeDepenses(selectionAnnee);
});
// Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page
if (selectAnneesDepenses.value) {
  let selectionAnnee = selectAnneesDepenses[0].value;
  selectAnneesDepenses.value = selectionAnnee;
  filtreAnneeDepenses(selectionAnnee);
}