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