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
|
<html>
<!-- See live at https://codepen.io/paulera/pen/ejGKEr -->
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
/**
* Sum elements of an array up to the index provided.
*/
function sumArrayUpTo(arrData, index) {
var total = 0;
for (var i = 0; i <= index; i++) {
if (arrData.length > i) {
total += arrData[i];
}
}
return total;
}
function showBurnDown(elementId, burndownData, scopeChange = []) {
var speedCanvas = document.getElementById(elementId);
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.global.defaultFontSize = 14;
const totalHoursInSprint = burndownData[0];
const idealHoursPerDay = totalHoursInSprint / 9;
i = 0;
var speedData = {
labels: [ "Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7", "Day 8", "Day 9", "Day 10"],
datasets: [
{
label: "Burndown",
data: burndownData,
fill: false,
borderColor: "#EE6868",
backgroundColor: "#EE6868",
lineTension: 0,
},
{
label: "Ideal",
borderColor: "#6C8893",
backgroundColor: "#6C8893",
lineTension: 0,
borderDash: [5, 5],
fill: false,
data: [
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 0)), // 1
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 1)), // 2
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 2)), // 3
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 3)), // 4
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 4)), // 5
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 5)), // 6
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 6)), // 7
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 7)), // 8
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 8)), // 9
Math.round(totalHoursInSprint - (idealHoursPerDay * i++) + sumArrayUpTo(scopeChange, 9)) // 10
]
},
]
};
var chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: Math.round(burndownData[0] * 1.1)
}
}]
}
};
var lineChart = new Chart(speedCanvas, {
type: 'line',
data: speedData,
options: chartOptions
});
}
</script>
</head>
<body>
<div style="width:800px;"><canvas id="burndown43"></canvas></div>
<script>
showBurnDown (
"burndown43",
[200, 160, 160, 140, 90, 90, 80, 50, 30, 8], // burndown data
[0, 0, 0, 0, 0, 32, 0, 0, 0, 0] // scope change
);
</script>
</body>
</html>
|
