API tools faq
paste
Advertisement
frankiepankie

P1 slimme meter MySQL grafiek

frankiepankie
Aug 18th, 2014
296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 6.60 KB | None | 0 0
raw download clone embed print report
  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.   <meta http-equiv="refresh" content="300"> <!-- reload page every 5 minutes !-->
  6.   <title>Energieverbruik</title>
  7.   <script src="http://code.jquery.com/jquery.js"></script>
  8.   <?php
  9.   $link = mysql_connect("localhost", "p1logger", "p1logger") or die("Error verbinden met DB: " . mysql_error());
  10.  
  11.   $db = mysql_select_db("p1", $link);
  12.   if (!$db) {
  13.     mysql_close($link);
  14.     die("Error selecteren DB: " . mysql_error());
  15.   }
  16.  
  17. // Alle waardes van VANDAAG ophalen voor huidig verbruik.
  18. $result = mysql_query("SELECT unix_timestamp (time) AS ts, time, huidig_verbruik AS 'vandaag' FROM readings WHERE DATE(time) = CURRENT_DATE");
  19.  if (!$result) {
  20.   mysql_close($link);
  21.   die("Error met ophalen verbruik VANDAAG " . mysql_error());
  22. }
  23. while ($row = mysql_fetch_array($result)) {
  24.   $datetime = (($row['ts']) * 1000) + 7200000; // convert from Unix timestamp to JavaScript time
  25.   $latest_measure = $row['time'];
  26.   $value1   = $row['vandaag'];
  27.   if (!$meting1)
  28.     $meting1 = $value1;
  29.   $data1[] = "[$datetime, $value1]";
  30.  
  31. }
  32.  
  33. $vandaag = join($data1, ',');
  34.  
  35.  
  36. // Alle waardes van GISTEREN ophalen voor huidig verbruik.
  37. $result = mysql_query("SELECT unix_timestamp (time) AS ts, huidig_verbruik AS 'gisteren' FROM readings WHERE DATE(time) = CURDATE() - INTERVAL 1 DAY ");
  38.  if (!$result) {
  39.   mysql_close($link);
  40.   die("Error met ophalen verbruik GISTEREN " . mysql_error());
  41. }
  42. while ($row = mysql_fetch_array($result)) {
  43.   $datetime = (($row['ts']) * 1000) + 7200000; // convert from Unix timestamp to JavaScript time
  44.   $value2   = $row['gisteren'];
  45.   if (!$meting2)
  46.     $meting2 = $value2;
  47.   $data2[] = "[$datetime, $value2]";
  48.  
  49. }
  50.  
  51. $gisteren = join($data2, ',');
  52.  
  53. ?>
  54. <script id="source" language="javascript" type="text/javascript">
  55.  
  56. $(function latestFromElektra()
  57. {
  58.     //-----------------------------------------------------------------------
  59.     // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
  60.     //-----------------------------------------------------------------------
  61.     $.ajax({                                      
  62.       url: 'http://192.168.4.4/www/ipaddash/api_energy.php',                  //the script to call to get data          
  63.       data: "utility=elektra&type=huidig",                        //you can insert url argumnets here to pass to api_temperature.php
  64.                                        //for example "id=5&parent=6"
  65.       dataType: 'json',                //data format      
  66.       success: function(data)          //on recieve of reply
  67.       {
  68.         var huidig_verbruik = data[0];              //get id
  69.         //--------------------------------------------------------------------
  70.         // 3) Update html content
  71.         //--------------------------------------------------------------------
  72.         $('#e_huidig_verbruik').html(""+huidig_verbruik+" Watt"); //Set output element html
  73.         //recommend reading up on jquery selectors they are awesome
  74.         // http://api.jquery.com/category/selectors/
  75.         setTimeout(latestFromElektra, 10000); //Elke 5min verversen
  76.       }
  77.     });
  78. });
  79.  
  80.  </script>
  81.  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  82.  <script type="text/javascript">
  83.  $(function () {
  84.   $('#container').highcharts({
  85.     chart: {
  86.       type: 'area',
  87.       zoomType: 'x'
  88.     },
  89.     title: {
  90.       text: 'Energieverbruik via slimme meter'
  91.     },
  92.     subtitle: {
  93.       text: document.ontouchstart === undefined ?
  94.       'Klik en sleep in de grafiek om in te zoomen' :
  95.                       'Maak een knijpbeweging om in te zoomen' //only shown on touch (tablet) devices
  96.                     },
  97.                     xAxis: {
  98.                       type: 'datetime',
  99.                   minRange: 60 * 1000, // Smallest zoominterval (in miliseconds). 10 * 1000 = 10.000ms because smartmeter spits out data every 10sec.
  100.                     plotBands: [{
  101.     color: '#FCFFC5',
  102.     from: Date.UTC(2014, 8, 17,23,0,0), // Start of the plot band
  103.     to: Date.UTC(2014, 8, 18,7,0,0) // End of the plot band
  104.   }],
  105.                 },
  106.                 yAxis: {
  107.                   min: 0,    // Schaal instellen, uncomment de min en max voor automatisch    
  108.                   //max: 80,
  109.                   title: {
  110.                     text: 'Watt (W)'
  111.                   }
  112.                 },
  113.                 tooltip: {
  114.                   valueSuffix: 'W'
  115.                 },
  116.                 legend: {
  117.                   layout: 'vertical',
  118.                   align: 'right',
  119.                   verticalAlign: 'middle',
  120.                   borderWidth: 0
  121.                 },
  122.  
  123.                 series: [{
  124.                   name: 'Vandaag',
  125.                   color: '#f3c629',
  126.                   marker: {
  127.                     enabled: false
  128.                   },
  129.                   data: [<?php
  130.                   echo ($vandaag);
  131.                   ?>]
  132.                 },
  133.                 {
  134.                   name: 'Gisteren',
  135.                   color: '#0066CC',
  136.                   visible: false,
  137.                   marker: {
  138.                     enabled: false
  139.                   },
  140.                   data: [<?php
  141.                   echo ($gisteren);
  142.                   ?>]
  143.                 },
  144.                 ]
  145.  
  146.               });
  147. });
  148.  <?
  149. // Nieuwste enkele waarde voor WOONKAMER ophalen
  150.  $result = mysql_query("SELECT id as LATEST, huidig_verbruik FROM readings ORDER BY id DESC LIMIT 1");
  151.  if (!$result) {
  152.   mysql_close($link);
  153.   die("Error met query: enkele waarde huidig verbruik" . mysql_error());
  154. }
  155. while ($row = mysql_fetch_array($result)) {
  156.   $huidig_verbruik = $row['huidig_verbruik'];
  157.  
  158. }
  159.  
  160. ?>
  161.  
  162.  
  163. </script>
  164. <style type="text/css">
  165. body {
  166.   background-color: #FFFFFF;
  167.   font-family: 'Helvetica, Arial, sans-serif';
  168.   color: black;
  169.   font-size: 20px;
  170.   text-align: center;
  171. }
  172. p {
  173.   font-family: 'helvetica, arial, sans-serif';
  174. }
  175. </style>
  176. </head>
  177. <body>
  178.   <script src="js/highcharts.js"></script>
  179.   <script src="js/modules/exporting.js"></script>
  180.  
  181.   <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  182.   <p style="font-family:helvetica, tahoma, sans-serif;">
  183.     <span style="color: #000000";><strong>Huidig verbruik:</strong></span>
  184.     <span style="color: #000000";><div id="e_huidig_verbruik">Data wordt opgehaald, even geduld...</div></span></br>
  185.     <span style="color: #000000";><font size="2">Laatste meting opgehaald om:</span> <br /> <?php echo $latest_measure; ?></font><br>
  186.   </p>
  187.  
  188.   <?php
  189.   mysql_close($link);
  190.   ?>
  191.  
  192. </body>
  193. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!