2012-05-23 11:55:05 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
|
|
|
|
<title>Burndown App</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
2012-05-23 14:45:03 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="css/rickshaw.css">
|
2012-05-23 11:55:05 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
2012-05-23 14:45:03 +00:00
|
|
|
|
|
|
|
|
<script src="js/d3.min.js"></script>
|
|
|
|
|
<script src="js/d3.layout.min.js"></script>
|
|
|
|
|
<script src="js/rickshaw.min.js"></script>
|
2012-05-23 11:55:05 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header class="navbar blue blue2 navbar-fixed-top">
|
|
|
|
|
<div class="navbar-inner">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<ul class="nav pull-left">
|
|
|
|
|
<li><a><i class="icon-white icon-fire"></i> Burndown App</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="nav pull-right">
|
2012-05-23 15:17:39 +00:00
|
|
|
<li><a><i class="icon-white icon-book"></i> <%= @project %></a></li>
|
2012-05-23 11:55:05 +00:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<section class="container-fluid pad40">
|
|
|
|
|
<section class="row-fluid">
|
|
|
|
|
<div class="span2 sideBar">
|
|
|
|
|
<br>
|
|
|
|
|
<ul>
|
|
|
|
|
<li class="active">
|
|
|
|
|
<figure>
|
2012-05-23 14:45:03 +00:00
|
|
|
<a href="/burndown"><i class="icon-signal"></i> Burndown Chart</a>
|
2012-05-23 11:55:05 +00:00
|
|
|
</figure>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<figure>
|
2012-05-23 14:45:03 +00:00
|
|
|
<a href="/issues"><i class="icon-tasks"></i> Issues</a>
|
2012-05-23 11:55:05 +00:00
|
|
|
</figure>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<section class="span10 content borBox">
|
|
|
|
|
<div class="row-fluid">
|
|
|
|
|
<div class="page-header">
|
|
|
|
|
<h1>Burndown chart <small>showing actual vs. ideal velocity on each day</small></h1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<div class="row-fluid">
|
|
|
|
|
<div class="span12">
|
2012-05-23 14:45:03 +00:00
|
|
|
<div id="chart"></div>
|
2012-05-23 11:55:05 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
2012-05-23 14:45:03 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
(function() {
|
|
|
|
|
var ideal = [], actual = [], i = 0;
|
|
|
|
|
<% for day, data of @days: %>
|
|
|
|
|
ideal.push({ 'x': <%= day / 1000 %>, 'y': <%= data['ideal'] %> });
|
|
|
|
|
actual.push({ 'x': <%= day / 1000 %>, 'y': <%= data['actual'] %> });
|
|
|
|
|
i++;
|
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
// The line graph.
|
|
|
|
|
var graph = new Rickshaw.Graph({
|
|
|
|
|
element: document.querySelector("#chart"),
|
|
|
|
|
height: 600,
|
|
|
|
|
renderer: 'line',
|
|
|
|
|
series: [{
|
|
|
|
|
data: ideal,
|
|
|
|
|
color: '#75ABC5',
|
|
|
|
|
name: 'Ideal'
|
|
|
|
|
}, {
|
|
|
|
|
data: actual,
|
|
|
|
|
color: '#F89406',
|
|
|
|
|
name: 'Actual'
|
|
|
|
|
}]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
graph.render();
|
|
|
|
|
|
|
|
|
|
// Onhover.
|
|
|
|
|
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
|
|
|
graph: graph,
|
|
|
|
|
xFormatter: function(d) { return new Date(d * 1000).toUTCString() },
|
|
|
|
|
yFormatter: function(y) { return Math.round(y) + " points left" }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Axes.
|
|
|
|
|
var axes = new Rickshaw.Graph.Axis.Time({
|
|
|
|
|
graph: graph
|
|
|
|
|
});
|
|
|
|
|
axes.render();
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
2012-05-23 11:55:05 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
