Skip to content

Instantly share code, notes, and snippets.

@cacharbe

cacharbe/data.json

Last active March 30, 2016 13:36
Show Gist options
  • Save cacharbe/d19ee91054aa0330f69e8fc6a97c6888 to your computer and use it in GitHub Desktop.
Save cacharbe/d19ee91054aa0330f69e8fc6a97c6888 to your computer and use it in GitHub Desktop.
Download ZIP
Build Graph Generation
Raw
data.json
[{"name":"MB_Develop_CI",
"history":[{"buildNumber":"MB_Develop_CI_6.2.52",
"startTime":"2016-03-09T15:33:51.503-06:00",
"endTime":"2016-03-09T16:01:28.44-06:00",
"status":"Succeeded",
"duration":27.615616666666668},
{"buildNumber":"MB_Develop_CI_6.2.53",
"startTime":"2016-03-10T13:42:30.1-06:00",
"endTime":"2016-03-10T14:13:17.22-06:00",
"status":"Succeeded",
"duration":30.785333333333334},
{"buildNumber":"MB_Develop_CI_6.2.54",
"startTime":"2016-03-11T11:12:52.293-06:00",
"endTime":"2016-03-11T11:43:28.17-06:00",
"status":"Succeeded",
"duration":30.59795},
{"buildNumber":"MB_Develop_CI_6.2.55",
"startTime":"2016-03-14T09:47:48.757-05:00",
"endTime":"2016-03-14T10:14:20.59-05:00",
"status":"Succeeded",
"duration":26.53055},
{"buildNumber":"MB_Develop_CI_6.2.56",
"startTime":"2016-03-15T10:45:34.057-05:00",
"endTime":"2016-03-15T11:22:10.23-05:00",
"status":"Succeeded",
"duration":36.602883333333331},
{"buildNumber":"MB_Develop_CI_6.2.57",
"startTime":"2016-03-17T11:15:02.12-05:00",
"endTime":"2016-03-17T11:51:49.42-05:00",
"status":"Succeeded",
"duration":36.788333333333334},
{"buildNumber":"MB_Develop_CI_6.2.58",
"startTime":"2016-03-21T13:50:45.86-05:00",
"endTime":"2016-03-21T14:18:29.267-05:00",
"status":"Succeeded",
"duration":27.72345},
{"buildNumber":"MB_Develop_CI_6.2.59",
"startTime":"2016-03-22T11:06:45.64-05:00",
"endTime":"2016-03-22T11:34:49.663-05:00",
"status":"Succeeded",
"duration":28.067050000000002},
{"buildNumber":"MB_Develop_CI_6.2.60",
"startTime":"2016-03-24T13:46:55.537-05:00",
"endTime":"2016-03-24T14:11:17.547-05:00",
"status":"Succeeded",
"duration":24.366833333333332},
{"buildNumber":"MB_Develop_CI_6.2.61",
"startTime":"2016-03-24T15:00:12.007-05:00",
"endTime":"2016-03-24T15:23:17.417-05:00",
"status":"Succeeded",
"duration":23.090166666666669}]},
{"name":"MB_Dev_Nightly",
"history":[{"buildNumber":"MB_Dev_Nightly_1.1.56",
"startTime":"2016-03-14T05:00:03.393-05:00",
"endTime":"2016-03-14T05:49:26.417-05:00",
"status":"Succeeded",
"duration":49.383733333333332},
{"buildNumber":"MB_Dev_Nightly_1.1.57",
"startTime":"2016-03-15T05:00:03.093-05:00",
"endTime":"2016-03-15T05:43:17.427-05:00",
"status":"Succeeded",
"duration":43.2389},
{"buildNumber":"MB_Dev_Nightly_1.1.58",
"startTime":"2016-03-16T05:00:04.117-05:00",
"endTime":"2016-03-16T05:42:26.78-05:00",
"status":"Succeeded",
"duration":42.377716666666664},
{"buildNumber":"MB_Dev_Nightly_1.1.59",
"startTime":"2016-03-17T05:00:04.66-05:00",
"endTime":"2016-03-17T05:42:22.36-05:00",
"status":"Succeeded",
"duration":42.295},
{"buildNumber":"MB_Dev_Nightly_1.1.60",
"startTime":"2016-03-18T05:00:04.503-05:00",
"endTime":"2016-03-18T05:41:48.377-05:00",
"status":"Succeeded",
"duration":41.731233333333336},
{"buildNumber":"MB_Dev_Nightly_1.1.61",
"startTime":"2016-03-22T05:00:05.457-05:00",
"endTime":"2016-03-22T06:51:26.21-05:00",
"status":"Succeeded",
"duration":111.34588333333333},
{"buildNumber":"MB_Dev_Nightly_1.1.62",
"startTime":"2016-03-23T05:00:02.997-05:00",
"endTime":"2016-03-23T05:44:50.433-05:00",
"status":"Succeeded",
"duration":44.7906},
{"buildNumber":"MB_Dev_Nightly_1.1.63",
"startTime":"2016-03-24T05:00:05.953-05:00",
"endTime":"2016-03-24T05:35:11.933-05:00",
"status":"Succeeded",
"duration":35.099666666666664},
{"buildNumber":"MB_Dev_Nightly_1.1.64",
"startTime":"2016-03-25T05:00:05.47-05:00",
"endTime":"2016-03-25T05:39:26.933-05:00",
"status":"Succeeded",
"duration":39.357716666666668},
{"buildNumber":"MB_Dev_Nightly_1.1.65",
"startTime":"2016-03-28T05:00:04.03-05:00",
"endTime":"2016-03-28T05:37:28.843-05:00",
"status":"Succeeded",
"duration":37.41355}]}]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = { top: 10, right: 10, bottom: 10, left: 10 },
width = 400 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var legendRectSize = 18;
var legendSpacing = 4;
var parseDate = d3.time.format("%d-%b-%y").parse;
var color = d3.scale.ordinal()
.range(["#FFFF00", "#00EF00", "#FF0000"]);
d3.json("data.json", function (error, data) {
var buildData = data;
var x = d3.scale.ordinal()
.domain(buildData.map(function (d) { return d.history.; }))
.rangeBands([0, width], .1);
var y = d3.scale.linear()
.domain([0, Math.ceil(d3.max(buildData.history, function (d) {
return d.duration
}) ) ])
.range([height - margin.top - margin.bottom, 0]);
var barWidth = width / buildData.length;
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(d3.time.minutes, 100);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickPadding(8);
var svg = d3.select("body").append('svg')
.attr('class', 'chart')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
var barGraph = svg.selectAll(".chart")
.data(buildData)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + i * barWidth + ",0)";});
barGraph.selectAll(".bar")
.data(function (d) { return d.history; })
.append("rect")
.attr("x", function (d) { return x(d.startTime) - (width / data.length) / 2; })
.attr("y", function (d) { return y(d.duration); })
.attr("height", function (d) { return height - margin.top - margin.bottom - y(d.duration); })
.attr("width", barWidth - 1)
.style("stroke", "#000000")
.style("fill", function (d) {
if (d.status == "No Build")
return "#D3D3D3";
return color(d.status);
});
svg.append("text")
.attr("x", ((width - margin.left - margin.right) / 2))
//.attr("y", 0 - (margin.top / 2))
// .attr("y", 0 - (margin.top / 1000))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text(buildData[0].name + " Build History");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment