Plusieurs graphes sur la même page

**dikdableu** · 25/06/2018, 15h10

Bonjour,

Je souhaite afficher un graphe pour un nombre inconnu de de section dans ma page. voici mon code :

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
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
 
var nb=document.getElementById("nb").value;
var i=0;
 
for(i=0;i<nb;i++){
 
var mois = new Array();;
 
mois["janvier" + i]=document.getElementById("janvier"+i).value;
mois["fevrier" + i]=document.getElementById("fevrier"+i).value;
mois["mars" + i]=document.getElementById("mars"+i).value;
mois["avril" + i] =document.getElementById("avril"+i).value;
mois["mai" + i]=document.getElementById("mai"+i).value;
mois["juin" + i]=document.getElementById("juin"+i).value;
mois["juillet" + i]=document.getElementById("juillet"+i).value;
mois["aout" + i]=document.getElementById("aout"+i).value;
mois["septembre" + i]=document.getElementById("septembre"+i).value;
mois["octobre" + i]=document.getElementById("octobre"+i).value;
mois["novembre" + i]=document.getElementById("novembre"+i).value;
mois["decembre" + i]=document.getElementById("decembre"+i).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 j;
 
for(j = 0; j < nb; j++){
 
var graph = new Array();
var chart = new Array();
 
var chart["chart"+j] = document.getElementById("myAreaChart"+j);
 
graph["myAreaChart"+j] = new Chart(chart["chart"+j], {
    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: [mois["janvier"+j],mois["fevrier"+j],mois["mars"+j],mois["avril"+j],mois["mai"+j],mois["juin"+j],mois["juillet"+j],mois["aout"+j],mois["septembre"+j],mois["octobre"+j],mois["novembre"+j],mois["decembre"+j]]
        },
        {
        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
        }
    }
});
 
}

