Recalculate the graph dimensions after the page has been loaded.

diff --git a/share/collection.js b/share/collection.js
index 141acbda9f98e6595683b8374da0e6997dfb2a34..e071f2fe6bfb5fcf379863f13b1a090f1a79fc9a 100644 (file)
--- a/share/collection.js
+++ b/share/collection.js
@@ -23,7 +23,12 @@
 
 var c4 =
 {
-  instances: []
+  instances: new Array (),
+  config:
+  {
+    width: 324,
+    height: 200
+  }
 };
 
 function value_to_string (value) /* {{{ */
@@ -423,6 +428,7 @@ function inst_fetch_data (inst, begin, end) /* {{{ */
   params.action = "instance_data_json";
   params.begin = begin || inst.begin;
   params.end = end || inst.end;
+  params.resolution = Math.round ((params.end - params.begin) / c4.config.width);
 
   $.getJSON ("collection.fcgi", params,
       function (data)
@@ -630,6 +636,26 @@ function zoom_out (graph_id) /* {{{ */
   return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
 } /* }}} function zoom_earlier */
 
+function graph_recalc_width () /* {{{ */
+{
+  var tmp;
+
+  tmp = $("#layout-middle-center").width ();
+  if (!tmp)
+    return;
+
+  if (tmp < 324)
+    tmp = 324;
+
+  c4.config.width = tmp;
+  c4.config.height = Math.round (tmp / 1.61803398874989484820);
+  $(".graph-json").each (function ()
+  {
+    $(this).width  (c4.config.width);
+    $(this).height (c4.config.height);
+  });
+} /* }}} function graph_recalc_width */
+
 $(document).ready(function() {
     /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
     $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
@@ -694,6 +720,8 @@ $(document).ready(function() {
         );
     });
 
+    graph_recalc_width ();
+
     var i;
     for (i = 0; i < c4.instances.length; i++)
     {

diff --git a/share/style.css b/share/style.css
index d1db9416e4eb173a397f6d93a3454c3a4aa137b0..fbcd1638e18cd2cc513eef8e11bbd99bd99e96da 100644 (file)
--- a/share/style.css
+++ b/share/style.css
@@ -238,8 +238,8 @@ div.graph-img:hover div.graph-buttons
 .graph-json
 {
        clear: both;
-       width: 600px;
-       height: 300px;
+       width: 324px;
+       height: 200px;
 }
 
 div.footer