Rien ne s'affiche

**dikdableu** · 16/02/2018, 15h03

Bonjour comme dit dans le titre je n'arrive pas a afficher mes graphes. j'ai réussi provisoirement à afficher mon line chart mais quand j'ai voulu changer son nom, il ne s'est plus affiché. Meme en remettant l'ancien nom, il ne s'affiche plus. j'essaye d'afficher un bar chart et un line chart. voici mon code :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
 <div class="row">
   <div class="col-lg-12"> 
			<div class="card mb-3">
                        <div class="card-header">
                            <i class="fa fa-bar-chart"></i> Nombre de TD depose pas mois
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-8">
                                    <canvas id="myAreaChart" width="100%" height="50">
					</canvas>
 
                                </div>
                                <div class="col-sm-4 text-center">
                                    <hr class="hidden-sm-up">
                                    <div class="h4 mb-0 text-primary"><?php echo $coa;?></div>
                                    <div class="small text-muted">Connexion sur 1 annee</div>
                                    <hr>
                                    <div class="h4 mb-0 text-warning"><?php echo $min;?></div>
                                    <div class="small text-muted">TD/mois Min en un an</div>
                                    <hr>
                                    <div class="h4 mb-0 text-success"><?php echo $moyenne;?></div>
                                    <div class="small text-muted">TD/mois en Moyenne en un an</div>
                                    <hr>
                                </div> 
                            </div>
                        </div>
        </div>
			</div>
 
 
 
 
 
                    <!-- Example Bar Chart Card --> 
          <input type="hidden" id="date" name="date" value="<?php echo $date;?>" />       
 
					<input type="hidden" id="janvier" name="janvier" value="<?php echo $janvier1;?>" />
					<input type="hidden" id="fevrier" name="fevrier" value="<?php echo $fevrier1;?>" />
					<input type="hidden" id="mars" name="mars" value="<?php echo $mars1;?>" />
					<input type="hidden" id="avril" name="avril" value="<?php echo $avril1;?>" />
					<input type="hidden" id="mai" name="mai" value="<?php echo $mai1;?>" />
					<input type="hidden" id="juin" name="juin" value="<?php echo $juin1;?>" />
					<input type="hidden" id="juillet" name="juillet" value="<?php echo $juillet1;?>" />
					<input type="hidden" id="aout" name="aout" value="<?php echo $aout1;?>" />
					<input type="hidden" id="septembre" name="septembre" value="<?php echo $septembre1;?>" />
					<input type="hidden" id="octobre" name="octobre" value="<?php echo $octobre1;?>" />
					<input type="hidden" id="novembre" name="novembre" value="<?php echo $novembre1;?>" />
					<input type="hidden" id="decembre" name="decembre" value="<?php echo $decembre1;?>" />
 
					<input type="hidden" id="janv" name="janv" value="<?php echo $janv1;?>" />
					<input type="hidden" id="fev" name="fev" value="<?php echo $fev1;?>" />
					<input type="hidden" id="mar" name="mar" value="<?php echo $m1;?>" />
					<input type="hidden" id="av" name="av" value="<?php echo $av1;?>" />
					<input type="hidden" id="mai" name="mai" value="<?php echo $ma1;?>" />
					<input type="hidden" id="jui" name="jui" value="<?php echo $ju1;?>" />
					<input type="hidden" id="juil" name="juil" value="<?php echo $jui1;?>" />
					<input type="hidden" id="ao" name="ao" value="<?php echo $ao1;?>" />
					<input type="hidden" id="sep" name="sep" value="<?php echo $sep1;?>" />
					<input type="hidden" id="oct" name="oct" value="<?php echo $oct1;?>" />
					<input type="hidden" id="nov" name="nov" value="<?php echo $nov1;?>" />
					<input type="hidden" id="dec" name="dec" value="<?php echo $dec1;?>" />
 
           <input type="hidden" id="ouvresjanv" name="ouvresjanv" value="<?php echo $ouvresjanv;?>" />
					<input type="hidden" id="ouvresfev" name="ouvresfev" value="<?php echo $ouvresfev;?>" />
          <input type="hidden" id="ouvresmars" name="ouvresmars" value="<?php echo $ouvresmars;?>" />
          <input type="hidden" id="ouvresavril" name="ouvresavril" value="<?php echo $ouvresavril;?>" />
          <input type="hidden" id="ouvresmai" name="ouvresmai" value="<?php echo $ouvresmai;?>" />
          <input type="hidden" id="ouvresjuin" name="ouvresjuin" value="<?php echo $ouvresjuin;?>" />
          <input type="hidden" id="ouvresjuillet" name="ouvresjuillet" value="<?php echo $ouvresjuillet;?>" />
          <input type="hidden" id="ouvresaout" name="ouvresaout" value="<?php echo $ouvresaout;?>" />
          <input type="hidden" id="ouvresseptembre" name="ouvresseptembre" value="<?php echo $ouvresseptembre;?>" />
          <input type="hidden" id="ouvresoctobre" name="ouvresoctobre" value="<?php echo $ouvresoctobre;?>" />
          <input type="hidden" id="ouvresnovembre" name="ouvresnovembre" value="<?php echo $ouvresnovembre;?>" />
          <input type="hidden" id="ouvresdecembre" name="ouvresdecembre" value="<?php echo $ouvresdecembre;?>" />  
 
 
     <div class="row">
   <div class="col-lg-12"> 
			<div class="card mb-3">
                        <div class="card-header">
                            <i class="fa fa-bar-chart"></i> Nombre de TD depose pas mois
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-8">
                                    <canvas id="myBarChart" width="100%" height="30">
					</canvas>
 
                                </div>
                                <div class="col-sm-4 text-center">
                                    <hr class="hidden-sm-up">
                                    <div class="h4 mb-0 text-primary"><?php echo $coa;?></div>
                                    <div class="small text-muted">Connexion sur 1 annee</div>
                                    <hr>
                                    <div class="h4 mb-0 text-warning"><?php echo $min;?></div>
                                    <div class="small text-muted">TD/mois Min en un an</div>
                                    <hr>
                                    <div class="h4 mb-0 text-success"><?php echo $moyenne;?></div>
                                    <div class="small text-muted">TD/mois en Moyenne en un an</div>
                                    <hr>
                                </div> 
                            </div>
                        </div>
        </div>
			</div>
 
      <script type="text/javascript">
 
var janvier=document.getElementById("janvier").value;
var fevrier=document.getElementById("fevrier").value;
var mars=document.getElementById("mars").value;
var avril=document.getElementById("avril").value;
var mai=document.getElementById("mai").value;
var juin=document.getElementById("juin").value;
var juillet=document.getElementById("juillet").value;
var aout=document.getElementById("aout").value;
var septembre=document.getElementById("septembre").value;
var octobre=document.getElementById("octobre").value;
var novembre=document.getElementById("novembre").value;
var decembre=document.getElementById("decembre").value;
 
var ouvresjanv=document.getElementById("ouvresjanv").value;
var ouvresfev=document.getElementById("ouvresfev").value;
var ouvresmars=document.getElementById("ouvresmars").value;
var ouvresavril=document.getElementById("ouvresavril").value;
var ouvresmai=document.getElementById("ouvresmai").value;
var ouvresjuin=document.getElementById("ouvresjuin").value;
var ouvresjuillet=document.getElementById("ouvresjuillet").value;
var ouvresaout=document.getElementById("ouvresaout").value;
var ouvresseptembre=document.getElementById("ouvresseptembre").value;
var ouvresoctobre=document.getElementById("ouvresoctobre").value;
var ouvresnovembre=document.getElementById("ouvresnovembre").value;
var ouvresdecembre=document.getElementById("ouvresdecembre").value;
 
 
var ctx = document.getElementById("myAreaChart");
var myAreaChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Janv","Fev","Mar","Av","Mai","Juin","Juil","Aou","Sep","Oct","Nov","Dec"],
        datasets: [{
            label: "Nombre de TD",
            lineTension: 0.3,
            backgroundColor: "rgba(2,117,216,0.2)",
            borderColor: "rgba(2,117,216,1)",
            pointRadius: 5,
            pointBackgroundColor: "rgba(2,117,216,1)",
            pointBorderColor: "rgba(255,255,255,0.8)",
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(2,117,216,1)",
            pointHitRadius: 20,
            pointBorderWidth: 2,
            data: [janvier,fevrier,mars,avril,mai,juin,juillet,aout,septembre,octobre,novembre,decembre],
        },
        {
        label: "Seuil a atteindre",
            lineTension: 0.3,
            backgroundColor: "rgba(255,255,255,0.2)",
            borderColor: "rgba(236,3,3,1)",
            pointRadius: 5,
            pointBackgroundColor: "rgba(236,3,3,1)",
            pointBorderColor: "rgba(255,255,255,0.8)",
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(236,3,3,1)",
            pointHitRadius: 20, 
            pointBorderWidth: 2,
            data: [ouvresjanv,ouvresfev,ouvresmars,ouvresavril,ouvresmai,ouvresjuin,ouvresjuillet,ouvresaout,ouvresseptembre,ouvresoctobre,ouvresnovembre,ouvresdecembre],
        
        }]
 
    },
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'date'
                },
                gridLines: {
                    display: false
                },
                ticks: {
                    maxTicksLimit: 12
                }
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 25,
                    maxTicksLimit: 12
                },
                gridLines: {
                    color: "rgba(0, 0, 0, .125)",
                }
            }],
        },
        legend: {
            display: true
        }
    }
});
 