Comme vous le voyez j'ai fais un tableau contenant plusieurs graphe mais la console me met ''unexpected token: '[' "

Pouvez vous m'aider ?

**psychadelic** · 25/06/2018, 17h19

Envoyé par dikdableu

Comme vous le voyez j'ai fais un tableau contenant plusieurs graphe mais la console me met ''unexpected token: '[' "

Pouvez vous m'aider ?

oui, c'est sur la ligne 472981 tu à un crochet en trop

**dikdableu** · 25/06/2018, 23h21

Quel ligne ?

**danielhagnoul** · 25/06/2018, 23h51

var chart = new Array(); chart est un Array, l'index de celui-ci va de 0 à n indéterminé.

var chart["chart" + j] = document.getElementById("myAreaChart" + j); pas de var, chart est déjà un Array !

L'index est un nombre de 0 à n, le String "chart" + j n'a pas de sens !

**dikdableu** · 26/06/2018, 09h42

D'accord je vois, c'est pas comme dans le C où on peut nommer une case de mon tableau comme je veux ?

J'ai donc créé un objet en le objet litéral en le définissant comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var graph = {};
var chart = {};

mais maintenant il me met que le chart n'est pas définit

**NoSmoking** · 26/06/2018, 13h13

Bonjour,
si je comprends bien maintenant tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
for(j = 0; j < nb; j++){
  var chart = {}
  var chart["chart"+j] = document.getElementById("myAreaChart"+j);
  // la suite

donc tu as toujours un var en trop et tu redéfinies à chaque boucle un nouvel objet chart !?!

**dikdableu** · 26/06/2018, 13h16

voici le code maintenant. J'ai fais quelques tests aussi :

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
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
 
 
var nb=document.getElementById("nb").value;
var i=0;
var mois = {};
for(i=0;i<nb;i++){
 
 
 
mois["janvier" + i]=document.getElementById("janvier"+i).value;
mois["fevrier" + i]=document.getElementById("fevrier"+i).value;
mois["mars" + i]=document.getElementById("mars"+i).value;
mois["avril" + i] =document.getElementById("avril"+i).value;
mois["mai" + i]=document.getElementById("mai"+i).value;
mois["juin" + i]=document.getElementById("juin"+i).value;
mois["juillet" + i]=document.getElementById("juillet"+i).value;
mois["aout" + i]=document.getElementById("aout"+i).value;
mois["septembre" + i]=document.getElementById("septembre"+i).value;
mois["octobre" + i]=document.getElementById("octobre"+i).value;
mois["novembre" + i]=document.getElementById("novembre"+i).value;
mois["decembre" + i]=document.getElementById("decembre"+i).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 graph = {};
var chart = {};
 
for(var j = 0; j < nb; j++){
 
var name = "chart" + j;
var area = "myAreaChart"+j;
 
chart[name] = document.getElementById("myAreaChart"+j);
 
graph[area] = new Chart(chart[name], {
    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: [mois["janvier"+j],mois["fevrier"+j],mois["mars"+j],mois["avril"+j],mois["mai"+j],mois["juin"+j],mois["juillet"+j],mois["aout"+j],mois["septembre"+j],mois["octobre"+j],mois["novembre"+j],mois["decembre"+j]]
        },
        {
        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
        }
    }
});
 
}

**psychadelic** · 26/06/2018, 13h56

Envoyé par dikdableu

Comme vous le voyez j'ai fais un tableau contenant plusieurs graphe mais la console me met ''unexpected token: '[' "

Envoyé par dikdableu

Quel ligne ?

ben justement tu ne l'a pas indiqué

les messages d'erreurs indiquent un numéro de ligne ou ils se sont produit; ce qui permet de remonter le déroulé de ce que l'interpréteur JS à du affronter avec ton code; on appelle cela du debugging

**dikdableu** · 26/06/2018, 15h07

En changeant le code comme ci dessus l'erreur change et indique chart is not defined à la ligne 51:1

**psychadelic** · 26/06/2018, 17h30

alors c'est sans doute ton utilisation de la méthode new qui pose probleme

graph[area] = new Chart(chart[name], {....

https://developer.mozilla.org/en-US/.../Operators/new

j'ai l'impression que tu la confond avec la méthode assign
https://developer.mozilla.org/en-US/.../Object/assign

**dikdableu** · 27/06/2018, 09h28

Le new est indiqué dans la documentation de chart.js c'est pour ça. Avant j'arrivais à afficher un graphique comme ça mais là j'essai d'afficher plusieurs graphique d'où le "chart"+j

https://www.chartjs.org/docs/latest/

**psychadelic** · 27/06/2018, 13h27

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
for(j = 0; j < nb; j++){
 
var graph = new Array();
var chart = new Array();
 
var chart["chart"+j] = document.getElementById("myAreaChart"+j);

en fait dans ton code tu recrée à chaque itération tes 2 tableaux ( graph et chart ) que tu perds et écrase à l'itération suivante....
( lignes 41 à 46) , alors leur utilisation par la suite va pas marcher...

**dikdableu** · 27/06/2018, 13h51

Envoyé par dikdableu

voici le code maintenant. J'ai fais quelques tests aussi :

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
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
 
 
var nb=document.getElementById("nb").value;
var i=0;
var mois = {};
for(i=0;i<nb;i++){
 
 
 
mois["janvier" + i]=document.getElementById("janvier"+i).value;
mois["fevrier" + i]=document.getElementById("fevrier"+i).value;
mois["mars" + i]=document.getElementById("mars"+i).value;
mois["avril" + i] =document.getElementById("avril"+i).value;
mois["mai" + i]=document.getElementById("mai"+i).value;
mois["juin" + i]=document.getElementById("juin"+i).value;
mois["juillet" + i]=document.getElementById("juillet"+i).value;
mois["aout" + i]=document.getElementById("aout"+i).value;
mois["septembre" + i]=document.getElementById("septembre"+i).value;
mois["octobre" + i]=document.getElementById("octobre"+i).value;
mois["novembre" + i]=document.getElementById("novembre"+i).value;
mois["decembre" + i]=document.getElementById("decembre"+i).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 graph = {};
var chart = {};
 
for(var j = 0; j < nb; j++){
 
var name = "chart" + j;
var area = "myAreaChart"+j;
 
chart[name] = document.getElementById("myAreaChart"+j);
 
graph[area] = new Chart(chart[name], {
    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: [mois["janvier"+j],mois["fevrier"+j],mois["mars"+j],mois["avril"+j],mois["mai"+j],mois["juin"+j],mois["juillet"+j],mois["aout"+j],mois["septembre"+j],mois["octobre"+j],mois["novembre"+j],mois["decembre"+j]]
        },
        {
        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
        }
    }
});
 
}

Avec le code ci-dessus j'ai sortie la création des tableaux de la boucle. Normalement le tableau n'est plus créé plusieurs fois

**psychadelic** · 27/06/2018, 14h39

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
for(var j = 0; j < nb; j++){
 
  let name = "chart" + j;
  let area = "myAreaChart"+j;

mais bon, c'est un détail.

et sinon, mis à part le fait que tu à un peu corrigé ton code, est-que ça marche ?

c'est un nouveau jeu, faut deviner ce qu'il se passe, ben je crois que je vais pas continuer à jouer.

**dikdableu** · 27/06/2018, 15h16

Envoyé par dikdableu

En changeant le code comme ci dessus l'erreur change et indique chart is not defined à la ligne 51:1

Encore une fois comme je l'ai dit ci-dessus

**psychadelic** · 27/06/2018, 15h22

ben non, après le changement de ton code, tu ne dis en rien quel effet cela à eu.
Donc je peux pas deviner si tu en arrive à un bon résultat ou une autre erreur, ou toujours la même erreur.

moi aussi je sais jouer aux devinettes : 81 106 108

mais j'en ai peut-être oublié d'autres, je te laisse deviner ou

[edit = la solution]

les lignes 81, 106 et 108 sont toutes terminées par une virgule en trop. ce qui rends tes donnés jso incohérentes.

**Watilin** · 27/06/2018, 16h03

Envoyé par dikdableu

En changeant le code comme ci dessus l'erreur change et indique chart is not defined à la ligne 51:1

C’est chart avec un c minuscule, ou avec une majuscule ?

**dikdableu** · 27/06/2018, 16h12

Chart majuscule.

Nom : chart.PNG
Affichages : 566
Taille : 1,6 Ko

**psychadelic** · 27/06/2018, 17h08

ah oui, en plus des 3 erreurs que j'ai indiqué dans mon dernier message; avoir donné le même nom à une collection d'instance que celui de l'objet en référence, en jouant sur une lettre minuscule ou majuscule, c'est loin d'être la panacée dans l' art de la programmation

**Watilin** · 27/06/2018, 18h14

C’est un problème d’ordre dans le chargement des différents scripts. Vérifie que le script Charts est chargé avant ton propre script. Y a-t-il des attributs async ou defer ?

Plusieurs graphes sur la même page [Chart.js]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager