Skip to content

Instantly share code, notes, and snippets.

@paulera

paulera/burndown.html

Last active July 15, 2021 07:31
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulera/422aa0b7facde7618d4e3dab504df090 to your computer and use it in GitHub Desktop.
Save paulera/422aa0b7facde7618d4e3dab504df090 to your computer and use it in GitHub Desktop.
Download ZIP
Burndown chart built using Chart.js
Raw
burndown.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment