Graphique ne s'affiche pas

**maithary64** · 12/01/2021, 15h33

Bonjour à tous,

Navrée de vous solliciter à nouveau, mais je ne parviens pas à faire fonctionner certains de mes graphiques, et je n'ai aucun message d'erreur dans ma console. J'ai des fichiers JSON dans lesquels je vais récupérer mes données. Quelque soit le type de graphique, cela ne fonctionne pas, sauf pour les graphiques de type 'bar'. Je désespère un peu de trouver une solution, peut-être que quelqu'un pourra gentiment m'indiquer ce qui ne va pas dans mon code que voilà.

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
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
<!DOCTYPE html>
<html>
<head>
 
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>essai js</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<script src="js/jquery.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js'></script>
<link rel="stylesheet" href="css/Chart.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js'></script>
<link rel="stylesheet" href="css/monstyle.css">
 
</head>
 
<body>
 
<canvas id="mixed-chart" width="800" height="450"></canvas>
 
<script>
var texteliste=""
var donnees=[] //var donnees=new Array()
var date=[]
var creneauhoraire=[]
var catotal=[]
var frequentationcommerces=[]
  $.getJSON("json/commerces.json", function(data){
    for(var i=0;i<data.length;i++){
    if (data[i].date=="2020-08-13"){
    donnees.push([data[i].creneauhoraire,data[i].catotal,data[i].frequentationcommerces])
}      
}
donnees=donnees.sort()
console.log(donnees)
 
var contenudiv=""
  for(var i=0;i<donnees.length;i++){
  creneauhoraire.push(donnees[i][0])
  catotal.push(donnees[i][1])
  frequentationcommerces.push(donnees[i][2])
      }
 
new Chart(document.getElementById("mixed-chart"), {
    type: 'bar',
    data: {
      labels: [creneauhoraire],
      datasets: [{
          label: "Ca commerces",
          type: "line",
          borderColor: "grey",
          data: [catotal],
          fill: false
        }, {
          label: "Fréquentation des commerces",
          type: "bar",
          backgroundColor: "#d11d5d",
          data: [frequentationcommerces],
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Fréquentation et CA des commerces'
      },
      legend: { display: false }
    }
});
    })
 
</script>
<script src="js/Chart.min.js"></script>
</body>
 
</html>

Mon fichier JSON se présente ainsi :

Nom : commerces.PNG
Affichages : 98
Taille : 33,0 Ko

Et voilà ce qu'indique ma console :

Nom : live.PNG
Affichages : 96
Taille : 15,1 Ko

Merci d'avance à tous ceux qui pourront m'apporter leur aide. Pas facile de débuter dans ces langages mais merci pour votre bienveillance.

**Toufik83** · 12/01/2021, 15h55

Bonjour,

Apparemment tu n'as rien appris de la discussion précédente, dans laquelle je t'ai indiqué qu'il ne faut pas mettre des crochets autour des variables catotal et frequentationcommerces:
data: [catotal] et data: [frequentationcommerces].

Correction pour la deuxième fois :
data: frequentationcommerces et data: catotal

**maithary64** · 12/01/2021, 16h02

Bonjour,

Et merci pour votre retour. Effectivement, j'ai omis d'appliquer ce que vous m'aviez indiqué par inattention et cela fonctionne désormais.
Encore navrée, je ferai attention pour les prochains graphiques que je dois mettre en place.
Le copier-coller n'est pas toujours une bonne chose ...
Je vous souhaite une bonne fin de journée,

Graphique ne s'affiche pas [Chart.js]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager