forked from schuttelaar/tasksoup
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart_clients.html
38 lines (38 loc) · 1.34 KB
/
chart_clients.html
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
<html>
<head></head>
<body style="overflow: hidden;">
<canvas id="myChartClients" width="130" height="140"></canvas>
<script src="chartjs.js"></script>
<script src="randomColor.min.js"></script>
<script>
// Types comparison
Chart.defaults.global.scaleBeginAtZero = true;
Chart.defaults.global.animation = false;
Chart.defaults.global.tooltipFontSize = 12;
Chart.defaults.global.tooltipTemplate = "<%if (label){%><%=label%>: <%}%><%= value %> hrs";
var ctx = document.getElementById("myChartClients").getContext("2d");
var clients = window.parent.document.querySelectorAll('[data-client]');
var dataObject = {}
for(var i=0; i<clients.length; i++) {
var key = clients[i].getAttribute('data-client');
if (dataObject[key]===undefined) dataObject[key] = {
label: key.charAt(0).toUpperCase() + key.slice(1),
amount: 1,
value: parseInt(clients[i].getAttribute('data-hours')),
color: randomColor({seed: key}),
highlight: randomColor({seed: key, luminosity: 'light'})
}
else {
dataObject[key].amount++;
dataObject[key].value += parseInt(clients[i].getAttribute('data-hours'));
}
}
var data = [];
for(var key in dataObject) {
dataObject[key].label = dataObject[key].label + ' (' + dataObject[key].amount + 'x)';
data.push(dataObject[key]);
}
if (data.length>0) myLineChart = new Chart(ctx).Pie(data);
</script>
</body>
</html>