Adjusting payment graph

app/views/payments/index.html.erb

@@ -6,8 +6,8 @@ $(function() {
 
   $( "#graph" ).dialog({
     autoOpen: false,
-    height: 325,
-    width: 525,
+    height: 480,
+    width: 640,
     modal: true,
   });
   $( "#graph-button" ).click(function() {
@@ -16,12 +16,22 @@ $(function() {
 
   $('#graph').highcharts({
       chart: {
-          type: 'area'
+          type: 'area',
+          zoomType : 'x',
+          resetZoomButton : {
+            position: {
+              align: 'left'
+            }
+          },
       },
       title: { 
-        style : { fontSize: '10px' },
+        style : { fontSize: '12px' },
         text: "Numbers for Most Recent Month Greater Than They Appear" 
       },
+      subtitle: { 
+        style : { fontSize: '10px' },
+        text: "Click and Drag to Zoom." 
+      },
       xAxis: {
           type: 'datetime'
       },
@@ -96,7 +106,7 @@ $(function() {
 });
 </script>
 
-<div id="graph" title="Payments by Month" style="height: 250px; width: 500px; float: right;"></div>
+<div id="graph" title="Payments by Month" style="height: 400px; width: 600px; float: right;"></div>
 
 
 <h1>Listing payments <button id="graph-button" class="btn">View Graph</button></h1>