From eaa58920674ef6d8ae85af38a4f3ae713581f961 Mon Sep 17 00:00:00 2001
From: Rodrigo Lazo <rlazo.paz@gmail.com>
Date: Fri, 14 Oct 2011 21:23:08 -0300
Subject: [PATCH] Added var plotting using js.

---
 monitor/http_display.py        | 20 ++++++---
 monitor/www_templates/var.html | 96 +++++++++++++++++++++++++++++++++---------
 2 files changed, 90 insertions(+), 26 deletions(-)
 rewrite monitor/www_templates/var.html (82%)

diff --git a/monitor/http_display.py b/monitor/http_display.py
index 15b0289..9fec072 100755
--- a/monitor/http_display.py
+++ b/monitor/http_display.py
@@ -123,12 +123,20 @@ class MonitorHttpHandler(object):
         template = self.env.get_template('var.html')
         references = self._get_default_references()
         references["title"] = "Historic Values of var: %s" % name
-        data = self._store.get_var(name)
-        if data:
-            # filename, _ = plotting.new_multigraph(data, name, self._static_path)
-            filename, _ = plotting.gnuplot_new_multigraph(data, name, self._static_path)
-            references["filename"] = filename
-            references["items"] = [{'hostname' : k, 'value': v.get_latest()} for k, v in data.iteritems()]
+        references["data"] = self._store.get_var(name)
+        value_range = set()
+        for value in references["data"].itervalues():
+            value_range.update([x.value for x in value.get_all_compact()])
+            if len(value_range) > 1:
+                break
+        else:
+            references["single_value"] = value_range.pop()
+
+        miny = min([min(a.get_all(), lambda x: x.value)
+                    for a in references["data"].values()])
+        maxy = max([max(a.get_all(), lambda x: x.value)[1]
+                    for a in references["data"].values()])
+        print miny, maxy
         return template.render(references)
 
     @cherrypy.expose
diff --git a/monitor/www_templates/var.html b/monitor/www_templates/var.html
dissimilarity index 82%
index 243a0a9..45f7b14 100644
--- a/monitor/www_templates/var.html
+++ b/monitor/www_templates/var.html
@@ -1,20 +1,76 @@
-{% extends "base.html" %}
-{% block body %}
-{% if not filename %}
-<h1>Empty dataset. Check varname</h1>
-{% else %}
-<table>
-  <tr>
-    <td><img src="static/{{filename}}"></img></td>
-    <td>
-      <p>Latest values collected were:</p>
-      <ul>
-	{% for item in items %}
-	<li>[{{item.hostname}}] At <strong>{{item.value.timestamp|timestampformat }}</strong> was <strong>{{ item.value.value }}</strong></li>
-	{% endfor %}
-      </ul>
-    </td>
-  </tr>
-</table>
-{% endif %}
-{% endblock body %}
+{% extends "base.html" %}
+
+{% block header%}
+    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/jquery-latest.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/jquery.jqplot.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.highlighter.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.cursor.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.dateAxisRenderer.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.canvasTextRenderer.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.canvasAxisTextRenderer.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.canvasTickRenderer.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
+    <script type="text/javascript" src="http://www.students.ic.unicamp.br/~ra109228/media/plugins/jqplot.pointLabels.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="http://www.students.ic.unicamp.br/~ra109228/media/jquery.jqplot.css" />
+
+
+    <style type="text/css">
+      .plotdiv {
+      margin: 3px 20px;
+      height:400px;
+      width:800px;
+      }
+    </style>
+
+{% endblock header%}
+
+{% block body %}
+{% if not data %}
+<h1>Empty dataset. Check hostname</h1>
+{% else %}
+
+<div id="plot" class="plotdiv"></div>
+
+<script type="text/javascript">
+  var data = [
+    {% for vals in data.values() %}
+    [ {% for point in vals.get_all_compact() %}
+       [new Date({{point.timestamp}}000), {{point.value}}],
+      {% endfor %}  ],
+    {% endfor %}
+    ];
+
+        $.jqplot('plot', data, {
+          axesDefaults: {
+            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+          },
+          highlighter: {
+            show: true,
+            sizeAdjust: 7.5,
+          },
+          series: [{% for key in data.keys() %} {label: '{{key}}'}, {% endfor%}],
+          legend: {show: true},
+          axes: {
+            xaxis: {
+              label: "Time",
+              renderer: $.jqplot.DateAxisRenderer,
+              tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+              tickOptions: { formatString: '%T', angle: -30 },
+            },
+            yaxis: {
+              label: "Values",
+              {% if single_value is defined %}
+              max: ({{single_value}} + 0.1) * 1.1,
+              min: ({{single_value}} - 0.1) * 0.9,
+              {% endif %}
+            }
+           }
+        });
+</script>
+
+{% endif %}
+{% endblock body %}
-- 
2.11.4.GIT