show_instance action: Add a very simple first scetch of a JavaScript based graphing...

diff --git a/share/collection.js b/share/collection.js
index fdd9d30ae020fb2f1c0c77a7c722c91586f2a760..86ba87d36a1d11ea1fc7613334448751d86a31e6 100644 (file)
--- a/share/collection.js
+++ b/share/collection.js
@@ -1,3 +1,92 @@
+var c4 =
+{
+  graphs: []
+};
+
+function json_graph_get_def (graph)
+{
+  if (!graph.def)
+  {
+    $.ajax({
+      url: "collection.fcgi?action=graph_def_json;" + graph.params,
+      async: false,
+      dataType: 'json',
+      success: function (data)
+      {
+        if (!data)
+          return;
+
+        graph.def = data;
+      }});
+  }
+
+  if (graph.def)
+    return (graph.def);
+  return;
+} /* json_graph_get_def */
+
+function json_graph_update(index)
+{
+  var graph;
+  var def;
+
+  graph = c4.graphs[index];
+  if (!graph)
+    return;
+
+  def = json_graph_get_def (graph);
+  if (!def)
+    return;
+
+  if (!graph.raphael)
+  {
+    graph.raphael = Raphael ("c4-graph" + index);
+  }
+
+  $.getJSON ("collection.fcgi?action=graph_data_json;" + graph.params + ";begin=-3600;end=0",
+      function (data)
+      {
+        var x_data = [];
+        var y_data = [];
+        var i;
+
+        if (!data)
+          return;
+
+        for (i = 0; i < data.length; i++)
+        {
+          var ds = data[i];
+
+          var j;
+          var x = [];
+          var y = [];
+
+          for (j = 0; j < ds.data.length; j++)
+          {
+            var dp = ds.data[j];
+            var t = dp[0];
+            var v = dp[1];
+
+            if (v == null)
+              continue;
+
+            x.push (t);
+            y.push (v);
+          }
+
+          x_data.push (x);
+          y_data.push (y);
+        }
+
+        graph.raphael.clear ();
+        if (def.title)
+          graph.raphael.g.text (250, 15, def.title);
+        if (def.vertical_label)
+          graph.raphael.g.text (5, 100, def.vertical_label).rotate (270);
+        graph.raphael.g.linechart(50, 25, 500, 150, x_data, y_data, {axis: "0 0 1 1"});
+      }); /* getJSON */
+} /* json_graph_update */
+
 function format_instance(inst)
 {
   return ("<li class=\"instance\"><a href=\"" + location.pathname
@@ -246,6 +335,12 @@ $(document).ready(function() {
         + "</div>"
         );
     });
+
+    var i;
+    for (i = 0; i < c4.graphs.length; i++)
+    {
+      json_graph_update (i);
+    }
 });
 
 /* vim: set sw=2 sts=2 et fdm=marker : */

diff --git a/share/style.css b/share/style.css
index 9e8668b64dddb03a3e4a98029e55f5cd966c68ed..a9f7e15c55dc5856c44b1e693f868f9d76d5c31e 100644 (file)
--- a/share/style.css
+++ b/share/style.css
@@ -235,6 +235,13 @@ div.graph-img:hover div.graph-buttons
        margin-bottom: 1px;
 }
 
+.graph-json
+{
+       clear: both;
+       width: 600px;
+       height: 200px;
+}
+
 div.footer
 {
        margin-left: auto;

diff --git a/src/action_show_instance.c b/src/action_show_instance.c
index c6a8918c09b25089f228bfb8b41a0d0e168e96b9..0d6b5e2a7be98a16479033a6d9e298c97dba7ccd 100644 (file)
--- a/src/action_show_instance.c
+++ b/src/action_show_instance.c
@@ -227,19 +227,22 @@ static int show_instance_cb (graph_config_t *cfg, /* {{{ */
   show_breadcrump (cfg, inst);
 
   if (data->graph_count < MAX_SHOW_GRAPHS)
-  {
     printf ("<div class=\"graph-img\"><img src=\"%s?action=graph;%s%s\" "
         "title=\"%s / %s\" /></div>\n",
         script_name (), params, time_params, title, descr);
-    printf ("<div style=\"clear: both;\"><a href=\"%s?action=graph_data_json;%s%s\">"
-        "Get graph data as JSON</a></div>\n",
-        script_name (), params, time_params);
-  }
   else
     printf ("<a href=\"%s?action=show_instance;%s\">Show graph "
         "&quot;%s / %s&quot;</a>\n",
         script_name (), params, title, descr);
 
+  printf ("<div id=\"c4-graph%i\" class=\"graph-json\"></div>\n", data->graph_count);
+  printf ("<script type=\"text/javascript\">c4.graphs[%i] = { \"params\": \"%s\", \"begin\": %li, \"end\": %li };</script>\n",
+      data->graph_count, params, (long) begin, (long) end);
+
+  printf ("<div style=\"clear: both;\"><a href=\"%s?action=graph_data_json;%s%s\">"
+      "Get graph data as JSON</a></div>\n",
+      script_name (), params, time_params);
+
   data->graph_count++;
 
   return (0);

diff --git a/src/utils_cgi.c b/src/utils_cgi.c
index eb9d593affdb2d2e0531d8e779d94d6507715705..7995e3f1b8cd323992bdbb7c0150b0c461624e2d 100644 (file)
--- a/src/utils_cgi.c
+++ b/src/utils_cgi.c
@@ -690,6 +690,12 @@ int html_print_page (const char *title, /* {{{ */
       "    <link rel=\"stylesheet\" type=\"text/css\" href=\"../share/style.css\" />\n"
       "    <script type=\"text/javascript\" src=\"../share/jquery-1.4.2.min.js\">\n"
       "    </script>\n"
+      "    <script type=\"text/javascript\" src=\"../share/raphael-min.js\">\n"
+      "    </script>\n"
+      "    <script type=\"text/javascript\" src=\"../share/g.raphael-min.js\">\n"
+      "    </script>\n"
+      "    <script type=\"text/javascript\" src=\"../share/g.line-min.js\">\n"
+      "    </script>\n"
       "    <script type=\"text/javascript\" src=\"../share/collection.js\">\n"
       "    </script>\n"
       "  </head>\n",