Discussion :

[stomerfull]

bonjour à tous

J'utilise la librairie highchart pour afficher des graphes

voici le code que j'ai utilisé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
function lineChart(libelleFlux, categories, legitimate, ads, spams, _step) {
	$(document).ready(function() {
 
		var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
		chart = new Highcharts.Chart({
			chart: {
				//Id de la div qui va recevoir le graphique
				renderTo: 'barChart',
				//Type du graphique : histogramme
				type: 'spline'
			},
			//Titre du graphique
			title: {
				text: libelleFlux
			},
			//On supprime les "crédits"
			credits : {
				text: ''
			},
			//Quels libellés pour la barre des X
			//Pas chargé pour le moment, se fera plus tard
			xAxis: {
				categories: [],
				endOnTick : true,
				labels: {
					rotation: -45,
					step : _step,
					align: 'right'
				}
			},
			//Quels données pour les Y
			yAxis: {
				//A combien commenceront les Y
				min: 0,
				//Quel libellé sur l'axe des Y
				title: {
					text: "",
				},
				//Faut-il mettre un libellé au dessus des barres ?
				stackLabels: {
					//Oui
					enabled: true,
					//Quel style ?
					style: {
						fontWeight: 'bold',
						color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
					}
				}
			},
			//Faut-il mettre une légende ?
			legend: {
				//Quel alignement ?
				align: 'center',
				//En haut, en bas ?
				verticalAlign: 'bottom',
				//Quelle couleur ?
				backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
				//Quelles couleur de bordure ?
				borderColor: '#CCC',
				//Quelle épaisseur ?
				borderWidth: 0,
				shadow: false
			},
			//Au survol de la barre, que faut-il afficher ?
			tooltip: {
				enable : false,
				formatter: function() {
					return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
				}
			},
			plotOptions: {
				//Peut-on sélectionner un élement d'une barre ?
				allowPointSelect : false,
				line: {
                    dataLabels: {
                        enabled: true,
	                    //Ne pas afficher la valeur si c'est "0".
	                    formatter: function() {
	                        return (this.y== 0 ? '' : this.y);
	                    },
                    },
                    enableMouseTracking: false
                },
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 5,
                                lineWidth: 1
                            }
                        }
                    },
                }
			},
			//Quelles données ?
			//pas chargées ici
			series: []
		});
		var categoriesTab = categories.split(";");
		var categoriesArray = new Array();
		for(var i = 0; i< categoriesTab.length;i++)
			{
			categoriesArray.push(categoriesTab[i]);
			}
		chart.xAxis[0].setCategories(categoriesArray);
 
		var spamsTab = spams.split(";");
		var spamsArray = new Array();
		for(var i = 0; i< spamsTab.length;i++)
		{
			var dataTmp = {};
			dataTmp.x = i;
			dataTmp.y = parseInt(spamsTab[i]);
			spamsArray.push(dataTmp);
		}
		chart.addSeries({name: "spams", data: spamsArray, color : '#4572A7'});
		var legitimateTab = legitimate.split(";");
		var legitimateArray = new Array();
		for(var i = 0; i< legitimateTab.length;i++)
		{
			var dataTmp = {};
			dataTmp.x = i;
			dataTmp.y = parseInt(legitimateTab[i]);
			legitimateArray.push(dataTmp);
		}
		chart.addSeries({name: "legitimates", data: legitimateArray, color : '#89A54E'});
		chart.redraw();
	});
}

Les données sont reçu comme suit :

Code :

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

lineChart("titre", "7-2012;7-2012;7-2012;8-2012;1-2013;", 10;11;12;13;14","5;6;7;8","20;10;15;5;12",1);

Le Probleme c'est la date 7-2012 qui se repete 3 fois
ce que je veux faire c'est de fixer l'intervalle des dates à 1mois et je ne veux afficher qu'une seule fois la date 07-2012

J'ai essayer avec

Code :

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

1
2
3
4
5
6
7
 
"plotOptions": {
            "line": {
                "pointInterval": 86400000,
                "pointStart": 1282408923000
            }
        },

mais aucun résultat et il me semble que les éléments affichés sur l'axe des X correspond au point affiché sur le graphe

J'ai tester avec un array_unique en javascript le tableau est bien filtré mais sur l'axe des X jai encore 5 valeurs avec 2 valeurs (nombre)(qui n'existe pas dans mes données) et les 3 autres les dates (7-2012;8-2012;1-2013)


Merci d'avance pour votre aide

[stomerfull]

j'ai trouvé la solution en :

Séparant les options avec la création du chart et en spécifiant l'intervalle des dates sur laxe des X

Code :

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

1
2
3
4
5
6
7
 var options = {
     xAxis: {
					type: 'datetime',
 
	//L'intervalle d'affichage des dates sur l'axe des X
					tickInterval: 4 * 7 * 24 * 3600 * 1000, // one month
 };

Ensuite

je ne crée la graphe d'au status success de mon appel ajax :

Code :

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

1
2
 
  chart = new Highcharts.Chart(options);

Merci