1
|
|
|
var reportChart = null; |
2
|
|
|
|
3
|
|
|
function formatMoney(number, decimals, decPoint, thousandsSep, currencySymbol) |
4
|
|
|
{ |
5
|
|
|
// * example: formatMoney(1234.56, 2, ',', ' '); |
6
|
|
|
// * return: '1 234,56' |
7
|
|
|
number = (number + '').replace(',', '').replace(' ', ''); |
8
|
|
|
var n = !isFinite(+number) ? 0 : +number, |
9
|
|
|
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), |
10
|
|
|
sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep, |
11
|
|
|
dec = (typeof decPoint === 'undefined') ? '.' : decPoint, |
12
|
|
|
s = '', |
13
|
|
|
toFixedFix = function (n, prec) { |
14
|
|
|
var k = Math.pow(10, prec); |
15
|
|
|
return '' + Math.round(n * k) / k; |
16
|
|
|
}; |
17
|
|
|
// Fix for IE parseFloat(0.55).toFixed(0) = 0; |
18
|
|
|
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); |
19
|
|
|
if (s[0].length > 3) { |
20
|
|
|
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); |
21
|
|
|
} |
22
|
|
|
if ((s[1] || '').length < prec) { |
23
|
|
|
s[1] = s[1] || ''; |
24
|
|
|
s[1] += new Array(prec - s[1].length + 1).join('0'); |
25
|
|
|
} |
26
|
|
|
return currencySymbol + s.join(dec); |
27
|
|
|
} |
28
|
|
|
|
29
|
|
|
function generateChart(ctx, type, labels, values, options) |
30
|
|
|
{ |
31
|
|
|
var datasetOptions = $.extend({ |
32
|
|
|
data: values |
33
|
|
|
}, options.dataset); |
34
|
|
|
|
35
|
|
|
var chartOptions = { |
36
|
|
|
type: type, |
37
|
|
|
data: { |
38
|
|
|
labels: labels, |
39
|
|
|
datasets: [datasetOptions] |
40
|
|
|
}, |
41
|
|
|
options: { |
42
|
|
|
maintainAspectRatio: false, |
43
|
|
|
legend: { |
44
|
|
|
display: false |
45
|
|
|
}, |
46
|
|
|
tooltips: { |
47
|
|
|
callbacks: { |
48
|
|
|
label: function (tooltipItem, chart) { |
49
|
|
|
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || (chart.labels[tooltipItem.index] || ''); |
50
|
|
|
var datasetValue = chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; |
51
|
|
|
|
52
|
|
|
if (options.isMoneyValue !== undefined && options.isMoneyValue === true) { |
53
|
|
|
return datasetLabel + ': ' + formatMoney(datasetValue, 2, '.', ',', '$'); |
54
|
|
|
} |
55
|
|
|
|
56
|
|
|
return datasetLabel + datasetValue; |
57
|
|
|
} |
58
|
|
|
} |
59
|
|
|
} |
60
|
|
|
} |
61
|
|
|
}; |
62
|
|
|
|
63
|
|
|
if (type !== 'pie' && type !== 'radar' && type !== 'polarArea' && type !== 'doughnut') { |
64
|
|
|
chartOptions.options.scales = { |
65
|
|
|
yAxes: [{ |
66
|
|
|
ticks: { |
67
|
|
|
beginAtZero: true, |
68
|
|
|
userCallback: function (value, index, values) { |
|
|
|
|
69
|
|
|
if (options.isMoneyValue !== undefined && options.isMoneyValue === true) { |
70
|
|
|
return formatMoney(value, 2, '.', ',', '$'); |
71
|
|
|
} |
72
|
|
|
|
73
|
|
|
return value; |
74
|
|
|
} |
75
|
|
|
} |
76
|
|
|
}] |
77
|
|
|
}; |
78
|
|
|
} |
79
|
|
|
|
80
|
|
|
console.log(chartOptions); |
|
|
|
|
81
|
|
|
reportChart = new Chart(ctx, chartOptions); |
|
|
|
|
82
|
|
|
} |
83
|
|
|
|
84
|
|
|
function generateLineChart(ctx, labels, values, options) |
85
|
|
|
{ |
86
|
|
|
options = $.extend(options, { |
87
|
|
|
dataset: { |
88
|
|
|
backgroundColor: 'rgba(60,122,167,0.6)', |
89
|
|
|
borderColor: 'rgba(44,79,110,0.95)', |
90
|
|
|
borderWidth: 1 |
91
|
|
|
} |
92
|
|
|
}); |
93
|
|
|
|
94
|
|
|
generateChart(ctx, 'line', labels, values, options); |
95
|
|
|
} |
96
|
|
|
|
97
|
|
|
function generateBarChart(ctx, labels, values, options) |
98
|
|
|
{ |
99
|
|
|
options = $.extend(options, { |
100
|
|
|
dataset: { |
101
|
|
|
backgroundColor: 'rgba(60,122,167,0.6)', |
102
|
|
|
borderColor: 'rgba(44,79,110,0.95)', |
103
|
|
|
borderWidth: 1 |
104
|
|
|
} |
105
|
|
|
}); |
106
|
|
|
|
107
|
|
|
generateChart(ctx, 'bar', labels, values, options); |
108
|
|
|
} |
109
|
|
|
|
110
|
|
|
function generateRadarChart(ctx, labels, values, options) |
111
|
|
|
{ |
112
|
|
|
options = $.extend(options, { |
113
|
|
|
dataset: { |
114
|
|
|
backgroundColor: 'rgba(60,122,167,0.6)', |
115
|
|
|
borderColor: 'rgba(44,79,110,0.95)', |
116
|
|
|
borderWidth: 1 |
117
|
|
|
} |
118
|
|
|
}); |
119
|
|
|
|
120
|
|
|
generateChart(ctx, 'radar', labels, values, options); |
121
|
|
|
} |
122
|
|
|
|
123
|
|
|
function generatePolarChart(ctx, labels, values, options) |
124
|
|
|
{ |
125
|
|
|
options = $.extend(options, { |
126
|
|
|
dataset: { |
127
|
|
|
backgroundColor: 'rgba(60,122,167,0.6)', |
128
|
|
|
borderColor: 'rgba(44,79,110,0.95)', |
129
|
|
|
borderWidth: 1 |
130
|
|
|
} |
131
|
|
|
}); |
132
|
|
|
|
133
|
|
|
generateChart(ctx, 'polarArea', labels, values, options); |
134
|
|
|
} |
135
|
|
|
|
136
|
|
|
function generatePieChart(ctx, labels, values, options) |
137
|
|
|
{ |
138
|
|
|
options = $.extend(options, { |
139
|
|
|
dataset: generateRadialData(values) |
140
|
|
|
}); |
141
|
|
|
|
142
|
|
|
generateChart(ctx, 'pie', labels, values, options); |
143
|
|
|
} |
144
|
|
|
|
145
|
|
|
function generateDoughnutChart(ctx, labels, values, options) |
146
|
|
|
{ |
147
|
|
|
options = $.extend(options, { |
148
|
|
|
dataset: generateRadialData(values) |
149
|
|
|
}); |
150
|
|
|
|
151
|
|
|
generateChart(ctx, 'doughnut', labels, values, options); |
152
|
|
|
} |
153
|
|
|
|
154
|
|
|
function generateRadialData(values) |
155
|
|
|
{ |
156
|
|
|
var backgroundColors = ["#1abb9c", "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", "#bdbdbd", "#AA66CC", "#33B5E5"]; |
157
|
|
|
var borderColors = ["#37a37e", "#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774", "#acacac", "#9933CC", "#0099CC"]; |
158
|
|
|
var datasetConfiguration = { |
159
|
|
|
backgroundColor: [], |
160
|
|
|
borderColor: [], |
161
|
|
|
borderWidth: 1 |
162
|
|
|
}; |
163
|
|
|
|
164
|
|
|
$.each(values, function(i) { |
165
|
|
|
datasetConfiguration.backgroundColor.push(backgroundColors[i%9]); |
166
|
|
|
datasetConfiguration.borderColor.push(borderColors[i%9]); |
167
|
|
|
}); |
168
|
|
|
|
169
|
|
|
return datasetConfiguration; |
170
|
|
|
} |
171
|
|
|
|
172
|
|
|
function initChart($reportCanvas) |
173
|
|
|
{ |
174
|
|
|
var reportCode = $reportCanvas.attr("id"); |
175
|
|
|
var chartType = $reportCanvas.data("type"); |
176
|
|
|
var labels = $reportCanvas.data("labels").split(";"); |
177
|
|
|
var values = $reportCanvas.data("values").split(";"); |
178
|
|
|
var options = $.extend($reportCanvas.data('options'), { |
179
|
|
|
dataset: {} |
180
|
|
|
}); |
181
|
|
|
|
182
|
|
|
var ctx = document.getElementById(reportCode).getContext("2d"); |
183
|
|
|
|
184
|
|
|
switch(chartType) { |
185
|
|
|
case "line": generateLineChart(ctx, labels, values, options); break; |
186
|
|
|
case "bar": generateBarChart(ctx, labels, values, options); break; |
187
|
|
|
case "radar": generateRadarChart(ctx, labels, values, options); break; |
188
|
|
|
case "polar": generatePolarChart(ctx, labels, values, options); break; |
189
|
|
|
case "pie": generatePieChart(ctx, labels, values, options); break; |
190
|
|
|
case "doughnut": generateDoughnutChart(ctx, labels, values, options); break; |
191
|
|
|
} |
192
|
|
|
} |
193
|
|
|
|
194
|
|
|
window.addEventListener("load",function() |
195
|
|
|
{ |
196
|
|
|
$.each($("canvas"), function() { |
197
|
|
|
initChart($(this)); |
198
|
|
|
}); |
199
|
|
|
}); |
200
|
|
|
|
This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.