Axe des X et libellé

Version imprimable

Bonjour à tous.

Tout d'abord, j'espère que je ne me suis pas trompé de section, sinon, ben je suis désolé et merci au modérateur qui voudra bien me le déplacer dans la bonne section.

Alors voici mon souci qui me fait perdre mes cheveux depuis quelques jours ;)
Je trace un graphe avec 3 courbes correspondant à 3 années. Ces 3 années sont récupérées à partir d'une table qui contient toutes les données nécessaires avec 2 lignes par jours (arrivées et départs).
je voudrai :
- sur l'axe des X ne voir que les mois
- dans le bulle d'aide, la date.

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER                                                                      */		
/*----------------------------------------------------------------------------------------------*/		
// Requête au serveur
Annee = date.slice(0,4);
var deferred = $.get("./scripts/PHP/TraficJournalier.php?date=".concat(Annee));
// Retour du serveur (traitement des données JSON)
deferred.done(function(jsonData) {
	var update = false;
	if (jsonData[0].length > 0) {
		update = true;
		if ($("#LIG_TJ_LFPO").children().length == 0) {
//					addHTML("lfob", ["lfob_hg"], ["12"]); // on se place dans le div row ID="lfob", on crée une div lfob_hg col-md-12
			addHTML("LIG_TJ_LFPO", ["lfpo_tj"], ["12"]); // Graph de gauche=LFPB / Graph de droite=LFOB
		}
		createGraph_TJ_LFPO(Annee, jsonData[0], jsonData[1], jsonData[2]);
	} else {
		$("#LIG_TJ_LFPO").empty();
	}
});
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		WAnneeN = P_Annee,
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		DateMouv = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	i = 0;
	WNumJour = 1;
	while (i < jsonData_N2.length){
		var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
		var WAnnee = jsonData_N2[i][3].slice(0,4);
		var JourMouv = jsonData_N2[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ
		var WJour = jsonData_N2[i][3].slice(8,10);
		var WMois = jsonData_N2[i][3].slice(5,7); 
		WMois = MoisEnLettres(WMois);
		var WDateMouv = WJour + " " + WMois;
		Jours_X.push(WNumJour);
		NbMouvN2_Y.push(WNbMouv_N2);
		DateMouv.push(WDateMouv);
		i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		WNumJour = WNumJour + 1;
	}
 
 
console.log(Jours_X);
console.log(DateMouv);
console.log(NbMouvN2_Y);
 
	i = 0;
	while (i < jsonData_N1.length){
		var WAnnee = jsonData_N1[i][3].slice(0,4);
//			var JourMouv = jsonData_N1[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ
		var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
//			Jours_X.push(JourMouv);
		NbMouvN1_Y.push(WNbMouv_N1);
		i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
	}
	i = 0;
	while (i < jsonData_N.length){
		var WAnnee = jsonData_N[i][3].slice(0,4);
//			var JourMouv = jsonData_N[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ
		var WNbMouv_N = parseInt(jsonData_N[i][4]);
//			Jours_X.push(JourMouv);
		NbMouvN_Y.push(WNbMouv_N);
		i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
	}
 
	var TJ_Colors = ["#FE0000"];
	var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
	val = ($("#lfpo_tj").width() / 20);
	padding_array = [0, 0, 0, val];
 
	var TJ_ChartOpt = {
//			color: HG_Colors,
		color: TJ_TAB_Colors,
		title: {
			padding: [20, 5, 0, 5],					// Title space around content
			text: 'Trafic Journalier LFPO',
			left: 'center'							// Distance between grid component and the left side of the container
		},
		grid: {
			show: false,							// Whether to show the grid in rectangular coordinate
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 65,								// Distance between grid component and the bottom side of the container
			left: 40,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		xAxis: {									// The X axis in Cartesian (rect.) coordinate
			type: 'category',
			name: 'Jours',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 13,
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: true,
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
			axisTick: {
				show: true,					 		// Whether to show the axis tick
				inside: false,
				length: 3
			},
			axisLabel: {
				interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
				rotate:0,
				margin: 10,
				showMinLabel: true,
				align : 'left',
				padding: padding_array, 			// [haut, droit, bas, gauche]
				color: 'rgb(050,050,050)'
			},
			splitLine: {show: false},				// True => quadrillage sur le graphe
			splitArea : { 							// Permet de mettre un fond de couleurs différentes
				show: false,
				areaStyle:{
					color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
				}
			},
			data: Jours_X
		},
		yAxis: {
			type: 'value',
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 15,
				fontWeight: 'bold'
			},
			axisLine: {
				lineStyle: {
					color: 'rgb(165,165,165)',
					width: 2
				}
			},
			axisTick: {
				length: 3,
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			}
		},
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value) * 20] ; // * 60 => on se déplace de 60 dans le tableau de 1440 items
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			feature: {
				magicType: {
					type: ['line', 'bar'],
					title: {
							line: 'Ligne',
							bar: 'Histo.'
						  }
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			bottom: 3,
			left: 0
		},
		series : [
			{
				type: 'line',
				name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: NbMouvN_Y
			},
			{
				type: 'line',
				name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: NbMouvN1_Y
			},
			{
				type: 'line',
				name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: NbMouvN2_Y
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	/*--------------------------------------------------------------------------------------------------*/		
	/* LFPO : ARR et DEP */		
	/*--------------------------------------------------------------------------------------------------*/		
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
	// Permet de définir dynamiquement le padding afin de bien positionner les libellés
	val = ($("#lfpo_tj").width() / 60);
	padding_array = [0, 0, 0, val];
 
	TJ_ChartOpt.xAxis.data = Jours_X;
	TJ_ChartOpt.series[0].data = NbMouvN_Y;
	TJ_ChartOpt.series[1].data = NbMouvN1_Y;
	TJ_ChartOpt.series[2].data = NbMouvN2_Y;
	TJ_ChartOpt.xAxis.axisLabel.padding = padding_array;
	TJ_Chart_C1.setOption(TJ_ChartOpt);
}

Si besoin, voici le contenu des tableaux que j'utilise :

Code:

1
2
3
4
5
6
7
8
9
 
Jours_X : 
(366)*[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,*…][0 … 99][100 … 199][200 … 299][300 … 365]300: 301301: 302302: 303303: 304304: 305305: 306306: 307307: 308308: 309309: 310310: 311311: 312312: 313313: 314314: 315315: 316316: 317317: 318318: 319319: 320320: 321321: 322322: 323323: 324324: 325325: 326326: 327327: 328328: 329329: 330330: 331331: 332332: 333333: 334334: 335335: 336336: 337337: 338338: 339339: 340340: 341341: 342342: 343343: 344344: 345345: 346346: 347347: 348348: 349349: 350350: 351351: 352352: 353353: 354354: 355355: 356356: 357357: 358358: 359359: 360360: 361361: 362362: 363363: 364364: 365365: 366length: 366__proto__: Array(0)
 
DateMouv : 
(366)*["01 Janvier", "02 Janvier", "03 Janvier", "04 Janvier", "05 Janvier", "06 Janvier", "07 Janvier", "08 Janvier", "09 Janvier", "10 Janvier", "11 Janvier", "12 Janvier", "13 Janvier", "14 Janvier", "15 Janvier", "16 Janvier", "17 Janvier", "18 Janvier", "19 Janvier", "20 Janvier", "21 Janvier", "22 Janvier", "23 Janvier", "24 Janvier", "25 Janvier", "26 Janvier", "27 Janvier", "28 Janvier", "29 Janvier", "30 Janvier", "31 Janvier", "01 Février", "02 Février", "03 Février", "04 Février", "05 Février", "06 Février", "07 Février", "08 Février", "09 Février", "10 Février", "11 Février", "12 Février", "13 Février", "14 Février", "15 Février", "16 Février", "17 Février", "18 Février", "19 Février", "20 Février", "21 Février", "22 Février", "23 Février", "24 Février", "25 Février", "26 Février", "27 Février", "28 Février", "29 Février", "01 Mars", "02 Mars", "03 Mars", "04 Mars", "05 Mars", "06 Mars", "07 Mars", "08 Mars", "09 Mars", "10 Mars", "11 Mars", "12 Mars", "13 Mars", "14 Mars", "15 Mars", "16 Mars", "17 Mars", "18 Mars", "19 Mars", "20 Mars", "21 Mars", "22 Mars", "23 Mars", "24 Mars", "25 Mars", "26 Mars", "27 Mars", "28 Mars", "29 Mars", "30 Mars", "31 Mars", "01 Avril", "02 Avril", "03 Avril", "04 Avril", "05 Avril", "06 Avril", "07 Avril", "08 Avril", "09 Avril",*…]
 
NbMouvN2_Y : 
(366)*[267, 283, 333, 319, 287, 279, 291, 305, 211, 278, 284, 265, 269, 282, 305, 198, 260, 286, 262, 265, 279, 310, 205, 263, 288, 205, 273, 280, 308, 203, 264, 315, 306, 296, 315, 335, 227, 285, 310, 288, 296, 310, 329, 226, 287, 312, 283, 285, 306, 341, 244, 305, 323, 299, 297, 319, 335, 243, 299, 319, 302, 292, 323, 341, 249, 299, 336, 320, 312, 329, 347, 231, 288, 341, 311, 308, 331, 349, 244, 190, 228, 322, 323, 340, 355, 239, 250, 332, 348, 329, 272, 362, 279, 318, 355, 321, 335, 338, 367, 291,*…]

Voila, j'espère vous avoir tout donné pour que vous puissiez m'aider, car là, je suis coincé.
Merci d'avance.

02/09/2018, 00h39
oooopppp

1 pièce(s) jointe(s)

Salut,
moi aussi je suis dans les stats et moi aussi ... je m'arrache les cheveux (enfin ce qu'il en reste)

Alors perso je suis passé par un tas de tests de framework et le plus simple (et gratuit - tant pis pour highcharts) que j'ai trouvé
est chartjs ne pas se fier à leur exemples (qui sont hideux-rouge-pourrit) mais essayer de styliser un peut,
y'a beaucoup de sujets et tutoriels sur cet outil sur le web.

Je sais qu'il prend en charge plusieurs jeu de données en même temps (plusieurs graphiques en un)
cela pourrait être une solution pour toi, je suis allé voir la doc de echart et ça m'a paru assez fastidieux à appréhender.

Toutefois pour chart.js il vaut mieux chercher des exemples sur le web (en english) que de se tourner uniquement vers la documentation,
qui est assez peu claire (je leur ai fait savoir), enfin bon, on arrive quand même vite à afficher ce qu'on veut et les datas reprennent des tableaux comme les tiens,
ne pas hésiter à styliser :
un exemple (le code est dans la page et n'est pas minifié) sur Mon site web en bas de la page

p.s: on voit tout de suite que je ne suis pas un grand designer :mouarf: mais le graph fait son taf !

Pièce jointe 408319

1 pièce(s) jointe(s)

Merci de ta réponse.
Malheureusement ECharts est imposé, je n'ai pas le choix.

Avec du mal, j'ai réussit à faire ce que je voulais faire, mais j'ai un nouveau problème que je n'arrive pas à résoudre : les tirets de l'axe des X ne tombent pas pile
en face.

Voici mon code modifié :

Code:

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
 
var TJ_Colors = ["#FE0000"];
var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
val = ($("#lfpo_tj").width() / 60);
padding_array = [0, 0, 0, val];
 
var TJ_ChartOpt = {
//			color: HG_Colors,
	color: TJ_TAB_Colors,
	title: {
		padding: [20, 5, 0, 5],					// Title space around content
		text: 'Trafic Journalier LFPO',
		left: 'center'							// Distance between grid component and the left side of the container
	},
	grid: {
		show: false,							// Whether to show the grid in rectangular coordinate
		top: 50,								// Distance between grid component and the top side of the container
		bottom: 65,								// Distance between grid component and the bottom side of the container
		left: 40,								// Distance between grid component and the left side of the container
		right: 30								// Distance between grid component and the right side of the container
	},
	xAxis: {									// The X axis in Cartesian (rect.) coordinate
		type: 'category',
		name: 'Jours',
		nameLocation: 'center',
		nameTextStyle: {
			padding: 10,							// Espace entre le libellé et la ligne de l'axe X
			fontWeight: 'bold'
		},
		max: 'dataMax',
		position: 'bottom',
		boundaryGap: true,
		axisLine: {
			lineStyle: {
				color: 'rgb(105,105,105)',
				width: 2,
				onZero: true,
			}
		},
		axisTick: {
			show: true,					 		// Whether to show the axis tick
			inside: false,
			alignWithLabel: true,
			length: 3
		},
		axisLabel: {
			show: true,
			formatter: function (params) {
				return MoisMouv_X[params]
			},
			interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
			rotate:0,
			margin: 10,
			showMaxLabel: true,
			showMinLabel: true,
			align : 'auto',
			padding: padding_array, 			// [haut, droit, bas, gauche]
//					padding:[0,0,0,20],
			color: 'rgb(050,050,050)'
		},
		splitLine: {show: false},				// True => quadrillage sur le graphe
		splitArea : { 							// Permet de mettre un fond de couleurs différentes
			show: false,
			areaStyle:{
				color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
			}
		},
		data: Jours_X
	},
	yAxis: {
		type: 'value',
		name: 'Mouvements',
		nameLocation: 'center',
		nameRotate: 90,
		nameTextStyle: {
			padding: 15,
			fontWeight: 'bold'
		},
		axisLine: {
			lineStyle: {
				color: 'rgb(165,165,165)',
				width: 2
			}
		},
		axisTick: {
			length: 3,
		},
		axisLabel: { 							// Settings related to axis label
			color: 'rgb(070,070,070)'
		}
	},
	tooltip: {
		show: true,
		trigger: 'axis', 						// Triggered by axes.
		axisPointer: {
			type: 'line',
			label : {
				formatter: function (params) {
				return DateMouv[parseInt(params.value)]; // 
				}
			},
			lineStyle: {
				width: 1 						// Epaisseur de la ligne verticale
			}
		}
	},
	toolbox: {									// Cartouche en haut à droite
		show: true,
		feature: {
			magicType: {
				type: ['line', 'bar'],
				title: {
						line: 'Ligne',
						bar: 'Histo.'
					  }
			},
			saveAsImage: {title:'Sauvegarde Image'}
		}
	},
	legend: {
		show: true,
		type : 'plain',
		bottom: 3,
		left: 0
	},
	series : [
		{
			type: 'line',
			name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
			symbolSize: 7,
			showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
			lineStyle: {
				width: 2,
				type: 'solid' //'dotted' / 'dashed'
			},
			smooth: false,						// Permet de lisser ou non les courbes
			data: NbMouvN_Y
		},
		{
			type: 'line',
			name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
			symbolSize: 7,
			showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
			lineStyle: {
				width: 1,
				type: 'solid' //'dotted' / 'dashed'
			},
			smooth: false,						// Permet de lisser ou non les courbes
			data: NbMouvN1_Y
		},
		{
			type: 'line',
			name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
			symbolSize: 7,
			showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
			lineStyle: {
				width: 1,
				type: 'solid' //'dotted' / 'dashed'
			},
			smooth: false,						// Permet de lisser ou non les courbes
			data: NbMouvN2_Y
		}
	],
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true
};
 
TJ_Chart_C1.setOption(TJ_ChartOpt);

Heu... voici une petite capture pour se rendre compte du problème.
Pièce jointe 408561

Sur l'image, on se rend bien compte que la souris affiche des valeurs du mois d'avril alors qu'elle n'est pas dans la "section" avril.

Un coup d'mains, siouplé ?

03/09/2018, 22h51
oooopppp
Salut, ça c'est peut être un problème de padding / margin quelque part,
j'ai regardé les settings du xAxis mais je ne vois pas,
ça fait une semaine que je teste des frameworks de graph et j'en ai la nausée de leur settings pourris
et incompréhensible ...

Franchement si c'est toi le dev., impose ta techno, si le client a un peu d'argent,
tourne toi vers highcharts, payant sous différentes formes mais plus simple à mettre en place,
sinon y'a google chart ou je ne sais plus comment ça s'appelle le service de graphs de ggle,
aussi incompréhensible mais sûrement bien documenté ...

Désolé de ne pas pouvoir t'aider plus, j'ai énormément de travail,
ma stratégie (qui n'est pas la meilleure) dans ces cas là, c'est de "taper" jusqu'à épuisement sur le clavier
jusqu'à ce qu'il en sorte quelque chose ...

Donc : -> Retour dans la doc, exemples, tests, ça marche pas, retour dans la doc ... etc

Courage, on finit toujours par y arriver, une fois ça m'a pris 3 mois ...

p.s:
Code:

1 2 3 4 nameTextStyle: { padding: 10, // Espace entre le libellé et la ligne de l'axe X fontWeight: 'bold' },
déjà c'est bizarre mais le font-weight ne semble pas fonctionner, le nom de tes mois n'est pas en gras,
essaye de passer à false certaine fonctionnalités, n'ajoute que les fonctionnalités vraiment nécessaires,
perso j'ai eu un gros bug hier en rechargeant le graph. dynamiquement, il reprenait ses anciennes valeurs au survol de la souris,
j'ai du me replonger dans la doc ... les autres faisaient les bourrins en détruisant la div du DOM et en la reconstruisant.
04/09/2018, 08h08
Zebulon777

Ok, merci, je vais continuer à me plonger dans la doc et le net ;)

Je suis bien d'accord avec toi, c'est un proglème de margin / padding, mais impossible de trouver lequel... Et il ne me reste de moins en moins de cheveux ;)
Impossible de prendre autre chose Echarts, malheureusement, et puis ce serait une trop grosse perte de temps de tout recommencer avec une autre librairie.

Si, si, c'est bien en gras : cette partie concerne le nom de l'axe des abscisses uniquement ; ça n'apparait pas sur l'image.

Ce qui m'étonne, c'est qu'il n'y aie pas plus de personnes qui utilisent ECharts sur le forum...

Salut, changer de tech. en cour de route n'est pas forcément un mauvais calcul,
perso. j'en suis à mon 3eme framework de graph. depuis la semaine dernière :aie:
C'est pas grave je préfère partir sur une techno que je maîtrise à peut près et qui un temps soit peu
configurable sans trop de peine ...
Regarde à cette page,
ouvre une console,
regarde les scripts, tu n'as plus qu'à adapter, tu rajoutes ta ligne supplémentaire de datas

La configuration
var config = { ... ETC ... voir script};

cf: datasets: [{
label: 'My First dataset', .. ETC ..
)]

pour lancer le graph ('ctx' c'est le div id="ctx" vide qui va accueillir le graph

Code:

1
2
3
4
window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};

Si tu veux ma config. :

Code:

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
 
/*
    * 
    * Placido shop - licence GNU Affero
    * function render_chart().
    * char_type
    * labels
    * datas
    * title
		*/
		var render_chart = function(char_type, labels, datas, title){
 
						// CHART.js ________________________________________________________
						// retire le carré couleur légende sous le titre
						Chart.defaults.global.legend.display = false;
 
						// OBJ Chart.js
						var MyChart = new Chart($('#visitors'), {
						// The type of chart we want to create // alter "line"
						type: char_type,
 
						// The data for our dataset
						data: {
								// ->  !!!!!!!!      DATAS for x axis     -> dates    !!!!!!!!!!!
								labels: labels,
 
								datasets: [{
										lineTension: 0.2,
										pointStyle: 'circle',
										pointRadius: 6,
										pointHoverRadius: 6,
										borderWidth: 1,
										//backgroundColor: 'rgba(51, 107, 165, 0.4)',
										borderColor: '#349bde',
										// hoverBackgroundColor: "darkorange",
 
										// --> !!!!!!      DATAS for y axis   !!!!!!!!
										data: datas
 
								}]
						},
 
						// Configuration options go here
						options: {
 
								responsive: true,
								// title
								title: {
										display: true,
										fontSize: 16,
										fontFamily: "Open Sans, Verdana, Arial",
										padding: 16,
										text: title
								},
								// info bulles settings
								tooltips: {
 
										// mode: 'label',
										backgroundColor: 'rgba(60, 60, 60, 0.5)',
										bodyFontColor: '#fff',
										bodyFontSize: 14,
										bodyFontStyle: 'normal',
										bodyFontFamily: "Open Sans, sans-serif",
										yPadding: 8,
										xPadding: 12,
										yAlign: "bottom",
										caretSize: 10,
										cornerRadius: 0,
										// ne pas voir la légende de couleur dans le tooltip
										displayColors: false,
 
										callbacks: {
 
												title: function() {},
 
												label: function(tooltipItem, data) {
 
													return "Le "+data['labels'][tooltipItem['index']]+"  "+data['datasets'][0]['data'][tooltipItem['index']]+" visites";
												}
 
										}
 
								},
								// hover: {
						    //   mode: 'nearest',
						    //   intersect: true
						    // },
								// orientation texte axe X
								scales: {
											xAxes: [{
												ticks: {
													autoSkip: false,
													maxRotation: 90,
													minRotation: 0
												},
												gridLines: {
													display: true // grid lines to x axis
												}
 
 
 
											}],
											// end  X axes
 
											yAxes: [{
													display: true,
													ticks: {
															 // minimum value will be 0.
															beginAtZero: true,
															//stepSize : 1,
															padding: 5, 
 
													}
											}]
								}
								// end scales
						}
				});
				// END CHART
 
	},
	/*
	 * END function render_chart().
	 */

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// tu peux rendre ces données dynamiques
// CHART.js ________________________________________________________
var char_type = 'line';
var render_date = [array de tes dates];
var render_visits = [array de tes données numériques];
var title_chart = 'Le super titre du graph.'; 
 
				// lanch function render chart
				render_chart( char_type,
				                               render_date,
				                               render_visits,
			                                       title_chart);

05/09/2018, 08h12
Zebulon777

Salut et merci, c'est sympa et intéressant.

Mais comme je te l'ai dit, la librairie Echarts m'est imposée et je ne peux pas en déroger.

J'ai pas mal avancé sur mes graph, mais j'ai toujours mon problème de décalage ; pour le moment, j'ai juste changé ma philo pour ne plus afficher les tirets, ainsi ça se voit moins.
Mais, j'ai bien conscience que c'est une "rustine" dans l'attente de trouver mieux ;)
06/09/2018, 00h13
oooopppp

Salut, coller des rustines, j'ai tout le temps l'impression de le faire aussi,
tout le problème des frameworks de chart, un tas de fonctionnalités et au
final tu galères pour en sortir un truc simple,
au fait c'est quoi le projet sur lequel tu bosses ?
06/09/2018, 07h55
Zebulon777

Une présentation de différents stat sur notre intranet et toi ?
09/09/2018, 23h44
oooopppp

1 pièce(s) jointe(s)

Salut, j'avais pas vu ta réponse,
houlà avec intranet, ils ont pas de quoi se payer une licence highcharts ?

C'est dommage ils sont super bien leur graphs et assez facile à mettre en place,
ce que j'ai fait pour mon framework de boutique en ligne puis je me suis aperçu qu'ils n'étaient pas sous licence libre ...
Bref, je les ai contactés pour leur demander d'exploiter leur appli. de base gratuitement car moi-même en
open source et ils m'ont envoyé ch...
Donc, me voilà sur chart js pour offrir un petit service de stats pas trop vilain sur Placido Shop (c'est mon projet)

Une capture du back-office :

Pièce jointe 410328
10/09/2018, 08h02
Zebulon777

Sympa aussi et non, la politique interne est l'open source dés que c'est possible ;)

Bonjour,
ton soucis vient de ces lignes

Code:

1
2
3
4
5
6
axisLabel: {
    show: true,
    formatter: function (params) {
      return MoisMouv_X[params]
    },
    interval: 30, // c'est cette instruction qui coince

Je m'explique (je tente plutôt) :
La position des 1^er du mois sont, pour une année non bissextile,

Code:

// posJours = 1, 32, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335

soit avec un index démarrant à 0

Code:

// posJours = 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334

En plaçant les repères avec comme interval: 30, cela signifie qu'il y a 30 axisTick entre 2 repères donc, ceux ci seront placés aux index

Code:

// interval 30 = 0, 31, 62, 93, 124, 155, 186, 217, 248, 279, 310, 341

on voit tout de suite qu'il y a un décalage qui s’opère, c'est plus fragrant en écrivant les 2 lignes l'une sous l'autre

Code:

1
2
// posJours    = 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334
// interval 30 = 0, 31, 62, 93, 124, 155, 186, 217, 248, 279, 310, 341

donc compte tenu de ta façon de procéder l'écart est tout à fait normal.
Fait un essai avec un interval: 29 pour voir le nouveau décalage

Code:

1
2
// posJours    = 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334
// interval 29 = 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360

Une solution à ton problème est de passer par le positionnement de tes xAxis.axisTick et de tes xAxis.axisLabel en utilisant non pas un interval: 30 mais un interval : function (index, valeur) {...} qui va te permettre d'ajuster au mieux la position de tes repères et de tes labels.

Les explications plus détaillées étant un peu longues à décrire je te joins un fichier exemple de cette mise en application

Code:

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
239
240
241
242
243
244
245
<!DOCTYPE HTML>
<html lang="FR">
<head>
<meta charset="UTF-8">
<title>Exemple ECharts</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1889223">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"></script>
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
  display: block;
  margin: 0 auto;
  max-width: 60em;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0;
}
section, .section {
  margin: 0 2em 1em;
  position: relative;
}
#graphe {
  width: 800px;
  height: 400px;
  margin: auto;
}
</style>
</head>
<body>
<header class="bandeau">
</header>
<main>
<header>  <h1>[ECharts] Graph-line</h1></header>
  <section>
    <h2>Graphique</h2>
    <div id="graphe"></div>
  </section>
  <section>
    <h2>Ressources</h2>
    <ul>
      <li><a target="new-page" href="https://www.developpez.net/forums/d1889223/javascript/general-javascript/echarts-4-axe-x-libelle/">Discussion sur DVP -> [Echarts 4] Axe des X et libellé</a>
      <li><a target="new-page" href="https://ecomfe.github.io/echarts-doc/public/en/option.html" >ECharts documentation</a>
      <li><a target="new-page" href="https://ecomfe.github.io/echarts-examples/public/index.html">ECharts exemples</a>
    </ul>
  </section>
</main>
<script>
"use strict";
/**
 * Création des données
 */
var joursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var nomMois = "Jan.,Fév.,Mars,Avril,Mai,Juin,Juil.,Août,Sept.,Oct.,Nov.,Déc.".split(",");
var sepDate = " ";  // séparateur jour mois
var dateJours = []; // données axe des X
var dataMark = [];  // quadrillage vertical
var mois;
var nbrMois = joursMois.length;
var jour;
var nbrJours;
var valTmp;
for (mois = 0; mois < nbrMois; mois += 1) {
  nbrJours = joursMois[mois];
  // sauve données pour quadrillage vertical
  dataMark.push({
      xAxis: "01" +sepDate +nomMois[mois]
    });
  for (jour = 1; jour < nbrJours + 1; jour += 1) {
    valTmp = (jour < 10 ? "0" + jour : jour) + sepDate + nomMois[mois];
    dateJours.push(valTmp);
  }
}
// supprime 1st pas utile
dataMark.shift();
 
var data2018 = [];
var data2017 = [];
var data2016 = [];
for (jour = 0; jour < 365; jour += 1) {
  data2016.push(Math.round((Math.random()) * 150) + 150);
  data2017.push(Math.round((Math.random()) * 150) + 200);
  data2018.push(Math.round((Math.random()) * 150) + 250);
}
 
/**
 * Options du graphique
 */
// options quadrillage vertical
var oMarkLine = {
  silent: true,
  symbol: "none",
  label: {
    show: false
  },
  lineStyle: {
    color: "#CCC",
    type: "dotted",
    width: 1
  },
  animation: false,
  data: dataMark
};
// options graphique
var option = {
  title: {
    text: "Titre graphique"
  },
  color: ["#9AF", "#F9A", "#AF9"],
        textStyle: {
                fontFamily: "Verdana"
        },
  legend: {
    data: ["2018", "2017", "2016"]
  },
  // traitement Axe des X
  xAxis: {
    type: "category",
    name: "xAxis",
    nameLocation: "center",
    nameTextStyle: {
      padding: 10,
      color: "#069",
      fontWeight: "bold"
    },
    max: "dataMax",
    position: "bottom",
    boundaryGap: false,  // ! important de mettre à false
 
    // Affichage du trait repère
    axisTick: {
      /**
       * Pour affichage du trait repère sur l'axe X le 1er du mois
       * @param {object} index  - index du tableau de données traité
       * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
       */
      interval: function (index, valeur) {
        // récup du jour
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
        if (1 === jour) {
          return true;
        }
      }
    },
 
    // Affichage du label
    axisLabel: {
      align: "center",
      /**
       * Pour affichage du label au milieu du mois, on met 15 pour simplifier
       * @param {object} index  - index du tableau de données traité
       * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
       * Nota : le return true entraine l'appel de la fonction de formatage
       */
      interval: function (index, valeur) {
        // récup du jour
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
        if (15 === jour) {
          return true;
        }
      },
      formatter: function (valeur, index) {
        // récup du mois pour affichage
        return valeur ? valeur.split(sepDate)[1] : "";
      }
    },
 
    data: dateJours
  },
  // traitement Axe des Y
  yAxis: {
                name: "yAxis",
    nameTextStyle: {
      color: "#069",
      fontWeight: "bold"
    },
    splitLine: {
      lineStyle:{
        width: 1,
        type: "dotted"
      }
    },
    max: 500
  },
 
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "line",
      label: {
      },
      lineStyle: {
        color: "#F00",
        width: 1
      }
    }
  },
 
  series: [{
      type: "line",
      name: "2016",
      symbol: "none",
      lineStyle: {
        width: 1
      },
      markLine: oMarkLine,
      data: data2016
    },
    {
      type: "line",
      name: "2017",
      symbol: "none",
      lineStyle: {
        width: 1
      },
      markLine: oMarkLine,
      data: data2017
    },
    {
      type: "line",
      name: "2018",
      symbol: "none",
      lineStyle: {
        width: 1
      },
      markLine: oMarkLine,
      data: data2018
    }
 
  ]
};
/**
 * Création du graphique
 */
var oEchart = echarts.init(document.getElementById("graphe"));
oEchart.setOption(option);
</script>
</body>
</html>

n'hésite pas si il y a des points qui te semblent obscurs.

Nota: je n'ai pas regardé plus avant toutes les options possibles pour l'axe des X mais une autre solution consisterait peut être à passer par un format date sur cette axe.

Merci de t'être penché sur mon souci.

En fait, nous avions essayé en forçant intervalle à 29, mais dans ce cas, on voyait apparaitre 2 fois le mois de mai !
Par contre, je n'ai pas creusé plus en avant en passant par une fonction.

Voici le nouveau code, car pas mal de petites choses ont changé, comme par exemple, l'utilisation d'un Datazoom.
Le fait d'utiliser un Datazoom, nous permet d'avoir une graphique plus aéré et, donc, de s’affranchir (plus ou moins) de ce problème de décalage.

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
 
...
...
...
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER                                                                      */		
/*----------------------------------------------------------------------------------------------*/		
// Requête au serveur
Annee = date.slice(0,4);
var deferred = $.get("./scripts/PHP/TraficJournalier.php?date=".concat(Annee));
// Retour du serveur (traitement des données JSON)
deferred.done(function(jsonData) {
	var update = false;
	if (jsonData[0].length > 0) {
		update = true;
		if ($("#LIG_TJ_LFPO").children().length == 0) {
//					addHTML("lfob", ["lfob_hg"], ["12"]); // on se place dans le div row ID="lfob", on crée une div lfob_hg col-md-12
			addHTML("LIG_TJ_LFPO", ["lfpo_tj"], ["12"]); // Graph de gauche=LFPB / Graph de droite=LFOB
		}
		createGraph_TJ_LFPO(Annee, jsonData[0], jsonData[1], jsonData[2]);
	} else {
		$("#LIG_TJ_LFPO").empty();
	}
});
...
...
...
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	i = 0;
	WNumJour = 1;
	WMax = 0;
	WMin = parseInt(jsonData_N2[0][4]);
	while (i < jsonData_N2.length){
		var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
		WMax = MinMax(WNbMouv_N2, WMax, "MAX");
		WMin = MinMax(WNbMouv_N2, WMin, "MIN");
		var WAnnee = jsonData_N2[i][3].slice(0,4);
		var JourMouv = jsonData_N2[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ
		var WJour = jsonData_N2[i][3].slice(8,10);
		var WMois = jsonData_N2[i][3].slice(5,7); 
		WMois = MoisEnLettres(WMois);
		var WDateMouv = WJour + " " + WMois + " (Jour N° " + WNumJour + ")";
		Jours_X.push(WNumJour);
		NbMouvN2_Y.push(WNbMouv_N2);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
	}
	i = 0;
	while (i < jsonData_N1.length){
		var WAnnee = jsonData_N1[i][3].slice(0,4);
//			var JourMouv = jsonData_N1[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ
		var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
		WMax = MinMax(WNbMouv_N1, WMax, "MAX");
		WMin = MinMax(WNbMouv_N1, WMin, "MIN");
//			Jours_X.push(JourMouv);
		NbMouvN1_Y.push(WNbMouv_N1);
		i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
	}
	i = 0;
	while (i < jsonData_N.length){
		var WAnnee = jsonData_N[i][3].slice(0,4);
//			var JourMouv = jsonData_N[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ
		var WNbMouv_N = parseInt(jsonData_N[i][4]);
		WMax = MinMax(WNbMouv_N, WMax, "MAX");
		WMin = MinMax(WNbMouv_N, WMin, "MIN");
//			Jours_X.push(JourMouv);
		NbMouvN_Y.push(WNbMouv_N);
		i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
	}
 
// Récupération du dernier jour de l'année N traité pour placer le DataZoom
	WDerNumJour = i / 2;
	WDebZoom = ((WDerNumJour * 100) / 365) - 25;
	WFinZoom = ((WDerNumJour * 100) / 365) + 15;
	if (WDebZoom < 0)
		{
			WDebZoom = 0; // 0%
			WFinZoom = 33; // 33%
		}
 
	var TJ_Colors = ["#FE0000"];
	var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
	val = ($("#lfpo_tj").width() / 37);
	padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
	var TJ_ChartOpt = {
//			color: HG_Colors,
		color: TJ_TAB_Colors,
		title: {
			padding: [20, 5, 0, 5],					// Title space around content
			text: 'Trafic Journalier LFPO',
			left: 'center'							// Distance between grid component and the left side of the container
		},
		grid: {
			show: false,							// Whether to show the grid in rectangular coordinate
//				containlabel: false,
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 80,								// Distance between grid component and the bottom side of the container
			left: 110,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		xAxis: {									// The X axis in Cartesian (rect.) coordinate
			type: 'category',
			name: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10,							// Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: true,
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
			axisTick: {
				show: false,					 		// Whether to show the axis tick
				inside: false,
				alignWithLabel: false,
				length: 3
			},
			axisLabel: {
				show: true,
				formatter: function (params) {
					return MoisMouv_X[params];
				},
				interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
				rotate:0,
				margin: 10,
				showMaxLabel: true,
				showMinLabel: true,
//					align : 'left',
				padding: padding_array, 			// [haut, droit, bas, gauche]
				color: 'rgb(050,050,050)'
			},
			splitLine: {show: false},				// True => quadrillage sur le graphe
			splitArea : { 							// Permet de mettre un fond de couleurs différentes
				show: false,
				areaStyle:{
					color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
				}
			},
			data: Jours_X
		},
		yAxis: {
			type: 'value',
			min: WMin,
			max: WMax,
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 20,
				fontWeight: 'bold'
			},
			axisLine: {
				lineStyle: {
					color: 'rgb(165,165,165)',
					width: 2
				}
			},
			axisTick: {
				length: 3,
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			}
		},
		dataZoom: [
			{   // This dataZoom component controls x-axis by dafault
				type: 'slider', // this dataZoom component is dataZoom component of slider
				showDetail: true,
				showDataShadow: 'auto',
				start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
				end: WFinZoom         // the right is located at 60% - DEFAUT = 33
//					startValue:230,
//					endValue:250
			}
		],
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			feature: {
				magicType: {
					type: ['line', 'bar'],
					title: {
							line: 'Ligne',
							bar: 'Histo.'
						  }
				},
				dataview: {
					show: true,
					title: 'data view'
				},
				dataView: {
					readOnly: false,
					show: true,
					title: 'Données',
					lang: ['Données', 'Retour', ''],
					optionToContent: function(opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
console.log(opt.series);
console.log(series[2]);
console.log(series[1]);
console.log(series[0]);
						var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
									 + '<td>N° Jour:</td>'
									 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
									 + '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									 + '<td>' + DateMouv[i] + '</td>'
									 + '<td>' + series[2].data[i] + '</td>'
									 + '<td>' + series[1].data[i] + '</td>'
									 + '<td>' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				restore: {
					show: true,
					title: 'Rechargement'
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'vertical',
			borderColor: '#000000',
			borderWidth: 2,
			borderRadius: 10,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
//				bottom: 3,
			left: 3,
//				right: 3,
			top:15
		},
		series : [
			{
				type: 'line',
				name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 2,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: NbMouvN_Y
			},
			{
				type: 'line',
				name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: NbMouvN1_Y
			},
			{
				type: 'line',
				name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: NbMouvN2_Y
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}
...
...
...

La seule chose qui devrait partir maintenant est l'affichage DATAVIEW qui semble buggé, car lorsqu'on clique sur le bouton "Rafraichir", on perd la dernière série qui passe à undefined tant qu'on a pas cliqué sur le bouton "Actualisé", mais ça c'est une autre histoire, que je soumettrai peut-être à la communauté?

Pour en revenir au problème de décalage, il n'est pas solutionné car je n'arrive pas à mettre au point une fonction qui fonctionnerait dans tout les cas.
En fait, il y a 2 choses : 1 - je n'avais pas vu qu'il était possible de mettre un intervalle dans pour les AxisTick (aie) et 2 - je n'arrive pas à adapter tes fonctions d'intervalle à mon code.
Je continue de creuser.

En tout cas, merci pour ton aide, ça fait plaisir de ne pas être tout seul ;)

Pas sûr que tu ais pris le temps de regarder attentivement le code fourni ;)

Citation:

Pour en revenir au problème de décalage, il n'est pas solutionné car je n'arrive pas à mettre au point une fonction qui fonctionnerait dans tout les cas.

C'est pourtant assez trivial comme mise en application.

Pour les données de l'xAxis :

Celles-ci sont au format texte et crées dynamiquement afin d'obtenir un array comme ceci

Code:

var dateJour = ["01 Jan.", "02 Jan.", "03 Jan.", "04 Jan.", "05 Jan.", "06 Jan.", "07 Jan.", "08 Jan.", "09 Jan.", "10 Jan.", "11 Jan.", "12 Jan.", "13 Jan.", "14 Jan.", "15 Jan.", "16 Jan.", "17 Jan.", "18 Jan.", "19 Jan.", "20 Jan.", "21 Jan.", "22 Jan.", "23 Jan.", "24 Jan.", "25 Jan.", "26 Jan.", "27 Jan.", "28 Jan.", "29 Jan.", "30 Jan.", "31 Jan.", "01 Fév.", "02 Fév.", "...

Pour les repères axisTick :
Dans la fonction affectée à la propriété interval, on récupère la valeur pour traitement via un split(sepDate) où sepDate est une variable valant " ", "-", "/" ou autre suivant les besoins.
Si la valeur commence par "01" alors on trace le repère
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // Affichage du trait repère axisTick: { /** * Pour affichage du trait repère sur l'axe X le 1er du mois * @param {object} index - index du tableau de données traité * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois */ interval: function (index, valeur) { // récup du jour var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1; if (1 === jour) { return true; } } },
Pour les labels axisLabel :
Le principe est le même mais au lieu de vérifier si on est le 1^er on vérifie si on est le 15 ("15") et si oui on affiche le label centré à cette position
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // Affichage du label axisLabel: { align: "center", /** * Pour affichage du label au milieu du mois, on met 15 pour simplifier * @param {object} index - index du tableau de données traité * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois * Nota : le return true entraine l'appel de la fonction de formatage */ interval: function (index, valeur) { // récup du jour var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15; if (15 === jour) { return true; } }, formatter: function (valeur, index) { // récup du mois pour affichage return valeur ? valeur.split(sepDate)[1] : ""; } },
Nota 1 : L'appel à formatter est fait pour chaque interval qui retourne true.
Nota 2 : La propriété boundaryGap doit être mise à false pour que le centrage soit correct.
Citation:

Voici le nouveau code, car pas mal de petites choses ont changé, comme par exemple, l'utilisation d'un Datazoom.
Le fait d'utiliser un Datazoom, nous permet d'avoir une graphique plus aéré et, donc, de s’affranchir (plus ou moins) de ce problème de décalage.

Il m'a suffit de rajouter ce code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 dataZoom: [{ type: "slider", realtime: false, rangeMode: "value", startValue: dateJours[59], // "01 Mars", endValue: dateJours[211], // "31 Juil.", filterMode: "empty" }, { type: "inside", filterMode: 'empty' } ],
pour que cela soit immédiatement opérationnel.

Le fichier exemple en ligne : https://nosmoking.developpez.com/dem.../d1889223.html

Il y a surement des adaptations à faire pour que cela colle parfaitement à ce que tu souhaites réaliser mais le principe est là, à toi de jouer.

12/09/2018, 03h17
oooopppp

Salut, c'est bien vu NoSmoking !
-> suivre son exemple avec attention.

P.s : chart.js, pour leur faire un peut de pub, c'est aussi de l'open-source.
12/09/2018, 07h39
Zebulon777

J'avais mal lu, trop rapidement, mais ce n'est pas une excuse ;)

Bon, en lisant, ça m'a l'air plus que bien, maintenant, il faut que je mettre tout ça en place.

Comme d'habitude, une bonne aide de la part du Non Fumeur ;)

Par contre, je ne comprends pas pourquoi tu ajoutes un Datazoom de type "Inside" ?

Je ne suis pas sur ce projet pendant quelques jours, mais dés que je peux, je mets ça en place et je reviens vers vous.
13/09/2018, 10h29
NoSmoking

Citation:

Par contre, je ne comprends pas pourquoi tu ajoutes un Datazoom de type "Inside" ?

Il s'agit juste d'autoriser le glisse/déplacer en cliquant directement sur le graphique, ou le zoom/dezoom avec la molette, ce qui peut s'avérer pratique (ou pas d'ailleurs).

• All you need is on this page : dataZoom[i]-inside
13/09/2018, 10h43
Zebulon777

Merci.
Ha bah oui, je n'avais pas creusé car cette fonctionnalité ne nous intéresse pas.

Bon, ben pas glop. ;)
J'ai pas dû tout comprendre.
Ce que j'ai fait ne fonctionne pas alors que ce que tu montres en exemple est exactement ce que je voudrai avoir.

Si ça peut aider, voici ce que contiennent les tableaux :

(A noter que c'est bien Jours_X qui est utilisé pour les données de xAxis)

Code:

1
2
3
4
5
6
7
Jours_X[] :
(366)*[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,*…]

DateMouv[] : 
 (366)*["01 Janvier (Jour N° 1)", "02 Janvier (Jour N° 2)", "03 Janvier (Jour N° 3)", "04 Janvier (Jour N° 4)", "05 Janvier (Jour N° 5)", "06 Janvier (Jour N° 6)", "07 Janvier (Jour N° 7)", "08 Janvier (Jour N° 8)", "09 Janvier (Jour N° 9)", "10 Janvier (Jour N° 10)", "11 Janvier (Jour N° 11)", "12 Janvier (Jour N° 12)", "13 Janvier (Jour N° 13)", "14 Janvier (Jour N° 14)", "15 Janvier (Jour N° 15)", "16 Janvier (Jour N° 16)", "17 Janvier (Jour N° 17)", "18 Janvier (Jour N° 18)", "19 Janvier (Jour N° 19)", "20 Janvier (Jour N° 20)", "21 Janvier (Jour N° 21)", "22 Janvier (Jour N° 22)", "23 Janvier (Jour N° 23)", "24 Janvier (Jour N° 24)", "25 Janvier (Jour N° 25)", "26 Janvier (Jour N° 26)", "27 Janvier (Jour N° 27)", "28 Janvier (Jour N° 28)", "29 Janvier (Jour N° 29)", "30 Janvier (Jour N° 30)", "31 Janvier (Jour N° 31)", "01 Février (Jour N° 32)", "02 Février (Jour N° 33)", "03 Février (Jour N° 34)", "04 Février (Jour N° 35)", "05 Février (Jour N° 36)", "06 Février (Jour N° 37)", "07 Février (Jour N° 38)", "08 Février (Jour N° 39)", "09 Février (Jour N° 40)", "10 Février (Jour N° 41)", "11 Février (Jour N° 42)", "12 Février (Jour N° 43)", "13 Février (Jour N° 44)", "14 Février (Jour N° 45)", "15 Février (Jour N° 46)", "16 Février (Jour N° 47)", "17 Février (Jour N° 48)", "18 Février (Jour N° 49)", "19 Février (Jour N° 50)", "20 Février (Jour N° 51)", "21 Février (Jour N° 52)", "22 Février (Jour N° 53)", "23 Février (Jour N° 54)", "24 Février (Jour N° 55)", "25 Février (Jour N° 56)", "26 Février (Jour N° 57)", "27 Février (Jour N° 58)", "28 Février (Jour N° 59)", "29 Février (Jour N° 60)", "01 Mars (Jour N° 61)", "02 Mars (Jour N° 62)", "03 Mars (Jour N° 63)", "04 Mars (Jour N° 64)", "05 Mars (Jour N° 65)", "06 Mars (Jour N° 66)", "07 Mars (Jour N° 67)", "08 Mars (Jour N° 68)", "09 Mars (Jour N° 69)", "10 Mars (Jour N° 70)", "11 Mars (Jour N° 71)", "12 Mars (Jour N° 72)", "13 Mars (Jour N° 73)", "14 Mars (Jour N° 74)", "15 Mars (Jour N° 75)", "16 Mars (Jour N° 76)", "17 Mars (Jour N° 77)", "18 Mars (Jour N° 78)", "19 Mars (Jour N° 79)", "20 Mars (Jour N° 80)", "21 Mars (Jour N° 81)", "22 Mars (Jour N° 82)", "23 Mars (Jour N° 83)", "24 Mars (Jour N° 84)", "25 Mars (Jour N° 85)", "26 Mars (Jour N° 86)", "27 Mars (Jour N° 87)", "28 Mars (Jour N° 88)", "29 Mars (Jour N° 89)", "30 Mars (Jour N° 90)", "31 Mars (Jour N° 91)", "01 Avril (Jour N° 92)", "02 Avril (Jour N° 93)", "03 Avril (Jour N° 94)", "04 Avril (Jour N° 95)", "05 Avril (Jour N° 96)", "06 Avril (Jour N° 97)", "07 Avril (Jour N° 98)", "08 Avril (Jour N° 99)", "09 Avril (Jour N° 100)",*…][0 … 99][100 … 199][200 … 299][300 … 365]length: 366__proto__: Array(0)

MoisMouv[] : *["Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril",*…]

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
 
...
...
...
// Récupération du dernier jour de l'année N traité pour placer le DataZoom
WDerNumJour = WJourN;
WDebZoom = ((WDerNumJour * 100) / 365) - 25;
WFinZoom = ((WDerNumJour * 100) / 365) + 15;
if (WDebZoom < 0)
	{
		WDebZoom = 0; // 0%
		WFinZoom = 33; // 33%
	}
 
var TJ_Colors = ["#FE0000"];
var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
var sepDate = "-"; // Séparateur utilisé dans les dates lues dans la BDD.
 
val = ($("#lfpo_tj").width() / 37);
padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
var TJ_ChartOpt = {
//			color: HG_Colors,
	color: TJ_TAB_Colors,
	title: {
		padding: [20, 5, 0, 5],					// Title space around content
		text: 'Trafic Journalier LFPO',
		left: 'center'							// Distance between grid component and the left side of the container
	},
	grid: {
		show: false,							// Whether to show the grid in rectangular coordinate
//				containlabel: false,
		top: 50,								// Distance between grid component and the top side of the container
		bottom: 80,								// Distance between grid component and the bottom side of the container
		left: 110,								// Distance between grid component and the left side of the container
		right: 30								// Distance between grid component and the right side of the container
	},
	xAxis: {									// The X axis in Cartesian (rect.) coordinate
		type: 'category',
		name: 'Mois',
		nameLocation: 'center',
		nameTextStyle: {
			padding: 10,							// Espace entre le libellé et la ligne de l'axe X
			fontWeight: 'bold'
		},
		max: 'dataMax',
		position: 'bottom',
		boundaryGap: true,
		axisLine: {
			lineStyle: {
				color: 'rgb(105,105,105)',
				width: 2,
				onZero: true,
			}
		},
		axisTick: {
			show: true,					 		// Whether to show the axis tick
			inside: false,
			alignWithLabel: false,
			length: 3,
////					interval: 30
/**
* Pour affichage du trait repère sur l'axe X le 1er du mois
* @param {object} index  - index du tableau de données traité
* @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
*/
interval: function (index, valeur) {
// récup du jour
var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
if (1 === jour) {
  return true;
}
}
		},
		axisLabel: {
			show: true,
			rotate:0,
			margin: 10,
			showMaxLabel: true,
			showMinLabel: true,
//					align : 'left',
			padding: padding_array, 			// [haut, droit, bas, gauche]
			color: 'rgb(050,050,050)',
////					interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
////					formatter: function (params) {
////						return MoisMouv_X[params];
////					}
align: "center",
/**
* Pour affichage du label au milieu du mois, on met 15 pour simplifier
* @param {object} index  - index du tableau de données traité
* @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
* Nota : le return true entraine l'appel de la fonction de formatage
*/
interval: function (index, valeur) {
// récup du jour
var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
if (15 === jour) {
  return true;
}
},
formatter: function (valeur, index) {
// récup du mois pour affichage
return valeur ? valeur.split(sepDate)[1] : "";
}
 
		},
		splitLine: {show: false},				// True => quadrillage sur le graphe
		splitArea : { 							// Permet de mettre un fond de couleurs différentes
			show: false,
			areaStyle:{
				color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
			}
		},
		data: Jours_X
	},
	yAxis: {
		type: 'value',
		min: WMin,
		max: WMax,
		name: 'Mouvements',
		nameLocation: 'center',
		nameRotate: 90,
		nameTextStyle: {
			padding: 20,
			fontWeight: 'bold'
		},
		axisLine: {
			lineStyle: {
				color: 'rgb(165,165,165)',
				width: 2
			}
		},
		axisTick: {
			length: 3,
		},
		axisLabel: { 							// Settings related to axis label
			color: 'rgb(070,070,070)'
		}
	},
////			dataZoom: [
////				{   // This dataZoom component controls x-axis by dafault
////					type: 'slider', // this dataZoom component is dataZoom component of slider
////					showDetail: true,
////					showDataShadow: 'auto',
////					start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
////					end: WFinZoom         // the right is located at 60% - DEFAUT = 33
//////					startValue:230,
//////					endValue:250
////				}
////			],
dataZoom: [{
type: "slider",
realtime: false,
rangeMode: "value",      
startValue: WDebZoom,  // "01 Mars",
endValue: WFinZoom,   // "31 Juil.",
filterMode: "empty"
},
{
type: "inside",
filterMode: 'empty'
}    
],
	tooltip: {
		show: true,
		trigger: 'axis', 						// Triggered by axes.
		axisPointer: {
			type: 'line',
			label : {
				formatter: function (params) {
				return DateMouv[parseInt(params.value)]; // 
				}
			},
			lineStyle: {
				width: 1 						// Epaisseur de la ligne verticale
			}
		}
	},
	toolbox: {									// Cartouche en haut à droite
		show: true,
		padding: [5, 10, 0, 0],	// [haut, droit, bas, gauche]
		feature: {
			restore: {
				show: true,
				title: 'Rechargement'
			},
			magicType: {
				type: ['line', 'bar'],
				title: {
						line: 'Ligne',
						bar: 'Histo.'
					  }
			},
			dataview: {
				show: true,
				title: 'data view'
			},
			dataView: {
				show: false, // Affiche ou non l'icône pour afficher les données utilisées.
				readOnly: false,
				title: 'Données',
				lang: ['Données', 'Retour', 'Rafraîchir'], // Bug sur le bouton rafraichir qui supprime la dernière série !
				optionToContent: function(opt) {
					var axisData = opt.xAxis[0].data;
					var series = opt.series;
					var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
								 + '<td>N° Jour:</td>'
								 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
								 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
								 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
								 + '</tr>';
					for (var i = 0, l = axisData.length; i < l; i++) {
						table += '<tr>'
								 + '<td>' + DateMouv[i] + '</td>'
								 + '<td>' + series[2].data[i] + '</td>'
								 + '<td>' + series[1].data[i] + '</td>'
								 + '<td>' + series[0].data[i] + '</td>'
								 + '</tr>';
					}
					table += '</tbody></table>';
					return table;
				}
			},
			saveAsImage: {title:'Sauvegarde Image'}
		}
	},
	legend: {
		show: true,
		type : 'plain',
		orient: 'vertical',
		borderColor: '#000000',
		borderWidth: 2,
		borderRadius: 10,
		shadowColor: 'rgba(0, 0, 0, 0.5)',
		shadowBlur: 10,
//				bottom: 3,
		left: 3,
//				right: 3,
		top:15
	},
	series : [
		{
			type: 'line',
			name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
			symbolSize: 7,
			showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
			lineStyle: {
				width: 2,
				type: 'solid' //'dotted' / 'dashed'
			},
			smooth: false,						// Permet de lisser ou non les courbes
			data: NbMouvN_Y
		},
		{
			type: 'line',
			name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
			symbolSize: 7,
			showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
			lineStyle: {
				width: 1,
				type: 'solid' //'dotted' / 'dashed'
			},
			smooth: false,						// Permet de lisser ou non les courbes
			data: NbMouvN1_Y
		},
		{
			type: 'line',
			name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
			symbolSize: 7,
			showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
			lineStyle: {
				width: 1,
				type: 'solid' //'dotted' / 'dashed'
			},
			smooth: false,						// Permet de lisser ou non les courbes
			data: NbMouvN2_Y
		}
	],
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true
};
 
TJ_Chart_C1.setOption(TJ_ChartOpt);
 
var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}
...
...
...

Question en rab :
Oups, j'ai trouvé ;)
~~Je ne connais pas cette syntaxe "var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;" et je n'arrive pas à trouver sur le net ?~~

Bon, j'ai pas mal avancé, grâce à NoSmoking... Un grand merci à toi. Ca, c'est de l'entraide géniale ;)
J'ai les tirets au bons endroits.
Les mois s'affichent correctement.

Mais :
- Pas de quadrillage verticale et je ne trouve pas pourquoi ?
- Pas de Datazoom, car quand je l'active, tout est faussé et lorsque je le déplace, ce sont toujours les même mois que l'on vois affichés !

J'ai du oublier quelque chose, mais je ne vois pas.

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		QuadVert = [],
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	if (jsonData_N2.length > 0)		
	{	
		i = 0;
		SerieChoisie = "";
		WMax = 0;
		WMin = parseInt(jsonData_N2[0][4]);
		while (i < jsonData_N2.length){
			var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
			WMax = MinMax(WNbMouv_N2, WMax, "MAX");
			WMin = MinMax(WNbMouv_N2, WMin, "MIN");
			NbMouvN2_Y.push(WNbMouv_N2);
			WJourN2 = WJourN2 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		SerieChoisie = "N2";
	}
	if (jsonData_N1.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N1.length){
			var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
			WMax = MinMax(WNbMouv_N1, WMax, "MAX");
			WMin = MinMax(WNbMouv_N1, WMin, "MIN");
			NbMouvN1_Y.push(WNbMouv_N1);
			WJourN1 = WJourN1 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N1.length >= jsonData_N2.length)
		{
			SerieChoisie = "N1";
		}
	}
	if (jsonData_N.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N.length){
			var WNbMouv_N = parseInt(jsonData_N[i][4]);
			WMax = MinMax(WNbMouv_N, WMax, "MAX");
			WMin = MinMax(WNbMouv_N, WMin, "MIN");
			NbMouvN_Y.push(WNbMouv_N);
			WJourN = WJourN + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N.length >= jsonData_N1.length)
		{
			SerieChoisie = "N";
		}
	}
// Traitement pour l'axe des X
// Il faut déterminer quelle série va servir pour l'axe des X.
	if (SerieChoisie == "N")
	{
		WNbJourTot = jsonData_N.length;
	}
	if (SerieChoisie == "N1")
	{
		WNbJourTot = jsonData_N1.length;
	}
	if (SerieChoisie == "N2")
	{
		WNbJourTot = jsonData_N2.length;
	}
	i = 0;
	WNumJour = 0;
	while (i <= WNbJourTot - 1)
	{
		if (SerieChoisie == "N")
		{
			var WJour = jsonData_N[i][3].slice(8,10);														////////////////////////////
			var WMois = jsonData_N[i][3].slice(5,7); 														////////////////////////////
		}
		if (SerieChoisie == "N1")
		{
			var WJour = jsonData_N1[i][3].slice(8,10);														////////////////////////////
			var WMois = jsonData_N1[i][3].slice(5,7); 														////////////////////////////
		}
		if (SerieChoisie == "N2")
		{
			var WJour = jsonData_N2[i][3].slice(8,10);														////////////////////////////
			var WMois = jsonData_N2[i][3].slice(5,7); 														////////////////////////////
		}
		WMois = MoisEnLettres(WMois);			 														////////////////////////////
		var WDateMouv = WJour + " " + WMois + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 							////////////////////////////
		Jours_X.push(WNumJour); 																		////////////////////////////
		DateMouv.push(WDateMouv);											 							////////////////////////////
		MoisMouv_X.push(WMois); 																		////////////////////////////
		WNumJour = WNumJour + 1;																		////////////////////////////
		i=i+2;
	}
 
// Récupération du dernier jour de l'année N traité pour placer le DataZoom
	WDerNumJour = WJourN;
	WDebZoom = ((WDerNumJour * 100) / 365) - 25;
	WFinZoom = ((WDerNumJour * 100) / 365) + 15;
	if (WDebZoom < 0)
		{
			WDebZoom = 0; // 0%
			WFinZoom = 33; // 33%
		}
 
	var TJ_Colors = ["#FE0000"];
	var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
	var sepDate = " "; // Séparateur utilisé dans les dates lues dans la BDD.
 
	val = ($("#lfpo_tj").width() / 37);
	padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
// options quadrillage vertical
	var joursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	var nbrMois = joursMois.length;
	for (mois = 0; mois < nbrMois; mois += 1) {
	  // sauve données pour quadrillage vertical
	  QuadVert.push({
		  xAxis: "01" + sepDate + MoisEnLettres(mois)
		});
	}
	// supprime 1st pas utile (Pas de graduation pour le tout premier)
	QuadVert.shift();
 
	console.log(QuadVert);
 
	var oMarkLine = {
		silent: true,
		symbol: "none",
		label: {
			show: false
		},
		lineStyle: {
			color: "#CCC",
			type: "dotted",
			width: 1
		},
		animation: true,
		data: QuadVert
	};		
 
	var TJ_ChartOpt = {
//			color: HG_Colors,
		color: TJ_TAB_Colors,
		title: {
			padding: [20, 5, 0, 5],					// Title space around content
			text: 'Trafic Journalier LFPO',
			left: 'center'							// Distance between grid component and the left side of the container
		},
		grid: {
			show: false,							// Whether to show the grid in rectangular coordinate
//				containlabel: false,
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 80,								// Distance between grid component and the bottom side of the container
			left: 110,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		xAxis: {									// The X axis in Cartesian (rect.) coordinate
			type: 'category',
			name: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10,							// Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: false, // IMPORTANT ! A Mettre à FALSE pour éviter le décalage
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
//				axisTick: {
//					show: true,					 		// Whether to show the axis tick
//					inside: false,
//					alignWithLabel: false,
//					length: 3,
//					interval: 30
//				},
// Affichage du trait repère
axisTick: {
  /**
   * Pour affichage du trait repère sur l'axe X le 1er du mois
   * @param {object} index  - index du tableau de données traité
   * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
   */
  interval: function (index, valeur) {
	// récup du jour
	  valeur = DateMouv[index];
	var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
	if (1 === jour) {
	  return true;
	}
  }
},
//				axisLabel: {
//					show: true,
//					rotate:0,
//					margin: 10,
//					showMaxLabel: true,
//					showMinLabel: true,
//					padding: padding_array, 			// [haut, droit, bas, gauche]
//					color: 'rgb(050,050,050)',
//					interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
//					formatter: function (params) {
//						return MoisMouv_X[params];
//					}
//				},
	// Affichage du label
	    // Affichage du label
    axisLabel: {
      align: "center",
      /**
       * Pour affichage du label au milieu du mois, on met 15 pour simplifier
       * @param {object} index  - index du tableau de données traité
       * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
       * Nota : le return true entraine l'appel de la fonction de formatage
       */
      interval: function (index, valeur) {
        // récup du jour
		  valeur = DateMouv[index];
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
        if (15 === jour) {
          return true;
        }
      },
      formatter: function (valeur, index) {
        // récup du mois pour affichage
		  valeur = DateMouv[index];
        return valeur ? valeur.split(sepDate)[1] : "";
      }
    },
			splitLine: {
				show: false // True => quadrillage sur le graphe
			},				
			splitArea : { 							// Permet de mettre un fond de couleurs différentes
				show: false,
				areaStyle:{
					color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
				}
			},
			data: Jours_X
		},
		yAxis: {
			type: 'value',
			min: WMin,
			max: WMax,
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 20,
				fontWeight: 'bold'
			},
			axisLine: {
				lineStyle: {
					color: 'rgb(165,165,165)',
					width: 2
				}
			},
			axisTick: {
				length: 3,
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			},
			splitLine: {
				lineStyle:{
					width: 1,
					type: "dotted"
				}
			}
		},
////			dataZoom: [
////				{   // This dataZoom component controls x-axis by dafault
////					type: 'slider', // this dataZoom component is dataZoom component of slider
////					showDetail: true,
////					showDataShadow: 'auto',
////					start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
////					end: WFinZoom         // the right is located at 60% - DEFAUT = 33
////				}
////			],
 
	  dataZoom: [{
      type: "slider",
		showDetail: true,
		showDataShadow: 'auto',
      realtime: true,
      rangeMode: "percent",      
		start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
		end: WFinZoom,         // the right is located at 60% - DEFAUT = 33
//      startValue: WDebZoom,  
 //     endValue: WFinZoom,   
      filterMode: "empty"
    },
    {
      type: "inside",
      filterMode: 'empty'
    }    
  ],
 
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			padding: [5, 10, 0, 0],	// [haut, droit, bas, gauche]
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
							line: 'Ligne',
							bar: 'Histo.'
						  }
				},
				dataview: {
					show: true,
					title: 'data view'
				},
				dataView: {
					show: false, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					title: 'Données',
					lang: ['Données', 'Retour', 'Rafraîchir'], // Bug sur le bouton rafraichir qui supprime la dernière série !
					optionToContent: function(opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
									 + '<td>N° Jour:</td>'
									 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
									 + '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									 + '<td>' + DateMouv[i] + '</td>'
									 + '<td>' + series[2].data[i] + '</td>'
									 + '<td>' + series[1].data[i] + '</td>'
									 + '<td>' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'vertical',
			borderColor: '#000000',
			borderWidth: 2,
			borderRadius: 10,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
//				bottom: 3,
			left: 3,
//				right: 3,
			top:15
		},
		series : [
			{
				type: 'line',
				name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 2,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				markLine: oMarkLine,
				data: NbMouvN_Y
			},
			{
				type: 'line',
				name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				markLine: oMarkLine,
				data: NbMouvN1_Y
			},
			{
				type: 'line',
				name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				markLine: oMarkLine,
				data: NbMouvN2_Y
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}

Bref, NoSmoking, si tu as 5 minutes pour te pencher sur mes 2 derniers soucis ? ;)

15/09/2018, 11h28
NoSmoking
Citation:

Bref, NoSmoking, si tu as 5 minutes pour te pencher sur mes 2 derniers soucis ?

Tu es gentil mais c'est le temps qu'il me faut pour copier ton code, ouvrir un éditeur et coller le code :aie:

Ceci étant

#1 « Pas de quadrillage verticale et je ne trouve pas pourquoi ? »
Le format de tes données dans series :
Code:

1 2 markLine: oMarkLine, data: NbMouvN_Y
doit être le même

#2 « Pas de Datazoom, car quand je l'active, tout est faussé et lorsque je le déplace, ce sont toujours les même mois que l'on vois affichés ! »
Difficile de répondre sans connaître les valeurs que tu injectes, essaie simplement de laisser les valeurs par défaut pour commencer.

Nota : lorsque tu nous mets les valeurs de tes variables fait plutôt un console.log(JSON.stringify( tonObjet)) pour récupérer leur valeur, c'est plus lisible et directement exploitable par qui voudrait tester avec tes valeurs.

1 pièce(s) jointe(s)

Citation:

Envoyé par NoSmoking

Tu es gentil mais c'est le temps qu'il me faut pour copier ton code, ouvrir un éditeur et coller le code :aie:

Mais je connais ta sagacité ;) et je t'en remercie d'ailleurs, ainsi que pour ta patience ;)

Citation:

Envoyé par NoSmoking

Ceci étant

#1 « Pas de quadrillage verticale et je ne trouve pas pourquoi ? »
Le format de tes données dans series :

Code:

1
2
markLine: oMarkLine,
data: NbMouvN_Y

doit être le même

Je ne comprends pas, la séparation se fait à chaque changement de mois, c'est pour cela que j'ai mis la même chose que pour les tirets ???

Citation:

Envoyé par NoSmoking

#2 « Pas de Datazoom, car quand je l'active, tout est faussé et lorsque je le déplace, ce sont toujours les même mois que l'on vois affichés ! »
Difficile de répondre sans connaître les valeurs que tu injectes, essaie simplement de laisser les valeurs par défaut pour commencer.

Voir plus bas les valeurs utilisées.

Citation:

Envoyé par NoSmoking

Nota : lorsque tu nous mets les valeurs de tes variables fait plutôt un console.log(JSON.stringify( tonObjet)) pour récupérer leur valeur, c'est plus lisible et directement exploitable par qui voudrait tester avec tes valeurs.

C'est noté...

Donc :

Voici les données utilisées (J'espère, que je n'ai rien oublié) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
"nbmouvn_y=555,595,582,571,626,496,594,620,575,606,592,643,431,556,584,554,563,576,635,436,561,576,543,564,569,657,430,557,604,564,585,578,674,434,566,618,467,412,553,501,451,577,604,532,581,591,672,482,561,601,584,596,503,623,491,587,604,572,561,532,631,484,579,624,582,578,582,668,474,573,658,620,621,617,687,483,581,641,593,620,385,590,478,624,704,670,697,695,632,578,590,683,614,673,691,744,500,621,725,602,597,676,770,614,681,717,609,598,661,733,633,689,659,588,639,684,744,647,668,672,684,733,634,670,623,668,635,605,690,656,686,614,709,743,702,700,686,740,593,603,666,523,697,683,728,563,642,701,663,668,675,730,566,669,703,670,662,671,731,557,640,704,690,690,700,739,587,641,726,710,710,732,755,590,673,751,698,734,720,771,590,664,741,732,726,723,767,648,704,754,728,746,730,758,633,707,722,695,704,706,755,648,679,706,672,688,688,677,640,686,675,627,652,642,682,628,669,650,571,629,602,673,627,672,657,618,642,636,670,615,664,661,633,659,661,707,646,685,717,697"
 
"nbmouvn1_y=567,684,615,578,571,623,446,568,597,546,566,563,624,423,531,602,541,550,577,622,417,533,597,542,565,582,616,425,541,599,548,561,585,652,464,557,646,599,595,626,666,488,571,639,615,610,625,669,501,602,648,612,605,614,675,497,603,650,621,632,641,683,482,577,571,489,505,558,652,478,581,666,623,619,658,690,299,574,614,641,643,662,659,495,624,696,659,687,697,763,604,673,695,650,659,667,695,589,684,718,661,670,688,752,627,621,726,704,678,694,757,612,669,714,678,669,701,768,616,610,701,715,712,724,758,605,603,705,719,704,713,760,602,670,733,698,692,722,758,600,672,731,694,719,649,627,565,692,739,672,669,693,736,588,591,673,668,653,694,735,590,663,708,650,667,698,750,601,660,741,688,710,723,781,639,689,751,708,735,741,784,649,715,771,734,744,744,767,648,709,754,742,744,742,683,635,687,706,664,692,697,720,640,675,690,647,654,662,694,619,660,655,604,614,613,656,621,657,639,598,595,609,653,625,647,622,603,615,616,653,614,660,658,618,630,627,673,631,662,677,644,650,647,679,632,690,734,686,699,699,734,613,665,734,683,711,711,753,603,668,724,667,699,705,739,592,669,724,665,689,701,751,600,678,710,659,675,681,733,561,636,715,381,660,669,720,573,657,709,661,679,692,761,623,682,709,670,684,685,742,626,618,621,583,571,599,667,528,628,659,612,605,609,657,422,539,610,565,578,568,642,412,531,596,546,562,574,640,401,532,597,551,563,579,640,430,546,596,548,580,564,649,426,531,563,553,574,602,662,445,547,639,584,625,627,697,540,502,452,551,552,554,617,503,514"
 
"nbmouvn2_y=529,570,657,637,576,557,582,608,433,548,568,533,539,560,608,403,517,573,530,527,555,613,421,518,577,417,543,558,613,414,522,623,602,593,628,669,461,563,622,577,591,617,657,457,568,628,571,569,606,684,491,603,645,604,593,633,667,496,587,642,608,584,643,682,499,592,673,643,620,661,691,471,570,718,627,621,660,694,494,377,443,662,643,680,706,483,505,659,695,656,536,714,560,625,698,647,664,682,733,585,642,708,656,657,729,766,654,692,740,720,694,720,771,649,704,741,691,704,607,765,654,734,767,718,767,667,594,560,718,782,703,707,736,763,628,600,737,714,699,618,774,620,675,747,706,693,629,772,617,685,744,694,715,637,757,634,689,752,683,691,722,749,592,624,675,593,695,728,741,594,667,767,732,701,704,777,629,681,772,655,714,737,786,661,705,815,715,775,781,809,679,706,788,739,729,697,694,657,686,749,713,706,723,727,639,676,741,699,661,648,694,596,620,653,614,650,643,677,647,683,687,625,636,636,676,656,653,686,657,639,644,676,658,677,710,666,655,668,697,664,702,766,730,749,722,749,647,693,820,765,749,767,791,658,706,785,722,719,608,777,646,699,770,714,719,745,767,637,681,776,690,705,739,761,616,681,757,698,681,714,749,580,632,748,670,666,710,742,601,646,745,706,714,758,763,622,676,726,692,688,707,755,623,613,594,644,673,630,661,466,568,665,620,625,658,587,420,590,634,605,598,612,660,429,557,631,595,598,612,669,431,563,636,584,580,606,655,451,542,617,600,592,639,651,447,561,649,612,631,670,715,529,598,646,611,615,642,666,524,460,628,580,577,587,595,517"
 
"Jours_X=0,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,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365"
 
"DateMouv=Jeudi 01 Janvier (Jour N° 1),Vendredi 02 Janvier (Jour N° 2),Samedi 03 Janvier (Jour N° 3),Dimanche 04 Janvier (Jour N° 4),Mardi 05 Janvier (Jour N° 5),Mercredi 06 Janvier (Jour N° 6),Jeudi 07 Janvier (Jour N° 7),Vendredi 08 Janvier (Jour N° 8),Dimanche 09 Janvier (Jour N° 9),Lundi 10 Janvier (Jour N° 10),Mardi 11 Janvier (Jour N° 11),Mercredi 12 Janvier (Jour N° 12),Vendredi 13 Janvier (Jour N° 13),Samedi 14 Janvier (Jour N° 14),Dimanche 15 Janvier (Jour N° 15),Lundi 16 Janvier (Jour N° 16),Mercredi 17 Janvier (Jour N° 17),Jeudi 18 Janvier (Jour N° 18),Vendredi 19 Janvier (Jour N° 19),Samedi 20 Janvier (Jour N° 20),Lundi 21 Janvier (Jour N° 21),Mardi 22 Janvier (Jour N° 22),Mercredi 23 Janvier (Jour N° 23),Jeudi 24 Janvier (Jour N° 24),Samedi 25 Janvier (Jour N° 25),Dimanche 26 Janvier (Jour N° 26),Lundi 27 Janvier (Jour N° 27),Mardi 28 Janvier (Jour N° 28),Jeudi 29 Janvier (Jour N° 29),Vendredi 30 Janvier (Jour N° 30),Samedi 31 Janvier (Jour N° 31),Jeudi 01 Février (Jour N° 32),Vendredi 02 Février (Jour N° 33),Samedi 03 Février (Jour N° 34),Lundi 04 Février (Jour N° 35),Mardi 05 Février (Jour N° 36),Mercredi 06 Février (Jour N° 37),Jeudi 07 Février (Jour N° 38),Samedi 08 Février (Jour N° 39),Dimanche 09 Février (Jour N° 40),Lundi 10 Février (Jour N° 41),Mardi 11 Février (Jour N° 42),Jeudi 12 Février (Jour N° 43),Vendredi 13 Février (Jour N° 44),Samedi 14 Février (Jour N° 45),Dimanche 15 Février (Jour N° 46),Mardi 16 Février (Jour N° 47),Mercredi 17 Février (Jour N° 48),Jeudi 18 Février (Jour N° 49),Vendredi 19 Février (Jour N° 50),Dimanche 20 Février (Jour N° 51),Lundi 21 Février (Jour N° 52),Mardi 22 Février (Jour N° 53),Mercredi 23 Février (Jour N° 54),Vendredi 24 Février (Jour N° 55),Samedi 25 Février (Jour N° 56),Dimanche 26 Février (Jour N° 57),Lundi 27 Février (Jour N° 58),Mercredi 28 Février (Jour N° 59),Jeudi 29 Février (Jour N° 60),Dimanche 01 Mars (Jour N° 61),Lundi 02 Mars (Jour N° 62),Mardi 03 Mars (Jour N° 63),Jeudi 04 Mars (Jour N° 64),Vendredi 05 Mars (Jour N° 65),Samedi 06 Mars (Jour N° 66),Dimanche 07 Mars (Jour N° 67),Mardi 08 Mars (Jour N° 68),Mercredi 09 Mars (Jour N° 69),Jeudi 10 Mars (Jour N° 70),Vendredi 11 Mars (Jour N° 71),Dimanche 12 Mars (Jour N° 72),Lundi 13 Mars (Jour N° 73),Mardi 14 Mars (Jour N° 74),Mercredi 15 Mars (Jour N° 75),Vendredi 16 Mars (Jour N° 76),Samedi 17 Mars (Jour N° 77),Dimanche 18 Mars (Jour N° 78),Lundi 19 Mars (Jour N° 79),Mercredi 20 Mars (Jour N° 80),Jeudi 21 Mars (Jour N° 81),Vendredi 22 Mars (Jour N° 82),Samedi 23 Mars (Jour N° 83),Lundi 24 Mars (Jour N° 84),Mardi 25 Mars (Jour N° 85),Mercredi 26 Mars (Jour N° 86),Jeudi 27 Mars (Jour N° 87),Samedi 28 Mars (Jour N° 88),Dimanche 29 Mars (Jour N° 89),Lundi 30 Mars (Jour N° 90),Mardi 31 Mars (Jour N° 91),Mardi 01 Avril (Jour N° 92),Mercredi 02 Avril (Jour N° 93),Jeudi 03 Avril (Jour N° 94),Samedi 04 Avril (Jour N° 95),Dimanche 05 Avril (Jour N° 96),Lundi 06 Avril (Jour N° 97),Mardi 07 Avril (Jour N° 98),Jeudi 08 Avril (Jour N° 99),Vendredi 09 Avril (Jour N° 100),Samedi 10 Avril (Jour N° 101),Dimanche 11 Avril (Jour N° 102),Mardi 12 Avril (Jour N° 103),Mercredi 13 Avril (Jour N° 104),Jeudi 14 Avril (Jour N° 105),Vendredi 15 Avril (Jour N° 106),Dimanche 16 Avril (Jour N° 107),Lundi 17 Avril (Jour N° 108),Mardi 18 Avril (Jour N° 109),Mercredi 19 Avril (Jour N° 110),Vendredi 20 Avril (Jour N° 111),Samedi 21 Avril (Jour N° 112),Dimanche 22 Avril (Jour N° 113),Lundi 23 Avril (Jour N° 114),Mercredi 24 Avril (Jour N° 115),Jeudi 25 Avril (Jour N° 116),Vendredi 26 Avril (Jour N° 117),Samedi 27 Avril (Jour N° 118),Lundi 28 Avril (Jour N° 119),Mardi 29 Avril (Jour N° 120),Mercredi 30 Avril (Jour N° 121),Vendredi 01 Mai (Jour N° 122),Samedi 02 Mai (Jour N° 123),Dimanche 03 Mai (Jour N° 124),Mardi 04 Mai (Jour N° 125),Mercredi 05 Mai (Jour N° 126),Jeudi 06 Mai (Jour N° 127),Vendredi 07 Mai (Jour N° 128),Dimanche 08 Mai (Jour N° 129),Lundi 09 Mai (Jour N° 130),Mardi 10 Mai (Jour N° 131),Mercredi 11 Mai (Jour N° 132),Vendredi 12 Mai (Jour N° 133),Samedi 13 Mai (Jour N° 134),Dimanche 14 Mai (Jour N° 135),Lundi 15 Mai (Jour N° 136),Mercredi 16 Mai (Jour N° 137),Jeudi 17 Mai (Jour N° 138),Vendredi 18 Mai (Jour N° 139),Samedi 19 Mai (Jour N° 140),Lundi 20 Mai (Jour N° 141),Mardi 21 Mai (Jour N° 142),Mercredi 22 Mai (Jour N° 143),Jeudi 23 Mai (Jour N° 144),Samedi 24 Mai (Jour N° 145),Dimanche 25 Mai (Jour N° 146),Lundi 26 Mai (Jour N° 147),Mardi 27 Mai (Jour N° 148),Jeudi 28 Mai (Jour N° 149),Vendredi 29 Mai (Jour N° 150),Samedi 30 Mai (Jour N° 151),Dimanche 31 Mai (Jour N° 152),Dimanche 01 Juin (Jour N° 153),Lundi 02 Juin (Jour N° 154),Mardi 03 Juin (Jour N° 155),Jeudi 04 Juin (Jour N° 156),Vendredi 05 Juin (Jour N° 157),Samedi 06 Juin (Jour N° 158),Dimanche 07 Juin (Jour N° 159),Mardi 08 Juin (Jour N° 160),Mercredi 09 Juin (Jour N° 161),Jeudi 10 Juin (Jour N° 162),Vendredi 11 Juin (Jour N° 163),Dimanche 12 Juin (Jour N° 164),Lundi 13 Juin (Jour N° 165),Mardi 14 Juin (Jour N° 166),Mercredi 15 Juin (Jour N° 167),Vendredi 16 Juin (Jour N° 168),Samedi 17 Juin (Jour N° 169),Dimanche 18 Juin (Jour N° 170),Lundi 19 Juin (Jour N° 171),Mercredi 20 Juin (Jour N° 172),Jeudi 21 Juin (Jour N° 173),Vendredi 22 Juin (Jour N° 174),Samedi 23 Juin (Jour N° 175),Lundi 24 Juin (Jour N° 176),Mardi 25 Juin (Jour N° 177),Mercredi 26 Juin (Jour N° 178),Jeudi 27 Juin (Jour N° 179),Samedi 28 Juin (Jour N° 180),Dimanche 29 Juin (Jour N° 181),Lundi 30 Juin (Jour N° 182),Mercredi 01 Juillet (Jour N° 183),Jeudi 02 Juillet (Jour N° 184),Vendredi 03 Juillet (Jour N° 185),Dimanche 04 Juillet (Jour N° 186),Lundi 05 Juillet (Jour N° 187),Mardi 06 Juillet (Jour N° 188),Mercredi 07 Juillet (Jour N° 189),Vendredi 08 Juillet (Jour N° 190),Samedi 09 Juillet (Jour N° 191),Dimanche 10 Juillet (Jour N° 192),Lundi 11 Juillet (Jour N° 193),Mercredi 12 Juillet (Jour N° 194),Jeudi 13 Juillet (Jour N° 195),Vendredi 14 Juillet (Jour N° 196),Samedi 15 Juillet (Jour N° 197),Lundi 16 Juillet (Jour N° 198),Mardi 17 Juillet (Jour N° 199),Mercredi 18 Juillet (Jour N° 200),Jeudi 19 Juillet (Jour N° 201),Samedi 20 Juillet (Jour N° 202),Dimanche 21 Juillet (Jour N° 203),Lundi 22 Juillet (Jour N° 204),Mardi 23 Juillet (Jour N° 205),Jeudi 24 Juillet (Jour N° 206),Vendredi 25 Juillet (Jour N° 207),Samedi 26 Juillet (Jour N° 208),Dimanche 27 Juillet (Jour N° 209),Mardi 28 Juillet (Jour N° 210),Mercredi 29 Juillet (Jour N° 211),Jeudi 30 Juillet (Jour N° 212),Vendredi 31 Juillet (Jour N° 213),Samedi 01 Août (Jour N° 214),Dimanche 02 Août (Jour N° 215),Lundi 03 Août (Jour N° 216),Mercredi 04 Août (Jour N° 217),Jeudi 05 Août (Jour N° 218),Vendredi 06 Août (Jour N° 219),Samedi 07 Août (Jour N° 220),Lundi 08 Août (Jour N° 221),Mardi 09 Août (Jour N° 222),Mercredi 10 Août (Jour N° 223),Jeudi 11 Août (Jour N° 224),Samedi 12 Août (Jour N° 225),Dimanche 13 Août (Jour N° 226),Lundi 14 Août (Jour N° 227),Mardi 15 Août (Jour N° 228),Jeudi 16 Août (Jour N° 229),Vendredi 17 Août (Jour N° 230),Samedi 18 Août (Jour N° 231),Dimanche 19 Août (Jour N° 232),Mardi 20 Août (Jour N° 233),Mercredi 21 Août (Jour N° 234),Jeudi 22 Août (Jour N° 235),Vendredi 23 Août (Jour N° 236),Dimanche 24 Août (Jour N° 237),Lundi 25 Août (Jour N° 238),Mardi 26 Août (Jour N° 239),Mercredi 27 Août (Jour N° 240),Vendredi 28 Août (Jour N° 241),Samedi 29 Août (Jour N° 242),Dimanche 30 Août (Jour N° 243),Lundi 31 Août (Jour N° 244),Lundi 01 Septembre (Jour N° 245),Mardi 02 Septembre (Jour N° 246),Mercredi 03 Septembre (Jour N° 247),Vendredi 04 Septembre (Jour N° 248),Samedi 05 Septembre (Jour N° 249),Dimanche 06 Septembre (Jour N° 250),Lundi 07 Septembre (Jour N° 251),Mercredi 08 Septembre (Jour N° 252),Jeudi 09 Septembre (Jour N° 253),Vendredi 10 Septembre (Jour N° 254),Samedi 11 Septembre (Jour N° 255),Lundi 12 Septembre (Jour N° 256),Mardi 13 Septembre (Jour N° 257),Mercredi 14 Septembre (Jour N° 258),Jeudi 15 Septembre (Jour N° 259),Samedi 16 Septembre (Jour N° 260),Dimanche 17 Septembre (Jour N° 261),Lundi 18 Septembre (Jour N° 262),Mardi 19 Septembre (Jour N° 263),Jeudi 20 Septembre (Jour N° 264),Vendredi 21 Septembre (Jour N° 265),Samedi 22 Septembre (Jour N° 266),Dimanche 23 Septembre (Jour N° 267),Mardi 24 Septembre (Jour N° 268),Mercredi 25 Septembre (Jour N° 269),Jeudi 26 Septembre (Jour N° 270),Vendredi 27 Septembre (Jour N° 271),Dimanche 28 Septembre (Jour N° 272),Lundi 29 Septembre (Jour N° 273),Mardi 30 Septembre (Jour N° 274),Jeudi 01 Octobre (Jour N° 275),Vendredi 02 Octobre (Jour N° 276),Samedi 03 Octobre (Jour N° 277),Lundi 04 Octobre (Jour N° 278),Mardi 05 Octobre (Jour N° 279),Mercredi 06 Octobre (Jour N° 280),Jeudi 07 Octobre (Jour N° 281),Samedi 08 Octobre (Jour N° 282),Dimanche 09 Octobre (Jour N° 283),Lundi 10 Octobre (Jour N° 284),Mardi 11 Octobre (Jour N° 285),Jeudi 12 Octobre (Jour N° 286),Vendredi 13 Octobre (Jour N° 287),Samedi 14 Octobre (Jour N° 288),Dimanche 15 Octobre (Jour N° 289),Mardi 16 Octobre (Jour N° 290),Mercredi 17 Octobre (Jour N° 291),Jeudi 18 Octobre (Jour N° 292),Vendredi 19 Octobre (Jour N° 293),Dimanche 20 Octobre (Jour N° 294),Lundi 21 Octobre (Jour N° 295),Mardi 22 Octobre (Jour N° 296),Mercredi 23 Octobre (Jour N° 297),Vendredi 24 Octobre (Jour N° 298),Samedi 25 Octobre (Jour N° 299),Dimanche 26 Octobre (Jour N° 300),Lundi 27 Octobre (Jour N° 301),Mercredi 28 Octobre (Jour N° 302),Jeudi 29 Octobre (Jour N° 303),Vendredi 30 Octobre (Jour N° 304),Samedi 31 Octobre (Jour N° 305),Samedi 01 Novembre (Jour N° 306),Dimanche 02 Novembre (Jour N° 307),Lundi 03 Novembre (Jour N° 308),Mercredi 04 Novembre (Jour N° 309),Jeudi 05 Novembre (Jour N° 310),Vendredi 06 Novembre (Jour N° 311),Samedi 07 Novembre (Jour N° 312),Lundi 08 Novembre (Jour N° 313),Mardi 09 Novembre (Jour N° 314),Mercredi 10 Novembre (Jour N° 315),Jeudi 11 Novembre (Jour N° 316),Samedi 12 Novembre (Jour N° 317),Dimanche 13 Novembre (Jour N° 318),Lundi 14 Novembre (Jour N° 319),Mardi 15 Novembre (Jour N° 320),Jeudi 16 Novembre (Jour N° 321),Vendredi 17 Novembre (Jour N° 322),Samedi 18 Novembre (Jour N° 323),Dimanche 19 Novembre (Jour N° 324),Mardi 20 Novembre (Jour N° 325),Mercredi 21 Novembre (Jour N° 326),Jeudi 22 Novembre (Jour N° 327),Vendredi 23 Novembre (Jour N° 328),Dimanche 24 Novembre (Jour N° 329),Lundi 25 Novembre (Jour N° 330),Mardi 26 Novembre (Jour N° 331),Mercredi 27 Novembre (Jour N° 332),Vendredi 28 Novembre (Jour N° 333),Samedi 29 Novembre (Jour N° 334),Dimanche 30 Novembre (Jour N° 335),Mardi 01 Décembre (Jour N° 336),Mercredi 02 Décembre (Jour N° 337),Jeudi 03 Décembre (Jour N° 338),Samedi 04 Décembre (Jour N° 339),Dimanche 05 Décembre (Jour N° 340),Lundi 06 Décembre (Jour N° 341),Mardi 07 Décembre (Jour N° 342),Jeudi 08 Décembre (Jour N° 343),Vendredi 09 Décembre (Jour N° 344),Samedi 10 Décembre (Jour N° 345),Dimanche 11 Décembre (Jour N° 346),Mardi 12 Décembre (Jour N° 347),Mercredi 13 Décembre (Jour N° 348),Jeudi 14 Décembre (Jour N° 349),Vendredi 15 Décembre (Jour N° 350),Dimanche 16 Décembre (Jour N° 351),Lundi 17 Décembre (Jour N° 352),Mardi 18 Décembre (Jour N° 353),Mercredi 19 Décembre (Jour N° 354),Vendredi 20 Décembre (Jour N° 355),Samedi 21 Décembre (Jour N° 356),Dimanche 22 Décembre (Jour N° 357),Lundi 23 Décembre (Jour N° 358),Mercredi 24 Décembre (Jour N° 359),Jeudi 25 Décembre (Jour N° 360),Vendredi 26 Décembre (Jour N° 361),Samedi 27 Décembre (Jour N° 362),Lundi 28 Décembre (Jour N° 363),Mardi 29 Décembre (Jour N° 364),Mercredi 30 Décembre (Jour N° 365),Jeudi 31 Décembre (Jour N° 366)"
 
"MoisMouv_X=Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Janvier,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Février,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Mars,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre"
 
"QuadrillageVertical.length=366"
 
"SerieChoisie=N2"
 
"WMois=Décembre"
 
{xAxis: "01 Décembre"}xAxis: "01 Décembre"__proto__: constructor: ƒ Object()arguments: (...)assign: ƒ assign()caller: (...)create: ƒ create()defineProperties: ƒ defineProperties()defineProperty: ƒ defineProperty()entries: ƒ entries()freeze: ƒ freeze()getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()getOwnPropertyNames: ƒ getOwnPropertyNames()getOwnPropertySymbols: ƒ getOwnPropertySymbols()getPrototypeOf: ƒ getPrototypeOf()is: ƒ is()isExtensible: ƒ isExtensible()isFrozen: ƒ isFrozen()isSealed: ƒ isSealed()keys: ƒ keys()length: 1name: "Object"preventExtensions: ƒ preventExtensions()prototype: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,*…}seal: ƒ seal()setPrototypeOf: ƒ setPrototypeOf()values: ƒ values()__proto__: ƒ ()[[Scopes]]: Scopes[0]hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

Le nouveau code :

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		sepDate = " ", // Séparateur utilisé dans les dates lues dans la BDD.
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		QuadrillageVertical = [],
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	if (jsonData_N2.length > 0)		
	{	
		i = 0;
		SerieChoisie = "";
		WMax = 0;
		WMin = parseInt(jsonData_N2[0][4]);
		while (i < jsonData_N2.length){
			var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
			WNbMouv_N2 = WNbMouv_N2 + parseInt(jsonData_N2[i+1][4]);
			WMax = MinMax(WNbMouv_N2, WMax, "MAX");
			WMin = MinMax(WNbMouv_N2, WMin, "MIN");
			NbMouvN2_Y.push(WNbMouv_N2);
			WJourN2 = WJourN2 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		SerieChoisie = "N2";
	}
	if (jsonData_N1.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N1.length){
			var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
			WNbMouv_N1 = WNbMouv_N1 + parseInt(jsonData_N1[i+1][4]);
			WMax = MinMax(WNbMouv_N1, WMax, "MAX");
			WMin = MinMax(WNbMouv_N1, WMin, "MIN");
			NbMouvN1_Y.push(WNbMouv_N1);
			WJourN1 = WJourN1 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N1.length >= jsonData_N2.length)
		{
			SerieChoisie = "N1";
		}
	}
	if (jsonData_N.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N.length){
			var WNbMouv_N = parseInt(jsonData_N[i][4]);
			WNbMouv_N = WNbMouv_N + parseInt(jsonData_N[i+1][4]);
			WMax = MinMax(WNbMouv_N, WMax, "MAX");
			WMin = MinMax(WNbMouv_N, WMin, "MIN");
			NbMouvN_Y.push(WNbMouv_N);
			WJourN = WJourN + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N.length >= jsonData_N1.length)
		{
			SerieChoisie = "N";
		}
	}
 
console.log(JSON.stringify("nbmouvn_y="+NbMouvN_Y));
console.log(JSON.stringify("nbmouvn1_y="+NbMouvN1_Y));
console.log(JSON.stringify("nbmouvn2_y="+NbMouvN2_Y));
 
// Traitement pour l'axe des X
// Il faut déterminer quelle série va servir pour l'axe des X.
	if (SerieChoisie == "N")
	{
		WNbJourTot = jsonData_N.length;
	}
	if (SerieChoisie == "N1")
	{
		WNbJourTot = jsonData_N1.length;
	}
	if (SerieChoisie == "N2")
	{
		WNbJourTot = jsonData_N2.length;
	}
	i = 0;
	WNumJour = 0;
	while (i <= WNbJourTot - 1)
	{
		if (SerieChoisie == "N")
		{
			var WJour = jsonData_N[i][3].slice(8,10);
			var WMois = jsonData_N[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N[i][3]);
		}
		if (SerieChoisie == "N1")
		{
			var WJour = jsonData_N1[i][3].slice(8,10);
			var WMois = jsonData_N1[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N1[i][3]);
		}
		if (SerieChoisie == "N2")
		{
			var WJour = jsonData_N2[i][3].slice(8,10);
			var WMois = jsonData_N2[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N2[i][3]);
		}
		WMois = MoisEnLettres(WMois);
		QuadrillageVertical.push({
			xAxis: "01" + sepDate + WMois
		});
//			var WDateMouv = WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		var WDateMouv = WJourSemaine + " " + WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		Jours_X.push(WNumJour);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		i=i+2;
	}
 
console.log(JSON.stringify("Jours_X="+Jours_X));
console.log(JSON.stringify("DateMouv="+DateMouv));
console.log(JSON.stringify("MoisMouv_X="+MoisMouv_X));
console.log(JSON.stringify("QuadrillageVertical.length="+QuadrillageVertical.length));
console.log("SerieChoisie="+SerieChoisie);
console.log("WMois="+WMois);
console.log({xAxis: "01" + sepDate + WMois});
 
 
// Récupération du dernier jour de l'année N traité pour placer le DataZoom
	WDerNumJour = WJourN;
	WDebZoom = ((WDerNumJour * 100) / 365) - 25;
	WFinZoom = ((WDerNumJour * 100) / 365) + 15;
	if (WDebZoom < 0)
		{
			WDebZoom = 0; // 0%
			WFinZoom = 33; // 33%
		}
 
	var TJ_Colors = ["#FE0000"];
	var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
	val = ($("#lfpo_tj").width() / 37);
	padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
// options quadrillage vertical
//		var joursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//		var nbrMois = joursMois.length;
 
//		for (mois = 0; mois < nbrMois; mois += 1) {
//		  // sauve données pour quadrillage vertical
//		  QuadrillageVertical.push({
//			  xAxis: "01" + sepDate + MoisEnLettres(mois)
//			});
//		}
//		// supprime 1st pas utile (Pas de graduation pour le tout premier)
//		QuadrillageVertical.shift();
 
	var oMarkLine = {
		silent: true,
		symbol: "none",
		label: {
			show: false
		},
		lineStyle: {
			color: "#CCC",
			type: "dotted",
			width: 1
		},
		animation: true,
		data: QuadrillageVertical
	};		
 
	var TJ_ChartOpt = {
//			color: HG_Colors,
		color: TJ_TAB_Colors,
		title: {
			padding: [20, 5, 0, 5],					// Title space around content
			text: 'Trafic Journalier LFPO',
			left: 'center'							// Distance between grid component and the left side of the container
		},
		grid: {
			show: false,							// Whether to show the grid in rectangular coordinate
//				containlabel: false,
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 80,								// Distance between grid component and the bottom side of the container
			left: 110,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		xAxis: {									// The X axis in Cartesian (rect.) coordinate
			type: 'category',
			name: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10,							// Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: false, // IMPORTANT ! A Mettre à FALSE pour éviter le décalage
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
//				axisTick: {
//					show: true,					 		// Whether to show the axis tick
//					inside: false,
//					alignWithLabel: false,
//					length: 3,
//					interval: 30
//				},
// Affichage du trait repère
axisTick: {
  /**
   * Pour affichage du trait repère sur l'axe X le 1er du mois
   * @param {object} index  - index du tableau de données traité
   * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
   */
  interval: function (index, valeur) {
	// récup du jour
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
	if (1 === jour) {
	  return true;
	}
  }
},
//				axisLabel: {
//					show: true,
//					rotate:0,
//					margin: 10,
//					showMaxLabel: true,
//					showMinLabel: true,
//					padding: padding_array, 			// [haut, droit, bas, gauche]
//					color: 'rgb(050,050,050)',
//					interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
//					formatter: function (params) {
//						return MoisMouv_X[params];
//					}
//				},
	// Affichage du label
axisLabel: {
  align: "center",
  /**
   * Pour affichage du label au milieu du mois, on met 15 pour simplifier
   * @param {object} index  - index du tableau de données traité
   * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
   * Nota : le return true entraine l'appel de la fonction de formatage
   */
  interval: function (index, valeur) {
	// récup du jour
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
	if (15 === jour) {
	  return true;
	}
  },
  formatter: function (valeur, index) {
	// récup du mois pour affichage
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	return valeur ? valeur.split(sepDate)[2] : "";
  }
},
			splitLine: {
				show: false // True => quadrillage sur le graphe
			},				
			splitArea : { 							// Permet de mettre un fond de couleurs différentes
				show: false,
				areaStyle:{
					color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
				}
			},
			data: Jours_X
		},
		yAxis: {
			type: 'value',
			min: WMin,
			max: WMax,
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 20,
				fontWeight: 'bold'
			},
			axisLine: {
				lineStyle: {
					color: 'rgb(165,165,165)',
					width: 2
				}
			},
			axisTick: {
				length: 3,
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			},
			splitLine: {
				lineStyle:{
					width: 1,
					type: "dotted"
				}
			}
		},
////			dataZoom: [
////				{   // This dataZoom component controls x-axis by dafault
////					type: 'slider', // this dataZoom component is dataZoom component of slider
////					showDetail: true,
////					showDataShadow: 'auto',
////					start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
////					end: WFinZoom         // the right is located at 60% - DEFAUT = 33
////				}
////			],
 
  dataZoom: [{
  type: "slider",
	showDetail: true,
	showDataShadow: 'auto',
  realtime: true,
  rangeMode: "percent",      
	start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
	end: WFinZoom,         // the right is located at 60% - DEFAUT = 33
//      startValue: WDebZoom,  
//     endValue: WFinZoom,   
  filterMode: "empty"
},
{
  type: "inside",
  filterMode: 'empty'
}    
],
 
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			padding: [5, 10, 0, 0],	// [haut, droit, bas, gauche]
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
							line: 'Ligne',
							bar: 'Histo.'
						  }
				},
				dataview: {
					show: true,
					title: 'data view'
				},
				dataView: {
					show: false, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					title: 'Données',
					lang: ['Données', 'Retour', 'Rafraîchir'], // Bug sur le bouton rafraichir qui supprime la dernière série !
					optionToContent: function(opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
									 + '<td>N° Jour:</td>'
									 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
									 + '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									 + '<td>' + DateMouv[i] + '</td>'
									 + '<td>' + series[2].data[i] + '</td>'
									 + '<td>' + series[1].data[i] + '</td>'
									 + '<td>' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'vertical',
			borderColor: '#000000',
			borderWidth: 2,
			borderRadius: 10,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
//				bottom: 3,
			left: 3,
//				right: 3,
			top:15
		},
		series : [
			{
				type: 'line',
				name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 2,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				markLine: oMarkLine,
				data: NbMouvN_Y
			},
			{
				type: 'line',
				name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				markLine: oMarkLine,
				data: NbMouvN1_Y
			},
			{
				type: 'line',
				name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				markLine: oMarkLine,
				data: NbMouvN2_Y
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}

Pour le dataZoom, voici une petite image qui illustre bien le souci : on voit que le dataZoom est placé grosso-modo au milieu du graphique, ce qui correspond au mois d'août or il reste toujours sur "janvier, février, mars, etc...)

Pièce jointe 412441

J'espère que tout ça pourra t'aider à me trouver le pourquoi du comment ça ne fonctionne pas et encore une fois, merci pour ta patience.

@NoSmoking :
j'ai essayé tout plein de chose, mais j'en suis toujours à mes 2 soucis : les barres verticales qui n'apparaissent pas et le nom des mois qui ne changent pas quand on bouge le dataZoom.

J'espère que tu pourras prendre un peu de temps pour te pencher sur "moi", car je craque.

Ps : j'ai tenu à jour le message précédent avec le code à jour et le plus possible d'information pour essayer de te "faciliter" les choses, j'espère que ça suffira...

Ps2 : j'ai remarqué que lorsque le dataZoom fait tout l'espace du graphique (donc 365 jours), tous les mois sont correctement affichés ; c'est seulement avec un plus petit zoom que ça pose problème.

Merci d'avance, m'sieur.

YES ! J'ai réussit pour les séparations verticales ! :P

Voici ce que ça donne :

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		sepDate = " ", // Séparateur utilisé dans les dates lues dans la BDD.
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		QuadrillageVertical = [],
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	if (jsonData_N2.length > 0)		
	{	
		i = 0;
		SerieChoisie = "";
		WMax = 0;
		WMin = parseInt(jsonData_N2[0][4]);
		while (i < jsonData_N2.length){
			var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
			WNbMouv_N2 = WNbMouv_N2 + parseInt(jsonData_N2[i+1][4]);
			WMax = MinMax(WNbMouv_N2, WMax, "MAX");
			WMin = MinMax(WNbMouv_N2, WMin, "MIN");
			NbMouvN2_Y.push(WNbMouv_N2);
			WJourN2 = WJourN2 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		SerieChoisie = "N2";
	}
	if (jsonData_N1.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N1.length){
			var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
			WNbMouv_N1 = WNbMouv_N1 + parseInt(jsonData_N1[i+1][4]);
			WMax = MinMax(WNbMouv_N1, WMax, "MAX");
			WMin = MinMax(WNbMouv_N1, WMin, "MIN");
			NbMouvN1_Y.push(WNbMouv_N1);
			WJourN1 = WJourN1 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N1.length >= jsonData_N2.length)
		{
			SerieChoisie = "N1";
		}
	}
	if (jsonData_N.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N.length){
			var WNbMouv_N = parseInt(jsonData_N[i][4]);
			WNbMouv_N = WNbMouv_N + parseInt(jsonData_N[i+1][4]);
			WMax = MinMax(WNbMouv_N, WMax, "MAX");
			WMin = MinMax(WNbMouv_N, WMin, "MIN");
			NbMouvN_Y.push(WNbMouv_N);
			WJourN = WJourN + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N.length >= jsonData_N1.length)
		{
			SerieChoisie = "N";
		}
	}
 
console.log(JSON.stringify("nbmouvn_y="+NbMouvN_Y));
console.log(JSON.stringify("nbmouvn1_y="+NbMouvN1_Y));
console.log(JSON.stringify("nbmouvn2_y="+NbMouvN2_Y));
 
// Traitement pour l'axe des X
// Il faut déterminer quelle série va servir pour l'axe des X.
	if (SerieChoisie == "N")
	{
		WNbJourTot = jsonData_N.length;
	}
	if (SerieChoisie == "N1")
	{
		WNbJourTot = jsonData_N1.length;
	}
	if (SerieChoisie == "N2")
	{
		WNbJourTot = jsonData_N2.length;
	}
	i = 0;
	WNumJour = 0;
	while (i <= WNbJourTot - 1)
	{
		if (SerieChoisie == "N")
		{
			var WJour = jsonData_N[i][3].slice(8,10);
			var WMois = jsonData_N[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N[i][3]);
		}
		if (SerieChoisie == "N1")
		{
			var WJour = jsonData_N1[i][3].slice(8,10);
			var WMois = jsonData_N1[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N1[i][3]);
		}
		if (SerieChoisie == "N2")
		{
			var WJour = jsonData_N2[i][3].slice(8,10);
			var WMois = jsonData_N2[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N2[i][3]);
		}
		WMois = MoisEnLettres(WMois);
		QuadrillageVertical.push({
			xAxis: "01" + sepDate + WMois
		});
//			var WDateMouv = WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		var WDateMouv = WJourSemaine + " " + WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		Jours_X.push(WNumJour);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		i=i+2;
	}
 
console.log(JSON.stringify("Jours_X="+Jours_X));
console.log(JSON.stringify("DateMouv="+DateMouv));
console.log(JSON.stringify("MoisMouv_X="+MoisMouv_X));
console.log(JSON.stringify("QuadrillageVertical="+QuadrillageVertical.length));
console.log("SerieChoisie="+SerieChoisie);
console.log("WMois="+WMois);
console.log({xAxis: "01" + sepDate + WMois});
 
 
// Récupération du dernier jour de l'année N traité pour placer le DataZoom
	WDerNumJour = WJourN;
	WDebZoom = ((WDerNumJour * 100) / 365) - 25;
	WFinZoom = ((WDerNumJour * 100) / 365) + 15;
	if (WDebZoom < 0)
		{
			WDebZoom = 0; // 0%
			WFinZoom = 33; // 33%
		}
 
	var TJ_Colors = ["#FE0000"];
	var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
	val = ($("#lfpo_tj").width() / 37);
	padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
// options quadrillage vertical
//		var joursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//		var nbrMois = joursMois.length;
 
//		for (mois = 0; mois < nbrMois; mois += 1) {
//		  // sauve données pour quadrillage vertical
//		  QuadrillageVertical.push({
//			  xAxis: "01" + sepDate + MoisEnLettres(mois)
//			});
//		}
//		// supprime 1st pas utile (Pas de graduation pour le tout premier)
//		QuadrillageVertical.shift();
 
	var oMarkLine = {
		silent: true,
		symbol: "none",
		label: {
			show: false
		},
		lineStyle: {
			color: "#CCC",
			type: "dotted",
			width: 1
		},
		animation: true,
		data: QuadrillageVertical
	};		
 
	var TJ_ChartOpt = {
//			color: HG_Colors,
		color: TJ_TAB_Colors,
		title: {
			padding: [20, 5, 0, 5],					// Title space around content
			text: 'Trafic Journalier LFPO',
			left: 'center'							// Distance between grid component and the left side of the container
		},
		grid: {
			show: false,							// Whether to show the grid in rectangular coordinate
//				containlabel: false,
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 80,								// Distance between grid component and the bottom side of the container
			left: 110,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		xAxis: {									// The X axis in Cartesian (rect.) coordinate
			type: 'category',
			name: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10,							// Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: false, // IMPORTANT ! A Mettre à FALSE pour éviter le décalage
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
//				axisTick: {
//					show: true,					 		// Whether to show the axis tick
//					inside: false,
//					alignWithLabel: false,
//					length: 3,
//					interval: 30
//				},
// Affichage du trait repère
axisTick: {
  /**
   * Pour affichage du trait repère sur l'axe X le 1er du mois
   * @param {object} index  - index du tableau de données traité
   * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
   */
  interval: function (index, valeur) {
	// récup du jour
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
	if (1 === jour) {
	  return true;
	}
  }
},
//				axisLabel: {
//					show: true,
//					rotate:0,
//					margin: 10,
//					showMaxLabel: true,
//					showMinLabel: true,
//					padding: padding_array, 			// [haut, droit, bas, gauche]
//					color: 'rgb(050,050,050)',
//					interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
//					formatter: function (params) {
//						return MoisMouv_X[params];
//					}
//				},
	// Affichage du label
axisLabel: {
  align: "center",
  /**
   * Pour affichage du label au milieu du mois, on met 15 pour simplifier
   * @param {object} index  - index du tableau de données traité
   * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
   * Nota : le return true entraine l'appel de la fonction de formatage
   */
  interval: function (index, valeur) {
	// récup du jour
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
	if (15 === jour) {
	  return true;
	}
  },
  formatter: function (valeur, index) {
	// récup du mois pour affichage
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	return valeur ? valeur.split(sepDate)[2] : "";
  }
},
			splitLine: {
				show: true, // True => quadrillage sur le graphe
				lineStyle: {
					color: "#CCC",
					type: "dotted",
					width: 1
				},
				  interval: function (index, valeur) {
					// récup du jour
					  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
					var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
					if (1 === jour) {
					  return true;
					}
				  }
			},				
			splitArea : { 							// Permet de mettre un fond de couleurs différentes
				show: false,
				areaStyle:{
					color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
				}
			},
			data: Jours_X
		},
		yAxis: {
			type: 'value',
			min: WMin,
			max: WMax,
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 20,
				fontWeight: 'bold'
			},
			axisLine: {
				lineStyle: {
					color: 'rgb(165,165,165)',
					width: 2
				}
			},
			axisTick: {
				length: 3,
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			},
			splitLine: {
				lineStyle:{
					width: 1,
					type: "dotted"
				}
			}
		},
////			dataZoom: [
////				{   // This dataZoom component controls x-axis by dafault
////					type: 'slider', // this dataZoom component is dataZoom component of slider
////					showDetail: true,
////					showDataShadow: 'auto',
////					start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
////					end: WFinZoom         // the right is located at 60% - DEFAUT = 33
////				}
////			],
 
  dataZoom: [{
	  type: "slider",
		showDetail: true,
		showDataShadow: 'auto',
	  realtime: true,
	  rangeMode: "percent",      
		start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
		end: WFinZoom,         // the right is located at 60% - DEFAUT = 33
//      startValue: WDebZoom,  
 //     endValue: WFinZoom,   
	  filterMode: "empty"
	},
	{
	  type: "inside",
	  filterMode: 'empty'
	}    
  ],
 
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			padding: [5, 10, 0, 0],	// [haut, droit, bas, gauche]
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
							line: 'Ligne',
							bar: 'Histo.'
						  }
				},
				dataview: {
					show: true,
					title: 'data view'
				},
				dataView: {
					show: false, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					title: 'Données',
					lang: ['Données', 'Retour', 'Rafraîchir'], // Bug sur le bouton rafraichir qui supprime la dernière série !
					optionToContent: function(opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
									 + '<td>N° Jour:</td>'
									 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
									 + '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									 + '<td>' + DateMouv[i] + '</td>'
									 + '<td>' + series[2].data[i] + '</td>'
									 + '<td>' + series[1].data[i] + '</td>'
									 + '<td>' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'vertical',
			borderColor: '#000000',
			borderWidth: 2,
			borderRadius: 10,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
//				bottom: 3,
			left: 3,
//				right: 3,
			top:15
		},
		series : [
			{
				type: 'line',
				name: WAnneeN,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 2,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
//					markLine: oMarkLine,
				data: NbMouvN_Y
			},
			{
				type: 'line',
				name: WAnneeN1,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
//					markLine: oMarkLine,
				data: NbMouvN1_Y
			},
			{
				type: 'line',
				name: WAnneeN2,					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
//					markLine: oMarkLine,
				data: NbMouvN2_Y
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}

Par contre, en fait, du coup, je ne comprends pas du tout à quoi sert la partie "oMarkLine" que tu m'as fait ajouté dans les séries de l'axe Y ?

RE RE YES !
J'ai trouvé et je dois avouer que ce n'était pas de ma faute :ptdr::whistle::ptdr:

Dans la partie formatter, index et valeur était inversé.

Dans le code, il y a

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
axisLabel: {
	/**
	* Pour affichage du label au milieu du mois, on met 15 pour simplifier
	* @param {object} index  - index du tableau de données traité
	* @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
	* Nota : le return true entraine l'appel de la fonction de formatage
	*/
	align: "center",
	interval: function (index, valeur) {
	// récup du jour
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
		if (15 === jour) {
			return true;
		}
	},
	formatter: function (valeur, index) {
		// récup du mois pour affichage
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		return valeur ? valeur.split(sepDate)[2] : "";
	}
},

au lieu de

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
axisLabel: {
	/**
	* Pour affichage du label au milieu du mois, on met 15 pour simplifier
	* @param {object} index  - index du tableau de données traité
	* @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
	* Nota : le return true entraine l'appel de la fonction de formatage
	*/
	align: "center",
	interval: function (index, valeur) {
	// récup du jour
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
		if (15 === jour) {
			return true;
		}
	},
	formatter: function (index, valeur) {
		// récup du mois pour affichage
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		return valeur ? valeur.split(sepDate)[2] : "";
	}
},

Fallait le trouver celui-là.
Je passais et repassais devant sans le voir.

Bon, mais je ne vais pas trop la ramener, non plus, car pour les barres verticales, j'avais oublié de mettre le show à true :whistle::ptdr::whistle:

En résumé un grand, grand merci à @NoSmoking pour son aide et sa patience.

Et je passe en "résolu".

Youpi !! tu m'épargnes l'analyse de ton code :ptdr:

Citation:

Dans la partie formatter, index et valeur était inversé.

J'avais noté cette particularité de la lib. dans le passage des paramètres entre les méthodes interval et formatter, c'est une erreur de conception pour moi.

Citation:

Fallait le trouver celui-là.

Il fallait mieux lire le code fourni :mouarf:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 interval: function (index, valeur) { // récup du jour var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15; if (15 === jour) { return true; } }, formatter: function (valeur, index) { // récup du mois pour affichage return valeur ? valeur.split(sepDate)[1] : ""; } },
Citation:

Par contre, en fait, du coup, je ne comprends pas du tout à quoi sert la partie "oMarkLine" que tu m'as fait ajouté dans les séries de l'axe Y ?

Soit on utilise les markLine, soit on utilise splitLine.

Dans ton cas il est effectivement préférable d'utiliser les splitLine plutôt que les markLine si c'est pour particulariser le quadrillage de ton graphe.

xAxis.split line : ligne d'axe du graphique (SplitLine of axis in grid area.) ;
series[i]-line.markLine : marquage de données particulières sur le graphe (Use a line in the chart to illustrate.).

Citation:

Et je passe en "résolu".

:ccool:

18/09/2018, 15h27
Zebulon777

Ok, merci pour ce complément d'informations.
(Et en plus, j'ai appris à paramétrer mes graphes, ce qui ne gâche rien ;) )

1 pièce(s) jointe(s)

Bonjour tout le monde,

je relance le sujet car je me trouve confronter à un truc bizarre : tout fonctionne, mais bizarrement en modifiant la taille de la div d'un des graphes, certaines valeurs de l'axe des Y ne s'affichent plus.

Voici ce que ça donne :

Pièce jointe 418627

Données X et Y pour LFOB :
(C'est normal qu'il y aie autant de valeurs, il y a 1440 valeurs (minutes glissantes) mais on affiche que les tranches horaires en X)

Code:

1
2
3
4
 
TranchesHoraires_X=["00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23"]
 
SommeTH_Y=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,3,3,3,3,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,3,3,3,3,3,4,4,4,4,5,5,4,4,4,4,4,4,5,5,5,6,6,5,5,5,6,6,6,6,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,6,7,7,7,7,7,7,7,7,7,7,7,6,7,7,6,6,6,6,6,5,5,6,6,6,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,6,6,6,5,5,5,5,5,5,5,6,6,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,3,3,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,5,4,4,4,4,5,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,7,7,7,6,6,6,6,6,6,6,6,6,7,7,7,6,6,6,6,6,6,6,7,7,7,7,6,6,6,6,6,5,5,5,5,5,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,4,4,4,4,4,4,4,4,4,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

Mon code :

Code:

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
 
...
...
...
if (jsonData[3].length > 0) {
	update = true;
	if ($("#LIG_HG_LFPB_LFOB").children().length == 0) {
//					addHTML("lfob", ["lfob_hg"], ["12"]); // on se place dans le div row ID="lfob", on crée une div lfob_hg col-md-12
		addHTML("LIG_HG_LFPB_LFOB", ["lfpb_hg_left","lfob_hg_right"], ["6","6"]); // Graph de gauche=LFPB / Graph de droite=LFOB
	}
	createGraph_HG("LFPB", jsonData[3], WdayInit);
} else {
	$("#LIG_HG_LFPB_LFOB").empty();
}
 
if (jsonData[0].length > 0) {
	update = true;
	if ($("#LIG_HG_LFPB_LFOB").children().length == 0) {
// Laligne pour LFOB est déjà ajoutée.					
//					addHTML("lfob", ["lfob_hg"], ["12"]); // on se place dans le div row ID="lfob", on crée une div lfob_hg col-md-12
//					addHTML("LIG_HG_LFPB", ["lfpb_hg_left","lfob_hg_right"], ["12","12"]); // Graph de gauche=LFPB / Graph de droite=LFOB
		addHTML("LIG_HG_LFPB_LFOB", ["lfpb_hg_left","lfob_hg_right"], ["6","6"]); // Graph de gauche=LFPB / Graph de droite=LFOB
	}
	createGraph_HG("LFOB", jsonData[0], WdayInit);
} else {
	$("#LIG_HG_LFPB_LFOB").empty();
}
if (update){
	$(".graph-loading").hide();
	$("#btn-save-pdf").attr("disabled", false);
	$("#div-info").children('.message-p-info').html('');
	$("#div-info").children('.icon-p-info').html('');
} else {
	$(".graph-loading").hide();
	$("#div-info").children('.message-p-info').html('<strong>Certaines données sont indisponibles...</strong>');
	$("#div-info").children('.icon-p-info').html('<i class="fa fa-exclamation-triangle fa-lg"></i>');
}
...
...
...
/*----------------------------------------------------------------------------------------------*/		
/* VARIABLES GLOBALES CONSTANTES POUR LES GRAPHES                                               */		
/*----------------------------------------------------------------------------------------------*/		
 
var WLigneCSV = "TRANCHES HORAIRES;INTERVALES;NB DEPART;NB ARRIVEE;TOTAL" + "\n";
 
var WPaddingTexte_xAxis = 30;
var WPaddingTexte_yAxis = 35;
var P_AxeTextSize = 15;
var P_CoulFond = "#ffffff"; // blanc
var P_TextColor = "#5d6d7e";
var P_Colors = ["#FE0000"];
var P_TAB_Colors = ['#008000', '#ff0000', '#0000FF']; // Couleur des courbes.
 
var P_Debut = {
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true,
};
var P_Title_textStyle =	{
	color: '#000',
	fontStyle: 'normal',
	fontWeight: 'bold',
	fontFamily: 'sans-serif',
	fontSize: 20,
};
var P_Legend = {
	show: true,
	type : 'plain',
	orient: 'vertical',
	borderColor: '#95a5a6',
	borderWidth: 2,
	borderRadius: 7,
	shadowColor: 'rgba(0, 0, 0, 0.5)',
	shadowBlur: 10,
	itemWidth: 25,
	itemHeight: 14,
	left: 3,
	top: 15
};
var P_Toolbox = {									// Cartouche en haut à droite
	show: true,
	padding: [5, 25, 0, 0],	// [haut, droit, bas, gauche]
	itemSize: 17,
	itemGap: 10,
	showTitle: true,		
	feature: {
		restore: {
			show: true,
			title: 'Rechargement'
		},
		magicType: {
			type: ['line', 'bar'],
			title: {
				line: 'Ligne',
				bar: 'Histo.'
			}
		},
		saveAsImage: {title:'Sauvegarde PNG'}
	}
};
var P_XSplitLine = {
	show: true, // True => quadrillage VERTICAL sur le graphe
	lineStyle: {
		color: "#CCC",
		type: "dotted",
		width: 1
	},
};				
var P_XSplitArea = { 							// Permet de mettre un fond de couleurs différentes
	show: false,
	areaStyle:{
		color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
	},
};
var P_XAxisLine = {
	lineStyle: {
		color: 'rgb(105,105,105)',
		width: 2,
		onZero: true,
	}
};
var P_XAxisTick = {
	show: true,					 		// Whether to show the axis tick
	inside: false,
	length: 3
};
var P_YAxisLine = {
	lineStyle: {
		color: 'rgb(165,165,165)',
		width: 2
	}
};
var P_YAxisTick = {
	length: 3,
};
 
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph HEURES GLISSANTES - GRAND                                                              */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_HG(P_Plateforme, jsonData, P_dayInit){
 
	var i = 0,
		WTot_Gen = 0,
		WTot_Dep = 0,
		WTot_Arr = 0,
		TranchesHoraires_X = [],
		SommeTH_Y = [],
		TotalARR_Y = [],
		TotalDEP_Y = [],
		Interv = [];
 
	if (P_Plateforme == "LFPO")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][18]);
				var WTotARR = parseInt(jsonData[i][10]);
				var WTotDEP = parseInt(jsonData[i][17]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				SommeTH_Y.push(WTotal);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfpo_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C1 = echarts.init(document.getElementById("lfpo_hg"));  //
			val = ($("#lfpo_hg").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFPO - " + P_dayInit;
			var P_CoulFondGrpah = "#E1FFE9";
		}
	if (P_Plateforme == "LFPG")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][22]);
				var WTotARR = parseInt(jsonData[i][12]);
				var WTotDEP = parseInt(jsonData[i][21]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				SommeTH_Y.push(WTotal);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfpg_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C2 = echarts.init(document.getElementById("lfpg_hg"));  //
			val = ($("#lfpg_hg").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFPG - " + P_dayInit;
			var P_CoulFondGrpah = "#FFFFD8"; //"#FFF7FC"; //"#FFFFC8";
		}
	if (P_Plateforme == "LFPB")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][16]);
				var WTotARR = parseInt(jsonData[i][9]);
				var WTotDEP = parseInt(jsonData[i][15]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				SommeTH_Y.push(WTotal);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfpb_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C3 = echarts.init(document.getElementById("lfpb_hg_left"));  //
			val = ($("#lfpb_hg_left").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFPB - " + P_dayInit;
			var P_CoulFondGrpah = "#DDF6FF";
		}
 
	if (P_Plateforme == "LFOB")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][6]);
				var WTotARR = parseInt(jsonData[i][4]);
				var WTotDEP = parseInt(jsonData[i][5]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				SommeTH_Y.push(WTotal);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfob_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C4 = echarts.init(document.getElementById("lfob_hg_right"));  //
			val = ($("#lfob_hg_right").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFOB - " + P_dayInit;
			var P_CoulFondGrpah = "#FEEDED";
		}
 
console.log("TranchesHoraires_X="+JSON.stringify( TranchesHoraires_X));
 
	var HG_ChartOpt = {
		backgroundColor: P_CoulFond,
		color: P_TAB_Colors,
 
		P_Debut, // Début du paramètrage des graphique (police, animation, etc...)
//			grid: P_Grid,		// Distance between grid component and the right side of the container
//			toolbox: P_Toolbox,
		legend: P_Legend,
 
		title: {
			padding: [15, 0, 0, 0],					// Title space around content // [haut, droit, bas, gauche]
			left: 'center',							// Distance between grid component and the left side of the container
			text: P_Titre,
			textStyle: P_Title_textStyle
		},
		grid: {
			show: true,							// Whether to show the grid in rectangular coordinate
			backgroundColor: P_CoulFondGrpah, // fond du graphe
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 120,								// Distance between grid component and the bottom side of the container
			left: 150,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		xAxis: {									// The X axis in Cartesian (rect.) coordinate
			axisLine: P_XAxisLine,
			axisTick: P_XAxisTick,
			splitLine: P_XSplitLine,		// True => quadrillage sur le graphe
			splitArea: P_XSplitArea, 	// Permet de mettre un fond de couleurs différentes
			type: 'category',
			name: 'Tranches Horaires (TU)' + '\n\n' + WTexteInfo,
			nameLocation: 'center',
			nameTextStyle: {
				padding: WPaddingTexte_xAxis,
				fontWeight: 'bold',
				color: P_TextColor,
				fontSize : P_AxeTextSize
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: true,
			axisLabel: {
				interval: 59, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
				rotate:0,
				margin: 10,
				showMinLabel: true,
				align : 'left',
				padding: padding_array, 			// [haut, droit, bas, gauche]
				color: 'rgb(050,050,050)'
			},
			data: TranchesHoraires_X
		},
		yAxis: {
			axisLine: P_YAxisLine,
			axisTick: P_YAxisTick,
			type: 'value',
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: WPaddingTexte_yAxis,
				fontWeight: 'bold',
				color: P_TextColor,
				fontSize : P_AxeTextSize
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			padding: [5, 25, 0, 0],	// [haut, droit, bas, gauche]
			itemSize: 17,
			itemGap: 10,
			showTitle: true,		
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
						line: 'Ligne',
						bar: 'Histo.'
					}
				},
				saveAsImage: {
					title:'Sauvegarde PNG'
				},
//            myTool1: {
//                show: true,
//                title: 'Infos masquées',
//                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
//                onclick: function () {
//						if (P_Plateforme == "LFPO")
//							{
//								$('#Info_lfpo_hg').css('display','grid'); // Effacement de la DIV Info_lfpo_hg
//							}
//						if (P_Plateforme == "LFPG")
//							{
//								$('#Info_lfpg_hg').css('display','grid'); // Effacement de la DIV Info_lfpo_hg
//							}
//						if (P_Plateforme == "LFPB")
//							{
//								$('#Info_lfpb_hg').css('display','grid'); // Effacement de la DIV Info_lfpo_hg
//							}
//                }
//            },
				dataView: {
					show: true, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					backgroundColor: '#88ABD9',
					title: 'Données',
					lang: ['Données utilisées pour le graphique...', 'Retour', 'Export CSV'], 
					optionToContent: function(opt) {
//							if (P_Plateforme == "LFPO")
//								{
//									$('#Info_lfpo_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
//							if (P_Plateforme == "LFPG")
//								{
//									$('#Info_lfpg_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
//							if (P_Plateforme == "LFPB")
//								{
//									$('#Info_lfpb_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
//							if (P_Plateforme == "LFOB")
//								{
//									$('#Info_lfob_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var WTable01 = '<div id="ID_Table_Data">';
						WTable01 = WTable01 + '<table class="table-fill">';
						WTable01 = WTable01 + '<thead><tr>';
						WTable01 = WTable01 + '<th class="text-center" style="width:120px">Tranches Horaires</th>'
						WTable01 = WTable01 + '<th class="text-center" style="width:120px">Intervales</th>'
						WTable01 = WTable01 + '<th class="text-center">' + series[1].name + '</th>';
						WTable01 = WTable01 + '<th class="text-center">' + series[2].name + '</th>';
						WTable01 = WTable01 + '<th class="text-center">' + series[0].name + '</th>';
						WTable01 = WTable01 + '</tr></thead>';
						WTable01 = WTable01 + '<tbody class="table-hover">';
						for (var i = 0, l = axisData.length; i < l; i++) {
							WLigneCSV = WLigneCSV + TranchesHoraires_X[i] + ";" + Interv[parseInt(i)] + ";";
							WLigneCSV = WLigneCSV + series[1].data[i] + ";" + series[2].data[i] + ";" + series[0].data[i];
							WLigneCSV = WLigneCSV + "\n";
							WTable01 += '<tr>'
									 + '<td class="text-center">' + TranchesHoraires_X[i] + '</td>'
									 + '<td class="text-center">' + Interv[parseInt(i)] + '</td>'
									 + '<td class="text-center">' + series[1].data[i] + '</td>'
									 + '<td class="text-center">' + series[2].data[i] + '</td>'
									 + '<td class="text-center">' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						WTable01 += '</div></tbody></table>';
						return WTable01;
					},
					contentToOption: function(){ // Va permetrtre de gérer l'exportation en CSV
						var NomCSV = "HeuresGlissantes_" + P_dayInit;
						var Ext = ".CSV";
						var FicCSV = NomCSV + Ext;
// Ecrire le contenu de la variable WLigneCSV dans un fichier
						download(FicCSV, WLigneCSV);
					}
				}
			}
		},
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return Interv[parseInt(params.value) * 60]; // * 60 => on se déplace de 60 dans le tableau de 1440 items
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		series : [
			{
				type: 'line',
				name: 'Nb Total',					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: SommeTH_Y
			},
			{
				type: 'line',
				name: 'Nb Arrivée',					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: TotalARR_Y
			},
			{
				type: 'line',
				name: 'Nb Départ',					// Series name used for displaying in tooltip and filtering with legend
				symbolSize: 7,
				showSymbol: false,					// Whether to show symbol. It would be shown during tooltip hover
				lineStyle: {
					width: 1,
					type: 'solid' //'dotted' / 'dashed'
				},
				smooth: false,						// Permet de lisser ou non les courbes
				data: TotalDEP_Y
			}
		]
	};
 
	if (P_Plateforme == "LFPO")
		{
			HG_Chart_C1.setOption(HG_ChartOpt);
			var HG_Chart_C1 = echarts.init(document.getElementById("lfpo_hg"));  //
		}
	if (P_Plateforme == "LFPG")
		{
			HG_Chart_C2.setOption(HG_ChartOpt);
			var HG_Chart_C2 = echarts.init(document.getElementById("lfpg_hg"));  //
		}
	if (P_Plateforme == "LFPB")
		{
			HG_Chart_C3.setOption(HG_ChartOpt);
			var HG_Chart_C3 = echarts.init(document.getElementById("lfpb_hg_left"));  //
		}
	if (P_Plateforme == "LFOB")
		{
			HG_Chart_C4.setOption(HG_ChartOpt);
			var HG_Chart_C4 = echarts.init(document.getElementById("lfob_hg_right"));  //
		}
}

Merci d'avance.

10/10/2018, 14h41
Zebulon777
Heu...
Va m'faire taper sur les doigts, moué :mouarf:

J'ai trouvé, il suffisait de modifier le padding afin d'augmenter le pas en divisant par 120 au lieu de 60, puisque la zone de graphique est 2 fois plus petite :
Code:

1 2 3 val = ($("#lfob_hg_right").width() / 120); padding_array = [0, 0, 0, val]; // [haut, droit, bas, gauche]