<!– content –> <section id=“main” class=“info stats”>
<!-- heading --> <div class="heading clearfix"> <h2>Deployments Per Day (US/Eastern)</h2> </div> <div class="stats-main"> <button id="scatterOrLine">Line</button> <label><input type="checkbox" id="combined"> Combined</label> <div id="placeholder" style="width:940px;height:300px;"></div> <div id="overview" style="width:940px;height:120px;"></div> <script>var data = {}</script> <p id="choices"></p> <div class="holder"> {{# per_day}} <div class="stats"> <table class="stats"> <tr> <th>Day</th> <th>Count</th> </tr> {{# data}} <tr> <td>{{date}}</td> <td class="count">{{count}}</td> </tr> {{/ data}} </table> <h3>{{stack}}</h3> <script type="text/javascript" charset="utf-8"> data["{{stack}}"] = {data: {{json}}, label: "{{stack}}"} </script> </div> {{/ per_day}} </div> </div>
</section>
<script type=“text/javascript” charset=“utf-8”>
var x1, x2; function getData(ignoreX) { var d = []; var c = { data: [], label: "combined" }; $("#choices").find("input:checked").each(function() { if ($(this).attr("id") == "combined") { return; } var key = $(this).attr("name"); if (key && data[key]) { // combine all the data points if requested if ($("#combined")[0].checked) { for (var i=0; i<data[key].data.length; i++) { var found = false; var m = data[key].data[i]; for (var j=0; j<c.data.length; j++) { var n = c.data[j]; if (n[0] == m[0]) { n[1] += m[1]; found = true; break; } } if (! found) { c.data[i] = [m[0], m[1]]; } } } d.push(data[key]); } }); if ($("#combined")[0].checked) { d = [c]; } var newD = []; for (var i=0; i<d.length; i++) { var dAr = []; for (var j=0; j<d[i].data.length; j++) { n = d[i].data[j]; dAr.push(n); } newD[i] = { label: d[i].label, data: dAr }; } if ($("#combined")[0].checked) { outputTable(c); } return newD; } function outputTable(c) { $("#holderCombined").remove(); var table = $("<table id='holderCombined'>") .html("<tr><th>Date</th><th>Combined</th></tr>") .appendTo(".stats-main"); for (var i=0; i<c.data.length; i++) { var m = c.data[i]; var dO = new Date(m[0]); var dateS = (dO.getYear() + 1900) + "-" + dO.getMonth() + "-" + dO.getDate(); $("<tr><td>" + dateS + "</td><td>" + m[1] + "</td></tr>") .appendTo(table); } } function options() { return { xaxis: { mode: "time", timeformat: "%y/%m/%d", minTickSize: [1, "day"] }, legend: { position: "nw" }, points: { show: ($("#scatterOrLine").html() == "Scatter") }, lines: { show: ($("#scatterOrLine").html() == "Line") }, selection: { mode: "x" } } }; function sliceD(d, msg) { return d.slice(d.slice(d.indexOf(x1), d.indexOf(x2))); } function drawGraphs() { var d = getData(); var plot = $.plot($("#placeholder"), sliceD(d, "main"), options()); var overview = $.plot($("#overview"), d, { legend: { show: false }, selection: { mode: "x" }, lines: { show: true }, xaxis: { mode: "time", timeformat: "%y/%m/%d" } }); $("#placeholder").unbind("plotselected"); $("#placeholder").bind("plotselected", function (event, cRanges) { ranges = cRanges; x1 = Math.floor(ranges.xaxis.from); x2 = Math.floor(ranges.xaxis.to); // do the zooming plot = $.plot($("#placeholder"), sliceD(d, "zoom"), $.extend(true, {}, options(), { xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }, yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } })); // don't fire event on the overview to prevent eternal loop overview.setSelection(ranges, true); }); $("#overview").unbind("plotselected"); $("#overview").bind("plotselected", function (event, ranges) { plot.setSelection(ranges); x1 = Math.floor(ranges.xaxis.from); x2 = Math.floor(ranges.xaxis.to); }); if (x1 && x2) { ranges = {xaxis: {from: x1, to: x2}}; overview.setSelection(ranges); plot.setSelection(ranges); } } $("#scatterOrLine").live("click", function () { $(this).html(($(this).html() == "Line") ? "Scatter" : "Line"); drawGraphs(); }); $("#combined").live("click", function () { drawGraphs(); });
</script> <script src=“/js/stats_load.js”></script>