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();
});
} |