var a=document.getElementById("janv").value;
var b=document.getElementById("fev").value;
var b=document.getElementById("mar").value;
var d=document.getElementById("av").value;
var e=document.getElementById("mai").value;
var f=document.getElementById("jui").value;
var g=document.getElementById("juil").value;
var h=document.getElementById("ao").value;
var i=document.getElementById("sept").value;
var j=document.getElementById("oct").value;
var k=document.getElementById("nov").value;
var l=document.getElementById("dec").value;
 
var DataTD = {
  label: 'Nombre de TD par mois',
  backgroundColor: "rgba(2,117,216,1)",
  borderColor: "rgba(2,117,216,1)",
  data: [a,b,c,d,e,f,g,h,i,j,k,l]
};
 
var ctx1 = document.getElementById("myBarChart").getContext("2d");
var myChart = new Chart(ctx1, {
    type: 'bar',
    data: {
        labels: ["Janv","Fev","Mar","Av","Mai","Juin","Juil","Aou","Sep","Oct","Nov","Dec"],
        datasets: [DataTD]
    }
 
});
      
</script>

En espérant que vous puissiez m'aider .

Cordialement

**headmax** · 16/02/2018, 17h00

Salut quelques erreurs et oubli de nommage sinon cela devrait marcher :
ligne 208 et 214

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
 
<div class="row">
   <div class="col-lg-12"> 
			<div class="card mb-3">
                        <div class="card-header">
                            <i class="fa fa-bar-chart"></i> Nombre de TD depose pas mois
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-8">
                                    <canvas id="myAreaChart" width="100%" height="50">
					</canvas>
 
                                </div>
                                <div class="col-sm-4 text-center">
                                    <hr class="hidden-sm-up">
                                    <div class="h4 mb-0 text-primary"><?php echo $coa;?></div>
                                    <div class="small text-muted">Connexion sur 1 annee</div>
                                    <hr>
                                    <div class="h4 mb-0 text-warning"><?php echo $min;?></div>
                                    <div class="small text-muted">TD/mois Min en un an</div>
                                    <hr>
                                    <div class="h4 mb-0 text-success"><?php echo $moyenne;?></div>
                                    <div class="small text-muted">TD/mois en Moyenne en un an</div>
                                    <hr>
                                </div> 
                            </div>
                        </div>
        </div>
			</div>
 
 
 
 
 
                    <!-- Example Bar Chart Card --> 
          <input type="hidden" id="date" name="date" value="<?php echo $date;?>" />       
 
					<input type="hidden" id="janvier" name="janvier" value="<?php echo $janvier1;?>" />
					<input type="hidden" id="fevrier" name="fevrier" value="<?php echo $fevrier1;?>" />
					<input type="hidden" id="mars" name="mars" value="<?php echo $mars1;?>" />
					<input type="hidden" id="avril" name="avril" value="<?php echo $avril1;?>" />
					<input type="hidden" id="mai" name="mai" value="<?php echo $mai1;?>" />
					<input type="hidden" id="juin" name="juin" value="<?php echo $juin1;?>" />
					<input type="hidden" id="juillet" name="juillet" value="<?php echo $juillet1;?>" />
					<input type="hidden" id="aout" name="aout" value="<?php echo $aout1;?>" />
					<input type="hidden" id="septembre" name="septembre" value="<?php echo $septembre1;?>" />
					<input type="hidden" id="octobre" name="octobre" value="<?php echo $octobre1;?>" />
					<input type="hidden" id="novembre" name="novembre" value="<?php echo $novembre1;?>" />
					<input type="hidden" id="decembre" name="decembre" value="<?php echo $decembre1;?>" />
 
					<input type="hidden" id="janv" name="janv" value="<?php echo $janv1;?>" />
					<input type="hidden" id="fev" name="fev" value="<?php echo $fev1;?>" />
					<input type="hidden" id="mar" name="mar" value="<?php echo $m1;?>" />
					<input type="hidden" id="av" name="av" value="<?php echo $av1;?>" />
					<input type="hidden" id="mai" name="mai" value="<?php echo $ma1;?>" />
					<input type="hidden" id="jui" name="jui" value="<?php echo $ju1;?>" />
					<input type="hidden" id="juil" name="juil" value="<?php echo $jui1;?>" />
					<input type="hidden" id="ao" name="ao" value="<?php echo $ao1;?>" />
					<input type="hidden" id="sept" name="sep" value="<?php echo $sep1;?>" />
 
					<input type="hidden" id="oct" name="oct" value="<?php echo $oct1;?>" />
					<input type="hidden" id="nov" name="nov" value="<?php echo $nov1;?>" />
					<input type="hidden" id="dec" name="dec" value="<?php echo $dec1;?>" />
 
           <input type="hidden" id="ouvresjanv" name="ouvresjanv" value="<?php echo $ouvresjanv;?>" />
					<input type="hidden" id="ouvresfev" name="ouvresfev" value="<?php echo $ouvresfev;?>" />
          <input type="hidden" id="ouvresmars" name="ouvresmars" value="<?php echo $ouvresmars;?>" />
          <input type="hidden" id="ouvresavril" name="ouvresavril" value="<?php echo $ouvresavril;?>" />
          <input type="hidden" id="ouvresmai" name="ouvresmai" value="<?php echo $ouvresmai;?>" />
          <input type="hidden" id="ouvresjuin" name="ouvresjuin" value="<?php echo $ouvresjuin;?>" />
          <input type="hidden" id="ouvresjuillet" name="ouvresjuillet" value="<?php echo $ouvresjuillet;?>" />
          <input type="hidden" id="ouvresaout" name="ouvresaout" value="<?php echo $ouvresaout;?>" />
          <input type="hidden" id="ouvresseptembre" name="ouvresseptembre" value="<?php echo $ouvresseptembre;?>" />
          <input type="hidden" id="ouvresoctobre" name="ouvresoctobre" value="<?php echo $ouvresoctobre;?>" />
          <input type="hidden" id="ouvresnovembre" name="ouvresnovembre" value="<?php echo $ouvresnovembre;?>" />
          <input type="hidden" id="ouvresdecembre" name="ouvresdecembre" value="<?php echo $ouvresdecembre;?>" />  
 
 
     <div class="row">
   <div class="col-lg-12"> 
			<div class="card mb-3">
                        <div class="card-header">
                            <i class="fa fa-bar-chart"></i> Nombre de TD depose pas mois
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-8">
                                    <canvas id="myBarChart" width="100%" height="30">
					</canvas>
 
                                </div>
                                <div class="col-sm-4 text-center">
                                    <hr class="hidden-sm-up">
                                    <div class="h4 mb-0 text-primary"><?php echo $coa;?></div>
                                    <div class="small text-muted">Connexion sur 1 annee</div>
                                    <hr>
                                    <div class="h4 mb-0 text-warning"><?php echo $min;?></div>
                                    <div class="small text-muted">TD/mois Min en un an</div>
                                    <hr>
                                    <div class="h4 mb-0 text-success"><?php echo $moyenne;?></div>
                                    <div class="small text-muted">TD/mois en Moyenne en un an</div>
                                    <hr>
                                </div> 
                            </div>
                        </div>
        </div>
			</div>
 
      <script type="text/javascript">
 
var janvier=document.getElementById("janvier").value;
var fevrier=document.getElementById("fevrier").value;
var mars=document.getElementById("mars").value;
var avril=document.getElementById("avril").value;
var mai=document.getElementById("mai").value;
var juin=document.getElementById("juin").value;
var juillet=document.getElementById("juillet").value;
var aout=document.getElementById("aout").value;
var septembre=document.getElementById("septembre").value;
var octobre=document.getElementById("octobre").value;
var novembre=document.getElementById("novembre").value;
var decembre=document.getElementById("decembre").value;
 
var ouvresjanv=document.getElementById("ouvresjanv").value;
var ouvresfev=document.getElementById("ouvresfev").value;
var ouvresmars=document.getElementById("ouvresmars").value;
var ouvresavril=document.getElementById("ouvresavril").value;
var ouvresmai=document.getElementById("ouvresmai").value;
var ouvresjuin=document.getElementById("ouvresjuin").value;
var ouvresjuillet=document.getElementById("ouvresjuillet").value;
var ouvresaout=document.getElementById("ouvresaout").value;
var ouvresseptembre=document.getElementById("ouvresseptembre").value;
var ouvresoctobre=document.getElementById("ouvresoctobre").value;
var ouvresnovembre=document.getElementById("ouvresnovembre").value;
var ouvresdecembre=document.getElementById("ouvresdecembre").value;
 
 
var ctx = document.getElementById("myAreaChart");
        
var myAreaChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Janv","Fev","Mar","Av","Mai","Juin","Juil","Aou","Sep","Oct","Nov","Dec"],
        datasets: [{
            label: "Nombre de TD",
            lineTension: 0.3,
            backgroundColor: "rgba(2,117,216,0.2)",
            borderColor: "rgba(2,117,216,1)",
            pointRadius: 5,
            pointBackgroundColor: "rgba(2,117,216,1)",
            pointBorderColor: "rgba(255,255,255,0.8)",
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(2,117,216,1)",
            pointHitRadius: 20,
            pointBorderWidth: 2,
            data: [janvier,fevrier,mars,avril,mai,juin,juillet,aout,septembre,octobre,novembre,decembre],
        },
        {
        label: "Seuil a atteindre",
            lineTension: 0.3,
            backgroundColor: "rgba(255,255,255,0.2)",
            borderColor: "rgba(236,3,3,1)",
            pointRadius: 5,
            pointBackgroundColor: "rgba(236,3,3,1)",
            pointBorderColor: "rgba(255,255,255,0.8)",
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(236,3,3,1)",
            pointHitRadius: 20, 
            pointBorderWidth: 2,
            data: [ouvresjanv,ouvresfev,ouvresmars,ouvresavril,ouvresmai,ouvresjuin,ouvresjuillet,ouvresaout,ouvresseptembre,ouvresoctobre,ouvresnovembre,ouvresdecembre],
        
        }]
 
    },
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'date'
                },
                gridLines: {
                    display: false
                },
                ticks: {
                    maxTicksLimit: 12
                }
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 25,
                    maxTicksLimit: 12
                },
                gridLines: {
                    color: "rgba(0, 0, 0, .125)",
                }
            }],
        },
        legend: {
            display: true
        }
    }
});
 
var a=document.getElementById("janv").value;
var b=document.getElementById("fev").value;
var c= document.getElementById("mar").value;
var d=document.getElementById("av").value;
var e=document.getElementById("mai").value;
var f=document.getElementById("jui").value;
var g=document.getElementById("juil").value;
var h=document.getElementById("ao").value;
var i=document.getElementById("sep").value;
var j=document.getElementById("oct").value;
var k=document.getElementById("nov").value;
var l=document.getElementById("dec").value;
 
var DataTD = {
  label: 'Nombre de TD par mois',
  backgroundColor: "rgba(2,117,216,1)",
  borderColor: "rgba(2,117,216,1)",
  data: [a,b,c,d,e,f,g,h,i,j,k, l]
};
 
var ctx1 = document.getElementById("myBarChart").getContext("2d");
var myChart = new Chart(ctx1, {
    type: 'bar',
    data: {
        labels: ["Janv","Fev","Mar","Av","Mai","Juin","Juil","Aou","Sep","Oct","Nov","Dec"],
        datasets: [DataTD]
    }
 
});
      
</script>

démo: https://codepen.io/headmax/pen/mXqged?editors=1000

**dikdableu** · 22/02/2018, 08h40

Merci d'avoir répondu, en rajoutant la ligne script au dessus de mon row j'ai réussi à récupérer mon line chart mais mon bar chart je n'arrive vraiment pas à l'afficher.
Le line chart j'avais déjà réussi mais jamais mon bar chart.
Que pourrait être le problème ? sachant que j'ai testé d'afficher les données que mon graph prend en paramètre et qu'elles ne sont pas vide. j'ai même testé en passant les variables manuellement mais rien. alors que le même code sur codepen.io fonctionne et affiche bien mes graph.