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

busier times. Add explanatory text to help modal.

www/aptui/js/resgraphs.js

@@ -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) {

www/aptui/template/reserve-request.html

@@ -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>

www/aptui/template/resinfo.html

@@ -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