www/details.html

   1 <html>
   2   <head>
   3     <meta charset="utf-8">
   4     <title>Sensor </title>
   5
   6     <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
   7
   8     <link type="text/css" href="style.css" rel="stylesheet" />
   9
  10     <script type="text/javascript" src="jquery.js"></script>
  11     <script type="text/javascript" src="jqplot.js"></script>
  12     <link   type="text/css"        href="jqplot.css" rel="stylesheet" />
  13     <script type="text/javascript" src="jqplot.dateAxisRenderer.js"></script>
  14
  15     <script type="text/javascript" src="psensor.js"></script>
  16
  17     <script>
  18       $(document).ready(function() {
  19           var max_date = null;
  20           var min_date = null;
  21           var min, max, value;
  22           var params = get_url_params();
  23           var url_id = params["id"];
  24
  25           min = max = null;
  26
  27           $.getJSON(url_id, function(data) {
  28               var measures = data["measures"];
  29               var data_chart = [];
  30
  31               $("#title").append(data["name"]);
  32               $("title").append(data["name"]);
  33
  34               $.each(measures, function(i, item) {
  35                   value = item["value"];
  36                   var d = new Date(item["time"]*1000);
  37                   var entry = [d, item["value"]];
  38
  39                   data_chart.push(entry);
  40
  41                   if (max_date == null || max_date < d)
  42                     max_date = d;
  43
  44                   if (min_date == null || min_date > d)
  45                     min_date = d;
  46
  47                   if (min == null || value < min)
  48                     min = value;
  49                   if (max == null || value > max)
  50                     max = value;
  51
  52               });
  53
  54               var plot1 = $.jqplot ('chart1', [data_chart],
  55                   {
  56                       title: type_to_str(data["type"]),
  57                       axes:{
  58                           xaxis:{
  59                               renderer:$.jqplot.DateAxisRenderer,
  60                               tickOptions:{formatString:'%H:%M:%S'},
  61                               min: min_date,
  62                               max: max_date
  63                           },
  64                           yaxis: {
  65                               min: min-1,
  66                               max: max+1
  67                           }
  68                       },
  69                       series: [{lineWidth:1,showMarker:false}]
  70                   });
  71           });
  72       });
  73     </script>
  74   </head>
  75   <body>
  76     <div class='page'>
  77       <div class='page-header'>
  78          <h1 id='title'></h1>
  79       </div>
  80
  81       <div class="chart">
  82         <div id='chart1'></div>
  83       </div>
  84     </div>
  85
  86     <div id="footer">Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a></div>
  87   </body>
  88 </html>