Skip to content

Commit 7a7d05f

Browse files
ratibusratibus
committed
Initial version
0 parents  commit 7a7d05f

1 file changed

Lines changed: 332 additions & 0 deletions

File tree

‎jquery.highcharts.js‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
;
2+
3+
(function($) {
4+
// définition du plugin jQuery
5+
$.fn.highchartTable = function() {
6+
7+
this.each(function() {
8+
var table = $(this);
9+
10+
// Récupération du titre du graphique à partir du caption
11+
var captions = $('caption', table);
12+
var graphTitle = captions.length ? $(captions[0]).text() : '';
13+
14+
var graphContainer;
15+
if ($(table).data('graph-container-before') != 1)
16+
{
17+
// Récupération de la cible d'affichage du graphique
18+
var graphContainerSelector = $(table).data('graph-container');
19+
if (!graphContainerSelector) {
20+
throw "graph-container data attribute is mandatory";
21+
}
22+
23+
if (graphContainerSelector[0] === '#' || graphContainerSelector.indexOf('..')===-1) {
24+
// Absolute selector path
25+
graphContainer = $(graphContainerSelector);
26+
} else {
27+
var referenceNode = table;
28+
var currentGraphContainerSelector = graphContainerSelector;
29+
while (currentGraphContainerSelector.indexOf('..')!==-1)
30+
{
31+
currentGraphContainerSelector = currentGraphContainerSelector.replace(/^.. /, '');
32+
referenceNode = referenceNode.parent();
33+
}
34+
35+
graphContainer = $(currentGraphContainerSelector, referenceNode);
36+
}
37+
if (graphContainer.length !== 1) {
38+
throw "graph-container is not available in this DOM or available multiple times";
39+
}
40+
graphContainer = graphContainer[0];
41+
}
42+
else
43+
{
44+
$(table).before('<div ></div>');
45+
graphContainer = $(table).prev();
46+
graphContainer = graphContainer[0];
47+
}
48+
49+
// Récupération du type de graphique
50+
var globalGraphType = $(table).data('graph-type');
51+
if (!globalGraphType) {
52+
throw "graph-type data attribute is mandatory";
53+
}
54+
if (globalGraphType!=='column' && globalGraphType!=='line' && globalGraphType!=='area' && globalGraphType!=='spline') {
55+
throw "graph-container data attribute must be column, line or area";
56+
}
57+
58+
var stackingType = $(table).data('graph-stacking');
59+
if (!stackingType)
60+
{
61+
stackingType = 'normal';
62+
}
63+
64+
var isGraphInverted = $(table).data('graph-inverted') == 1;
65+
66+
// Récupération des titres des séries de données à afficher sur le graphique
67+
var ths = $('thead th', table);
68+
var columns = [];
69+
var vlines = [];
70+
var graphIsStacked = false;
71+
ths.each(function(indexTh, th) {
72+
var columnScale = $(th).data('graph-value-scale');
73+
74+
var serieGraphType = $(th).data('graph-type');
75+
if(serieGraphType!=='column' && serieGraphType!=='line' && serieGraphType!=='area' && serieGraphType!=='spline')
76+
{
77+
serieGraphType = globalGraphType;
78+
}
79+
80+
var serieStackGroup = $(th).data('graph-stack-group');
81+
if(serieStackGroup) {
82+
graphIsStacked = true;
83+
}
84+
85+
if ($(th).data('graph-vline-x') == undefined) {
86+
columns[indexTh] = {
87+
libelle: $(th).text(),
88+
scale: columnScale != undefined ? parseFloat(columnScale) : 1,
89+
graphType: serieGraphType,
90+
stack: serieStackGroup,
91+
color: $(th).data('graph-color'),
92+
visible: !$(th).data('graph-hidden'),
93+
unit: $(th).data('graph-unit'),
94+
yAxis: $(th).data('graph-yaxis') != undefined ? $(th).data('graph-yaxis') : 0,
95+
dashStyle: $(th).data('graph-dash-style') || 'solid'
96+
};
97+
} else {
98+
vlines[indexTh] = {
99+
libelle: $(th).text(),
100+
x: $(th).data('graph-vline-x'),
101+
height: $(th).data('graph-vline-height'),
102+
color: $(th).data('graph-color'),
103+
visible: !$(th).data('graph-hidden'),
104+
name: $(th).data('graph-vline-name'),
105+
yAxis: $(th).data('graph-yaxis') != undefined ? $(th).data('graph-yaxis') : 0,
106+
dashStyle: $(th).data('graph-dash-style') || 'solid'
107+
};
108+
}
109+
});
110+
111+
var series = [];
112+
$(columns).each(function(indexColumn, column) {
113+
if(indexColumn!=0) {
114+
series.push({
115+
name: column.libelle + (column.unit ? ' (' + column.unit + ')' : ''),
116+
data: [],
117+
type: column.graphType,
118+
stack: column.stack,
119+
color: column.color,
120+
visible: column.visible,
121+
yAxis: column.yAxis,
122+
dashStyle: column.dashStyle,
123+
marker: {
124+
enabled: false
125+
},
126+
dataLabels: {
127+
x: isGraphInverted ? 15 : 0,
128+
enabled: $(table).data('graph-datalabels-enabled') == 1,
129+
align: $(table).data('graph-datalabels-align') != undefined ? $(table).data('graph-datalabels-align') : 'center'
130+
}
131+
});
132+
}
133+
});
134+
135+
$(vlines).each(function(indexColumn, vline) {
136+
if (vline != undefined) {
137+
series.push({
138+
name: vline.libelle,
139+
data: [{x: vline.x, y:0, name: vline.name}, {x:vline.x, y:vline.height, name: vline.name}],
140+
type: 'spline',
141+
color: vline.color,
142+
visible: vline.visible,
143+
marker: {
144+
enabled: false
145+
}
146+
});
147+
}
148+
});
149+
150+
var xValues = [];
151+
var rows = $('tbody:first tr', table);
152+
rows.each(function(indexRow, row) {
153+
if (!!$(row).data('graph-skip'))
154+
{
155+
return;
156+
}
157+
158+
var tds = $('td', row);
159+
tds.each(function(indexTd, td) {
160+
var cellValue;
161+
if (indexTd==0) {
162+
cellValue = $(td).text();
163+
xValues.push(cellValue);
164+
} else {
165+
var rawCellValue = $(td).text();
166+
if (rawCellValue.length==0) {
167+
series[indexTd-1].data.push(null);
168+
} else {
169+
var cleanedCellValue = rawCellValue.replace(/ /g, '').replace(/,/, '.');
170+
cellValue = Math.round(parseFloat(cleanedCellValue) * columns[indexTd].scale * 100) / 100;
171+
172+
var dataGraphX = $(td).data('graph-x');
173+
174+
if ($(table).data('graph-xaxis-type') == 'datetime') {
175+
dataGraphX = $('td', $(row)).first().text();
176+
var dateInfos = dataGraphX.split('-');
177+
dataGraphX = new Date(parseInt(dateInfos[0], 10), parseInt(dateInfos[1] -1, 10), parseInt(dateInfos[2])+1, 10).getTime();
178+
}
179+
180+
series[indexTd-1].data.push({
181+
name: $(td).data('graph-name') != undefined ? $(td).data('graph-name') : rawCellValue,
182+
y: cellValue,
183+
x: dataGraphX, //undefined if no x defined in table
184+
events: {
185+
click: function () {
186+
var callback = $(table).data('graph-point-callback');
187+
if (callback == undefined) {
188+
return;
189+
}
190+
191+
var infosCallback = callback.split('.');
192+
var callable = window[infosCallback[0]];
193+
for(var i = 1, infosCallbackLength = infosCallback.length; i < infosCallbackLength; i++) {
194+
callable = callable[infosCallback[i]];
195+
}
196+
callable(this);
197+
}
198+
}
199+
});
200+
201+
}
202+
}
203+
});
204+
205+
});
206+
207+
var yAxisConfig = [];
208+
yAxisConfig.push({
209+
title: {
210+
text: $(table).data('graph-yaxis-1-title-text') != undefined ? $(table).data('graph-yaxis-1-title-text') : "Valeur"
211+
},
212+
max: $(table).data('graph-yaxis-1-max') || null,
213+
min: $(table).data('graph-yaxis-1-min') || null,
214+
tickInterval: $(table).data('graph-yaxis-1-tick-interval') || null
215+
});
216+
217+
if ($(table).data('graph-yaxis-2-title-text') != undefined)
218+
{
219+
yAxisConfig.push({
220+
title: {
221+
text: $(table).data('graph-yaxis-2-title-text') != undefined ? $(table).data('graph-yaxis-2-title-text') : "Valeur"
222+
},
223+
reversed: $(table).data('graph-yaxis-2-reversed') == '1',
224+
opposite: $(table).data('graph-yaxis-2-opposite') == '1',
225+
max: $(table).data('graph-yaxis-2-max') || null,
226+
min: $(table).data('graph-yaxis-2-min') || null,
227+
tickInterval: $(table).data('graph-yaxis-2-tick-interval') || null
228+
});
229+
}
230+
231+
var defaultColors = [
232+
'#4572A7', //bleu
233+
'#AA4643', //rouge
234+
'#89A54E', //vert
235+
'#80699B', //mauve
236+
'#3D96AE', //bleu clair
237+
'#DB843D', //orange
238+
'#92A8CD', //bleu encore plus clair
239+
'#A47D7C', //marron
240+
'#B5CA92' //vert clair
241+
];
242+
var colors = [];
243+
244+
for(var i=0; i<9; i++) {
245+
var dataname = 'graph-color-' + (i+1);
246+
colors.push($(table).data(dataname) != undefined ? $(table).data(dataname) : defaultColors[i]);
247+
}
248+
249+
// Configuration de HighChart
250+
var highChartConfig = {
251+
colors: colors,
252+
chart: {
253+
renderTo: graphContainer,
254+
inverted: isGraphInverted
255+
},
256+
title: {
257+
text: graphTitle
258+
},
259+
legend: {
260+
enabled: $(table).data('graph-legend-disabled') != '1',
261+
layout: $(table).data('graph-legend-layout') != undefined ? $(table).data('graph-legend-layout') : 'horizontal',
262+
symbolWidth: $(table).data('graph-legend-width') || 30
263+
},
264+
xAxis: {
265+
categories: ($(table).data('graph-xaxis-type') != 'datetime') ? xValues : undefined,
266+
type: ($(table).data('graph-xaxis-type') == 'datetime') ? 'datetime' : undefined,
267+
showLastLabel: true,
268+
dateTimeLabelFormats : { //par défaut on affiche numéro jour mois sur les graphs datetime
269+
second: '%e. %b',
270+
minute: '%e. %b',
271+
hour: '%e. %b',
272+
day: '%e. %b',
273+
week: '%e. %b',
274+
month: '%e. %b',
275+
year: '%e. %b'
276+
},
277+
labels:
278+
{
279+
rotation: $(table).data('graph-xaxis-rotation') || 0,
280+
align: $(table).data('graph-xaxis-align') || 'center'
281+
}
282+
},
283+
yAxis: yAxisConfig,
284+
tooltip: {
285+
formatter: function() {
286+
if ($(table).data('graph-xaxis-type') == 'datetime')
287+
{
288+
return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%e. %b', this.x) +' : '+ this.y;
289+
}
290+
else
291+
{
292+
return '<strong>' + this.series.name + '</strong> : ' + this.point.name;
293+
}
294+
}
295+
},
296+
credits: {
297+
enabled: false
298+
},
299+
plotOptions: {
300+
line: {
301+
dataLabels: {
302+
enabled: true
303+
}},
304+
305+
series: {
306+
animation: false,
307+
stickyTracking : false,
308+
stacking: graphIsStacked ? stackingType : null
309+
}
310+
},
311+
series: series,
312+
exporting: {
313+
filename: graphTitle.replace(/ /g, '_'),
314+
buttons: {
315+
exportButton: {
316+
menuItems: null,
317+
onclick: function() {
318+
this.exportChart();
319+
}
320+
}
321+
}
322+
}
323+
};
324+
325+
// Affichage du graphique
326+
new Highcharts.Chart(highChartConfig);
327+
328+
// Permettre le chaînage par jQuery
329+
return this;
330+
});
331+
};
332+
})(jQuery);

0 commit comments

Comments
 (0)