Skip to content

Instantly share code, notes, and snippets.

@cacharbe
Last active March 30, 2016 16:53
Show Gist options
  • Save cacharbe/8e4ed91034f7f53b932b0c5357244b71 to your computer and use it in GitHub Desktop.
Save cacharbe/8e4ed91034f7f53b932b0c5357244b71 to your computer and use it in GitHub Desktop.
Build data Bar Graphs
{"description":"Build data Bar Graphs","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Gv6eLUd.png"}
var data = [{
"name":"Build_One",
"history":
[{"buildNumber":"Build_One_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":"Build_One_6.2.53",
"startTime":"2016-03-10T13:42:30.1-06:00",
"endTime":"2016-03-10T14:13:17.22-06:00",
"status":"Failed",
"duration":30.785333333333334},
{"buildNumber":"Build_One_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":"Build_One_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":"Build_One_6.2.56",
"startTime":"2016-03-15T10:45:34.057-05:00",
"endTime":"2016-03-15T11:22:10.23-05:00",
"status":"Partially Succeeded",
"duration":36.602883333333331},
{"buildNumber":"Build_One_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":"Build_One_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":"Build_One_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":"Build_One_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":"Build_One_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":"Build_Two",
"history":
[{
"buildNumber":"Build_Two_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":"Build_Two_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":"Build_Two_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":"Build_Two_1.1.59",
"startTime":"2016-03-17T05:00:04.66-05:00",
"endTime":"2016-03-17T05:42:22.36-05:00",
"status":"Failed",
"duration":42.295},
{"buildNumber":"Build_Two_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":"Build_Two_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":"Build_Two_1.1.62",
"startTime":"2016-03-23T05:00:02.997-05:00",
"endTime":"2016-03-23T05:44:50.433-05:00",
"status":"Partially Succeeded",
"duration":44.7906},
{"buildNumber":"Build_Two_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":"Build_Two_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":"Build_Two_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}
]
}
];
var margin = { top: 10, right: 10, bottom: 10, left: 10 },
width = 400 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var buildData = data;
var color = d3.scale.ordinal()
.range(["#FFFF00", "#00EF00", "#FF0000"]);
var x = d3.scale.ordinal()
.domain((function (d) { return d.history; }))
.rangeBands([0, width], 0.1);
var y = d3.scale.linear()
//.domain ([0,100])
.domain([0, Math.ceil(d3.max(
buildData.map(function (d) { return d.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("svg").selectAll(".chart")
.data(buildData).enter()
.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(".barGraph")
.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) {
return color(d.status);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment