improved styling

[psensor.git] / www / details.html

diff --git a/www/details.html b/www/details.html
index 42993ef..43c38cc 100644 (file)
--- a/www/details.html
+++ b/www/details.html
@@ -3,20 +3,27 @@
     <meta charset="utf-8">
     <title>Sensor </title>
 
+    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
+
     <link type="text/css" href="style.css" rel="stylesheet" /> 
 
     <script type="text/javascript" src="jquery.js"></script>
-    <script type="text/javascript" src="jquery.jqplot.min.js"></script>
-    <link   type="text/css"        href="jquery.jqplot.min.css" rel="stylesheet" />    
-    <script type="text/javascript" src="jqplot.dateAxisRenderer.min.js"></script>
+    <script type="text/javascript" src="jqplot.js"></script>
+    <link   type="text/css"        href="jqplot.css" rel="stylesheet" />       
+    <script type="text/javascript" src="jqplot.dateAxisRenderer.js"></script>
 
     <script type="text/javascript" src="psensor.js"></script>
 
     <script>
       $(document).ready(function() {
+         var max_date = null;
+         var min_date = null;
+          var min, max, value;
           var params = get_url_params();
           var url_id = params["id"];
 
+          min = max = null;
+
           $.getJSON(url_id, function(data) {
               var measures = data["measures"];
               var data_chart = [];
@@ -25,9 +32,23 @@
               $("title").append(data["name"]);
 
               $.each(measures, function(i, item) {
+                  value = item["value"];
                   var d = new Date(item["time"]*1000);
                   var entry = [d, item["value"]];
+
                   data_chart.push(entry);
+      
+                 if (max_date == null || max_date < d)
+                    max_date = d;
+                  
+                 if (min_date == null || min_date > d)
+                   min_date = d;
+            
+                  if (min == null || value < min)
+                    min = value;
+                 if (max == null || value > max)
+                    max = value;
+
               });
 
               var plot1 = $.jqplot ('chart1', [data_chart], 
@@ -36,8 +57,14 @@
                       axes:{
                           xaxis:{
                               renderer:$.jqplot.DateAxisRenderer,
-                              tickOptions:{formatString:'%H:%M:%S'}
-                          }
+                              tickOptions:{formatString:'%H:%M:%S'},
+                             min: min_date,
+                             max: max_date
+                          },
+                         yaxis: {
+                             min: min-1,
+                              max: max+1
+                         }
                       },
                       series: [{lineWidth:1,showMarker:false}]
                   });
@@ -51,14 +78,11 @@
         <h1 id='title'></h1>
       </div>
 
-      <div class='page-content'>
+      <div class="chart">
        <div id='chart1'></div>
       </div>
     </div>
 
-    <div class='page-footer'>
-      <a href='http://wpitchoune.net/psensor'>Psensor Server</a> - (c)2011 jeanfi@gmail.com 
-    </div>    
-
+    <div id="footer">Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a></div>
   </body>
 </html>