Commit 72dba711 authored by Leigh B Stoller's avatar Leigh B Stoller

Add a focus bar underneath the graphs to make it easier to zoom in on

busier times. Add explanatory text to help modal.
parent 07480bb5
......@@ -178,13 +178,34 @@ window.ShowResGraph = (function ()
}
}
}
// For graph clarity, add an extra point at the end to give
// little space on the right hand side.
array.push($.extend({}, array[array.length - 1]));
array[array.length - 1].stamp =
parseInt(array[array.length - 1].stamp) + (3600 * 24);
//console.info(array);
/*
* Okay, another adjustment. Make sure there is at least one point
* on each day.
*/
var temp = [];
for (var i = 0; i < array.length; i++) {
var counts = array[i].counts;
var stamp = parseInt(array[i].stamp);
temp.push(array[i]);
if (i < array.length - 1) {
var nextstamp = parseInt(array[i + 1].stamp);
if (nextstamp - stamp > (3600 * 48)) {
while (stamp + (3600 * 24) < nextstamp) {
stamp += (3600 * 24);
var data = $.extend({}, array[i]);
data.stamp = stamp;
temp.push(data);
}
}
}
}
array = temp;
console.info(array);
/*
* Finally, create the series data for NVD3.
......@@ -218,15 +239,30 @@ window.ShowResGraph = (function ()
$(id + ' svg').html("");
window.nv.addGraph(function() {
var chart = window.nv.models.lineChart();
var ylabel = "Free Nodes";
var chart = window.nv.models.lineWithFocusChart();
chart.margin({"left":25,"right":15,"top":20,"bottom":20});
/*
* We need the min,max of the time stamps for the brush. We can use
* just one of the nodes.
*/
var minTime = d3.min(datums[0].values,
function (d) { return d.x; });
var maxTime = d3.max(datums[0].values,
function (d) { return d.x; });
// Adjust the brush to the first day.
if (maxTime - minTime > (3600 * 24 * 7 * 1000)) {
maxTime = minTime + (3600 * 24 * 7 * 1000);
}
chart.brushExtent([minTime,maxTime]);
chart.x2Axis.tickFormat(function(d) {
return d3.time.format('%m/%d')(new Date(d))
});
chart.margin({"left":25,"right":15,"top":20,"bottom":20});
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%m/%d')(new Date(d))
});
//chart.yAxis.axisLabel(ylabel);
var intformater = d3.format(',.0f');
var formatter = function (d) {
......
......@@ -440,6 +440,10 @@
tooltip that will provide the date and time, and the free
count for all of the node types at the time stamp you are
hovering over.</li>
<li> Use the <em>focus</em> bar under the graph to expand,
contract, and move the window. This will make it easier
to see ranges that have a lot of activity (such as the
first week).</li>
<li> Clicking on a graph at a specific date and time while
hovering, will copy the date and time to the form. The
cluster will also be selected in the form.</li>
......
......@@ -50,6 +50,10 @@
tooltip that will provide the date and time, and the free
count for all of the node types at the time stamp you are
hovering over.</li>
<li> Use the <em>focus</em> bar under the graph to expand,
contract, and move the window. This will make it easier
to see ranges that have a lot of activity (such as the
first week).</li>
<li> Beyond the right side of the X-axis there are no
longer any changes in the number of nodes available.</li>
<li> To reserve nodes for an experiment, please visit the
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment