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>