flukso and php/mysl graphing on synology nas

has someone managed to create a php/mysql solution to collect and dispay data with for example highcharts?
I have a Synology NAS with build in webserver and Iᷰd like to display realtime data.

Any help and tips for scripting would be nice!

controlc's picture

Hi Halsey,

Something like that yes.
I want to use Google chart or Highchart and .php scripting (because of my lack of knowledge on perl scripting).

This is what I have now based on API. The first problem is the timestamp conversion.

Todo:
- convert timestamp to date/time for display on x-axis
- ajax reload
- save values to database
- use highstock charts instead of google charts

Any help is appreciated!

  1. <?php
  2. /*
  3. PHP FLukso API class
  4.  
  5. Date: 2010/04/21
  6. Author: Geert Van Bommel
  7. Licence: free as is, use it and modify it any way you want
  8.  
  9. Note : sensorid and tokenid used in the example are Flukso Bart's
  10. */
  11. class Flukso {
  12.         private $sensorid, $token, $interval, $unit;
  13.         private $url='https://api.flukso.net/sensor/';
  14.        
  15.         public function __construct($u_sensorid, $u_token, $u_interval, $u_unit) {
  16.                 $this->sensorid = $u_sensorid;
  17.                 $this->token = $u_token;
  18.                 if (empty($u_interval)) {
  19.                         $this->interval = 'hour';
  20.                 } else {
  21.                         $this->interval = $u_interval;
  22.                 }      
  23.                 if (empty($u_unit)) {
  24.                         $this->unit = 'watt';
  25.                 } else {
  26.                         $this->unit = $u_unit;
  27.                 }
  28.                 $this->getdata();
  29.         }
  30.  
  31.         private function getdata() {
  32.                 // headers according to <a href="http://www.flukso.net/content/jsonrest-api-released<br />
  33. " title="http://www.flukso.net/content/jsonrest-api-released<br />
  34. ">http://www.flukso.net/content/jsonrest-api-released<br />
  35. </a>            $header=array();
  36.                 $header[]="Accept: application/json";
  37.                 $header[]="X-Version: 1.0";
  38.                 $header[]='X-Token: '.$this->token;
  39.  
  40.                 $request=$this->url.$this->sensorid.'?interval='.$this->interval.'&unit='.$this->unit;
  41.                
  42.                 $ch=curl_init();
  43.                 curl_setopt($ch,CURLOPT_URL,$request);
  44.                 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
  45.                 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
  46.                 curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
  47.                 curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
  48.                 $this->data=curl_exec($ch);
  49.                 curl_close($ch);
  50.                
  51.         }
  52.         public function __toString() {
  53.                 return $this->data;
  54.         }
  55.  
  56. }
  57. ?>
  58. <?
  59.  
  60. ###### usage ##############################################
  61. # your Flukso settings
  62.  
  63. $sensorid='5715ea6042c164a213b30670de442xxx';
  64. # Your sensor id's are displayed under the 'my account' -> 'sensor' tab. Just substitute the sensor id and token with your own and you're ready to go.
  65.  
  66. $token='a87c5e36c47d39ad455a964e46220xxx';
  67. # A token associated with the specific sensor id. Different tokens per sensor will allow for varying access permissions, e.g. only allow data in 'month' resolution. This feature will become available in the near future. We now provision a single token per sensor. The token can be found next to its respective sensor id.
  68.  
  69. $interval='hour';       # Should be one of {hour, day, month, year, night}
  70.  
  71. $unit='watt';           # Should be one of {watt, kwhperyear, eurperyear, audperyear}
  72.  
  73.  
  74. # That's it, now get the data !!
  75. $fluksodata = new Flukso($sensorid, $token, $interval, $unit);
  76.  
  77. # a json object is returned
  78. //print($fluksodata);
  79.  
  80. # to make it a php array, use json_decode
  81. $fluksodata_php=json_decode($fluksodata);
  82. //echo "PHP array<br>";
  83. //print_r($fluksodata_php);
  84. //echo "<hr>";
  85.  
  86. ##########################################################
  87.  
  88. ?>
  89. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  90. <html xmlns="http://www.w3.org/1999/xhtml">
  91. <head>
  92. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  93. <title>Flukso Cor</title>
  94. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  95. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  96. <script type="text/javascript">
  97. google.load("visualization", "1", {packages:["corechart"]});
  98. google.setOnLoadCallback(drawChart);
  99.  
  100.   function drawChart() {
  101.         var weekday=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
  102.         var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  103.        
  104.         obj1=<?php echo $fluksodata; ?>;
  105.         // replace all 'nan' values by '0'
  106.     for( var k = 0; k < obj1.length; ++k ) {
  107.         if( 'nan' == obj1[k][1] ) {
  108.             obj1[k][1] = 0 ;
  109.         }
  110.     }
  111.  
  112.     var data = google.visualization.arrayToDataTable(obj1);
  113.     var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  114.     var options = { };
  115.  
  116.     chart.draw(data, {curveType: "none", width: Math.round(screen.width*0.95), height: Math.round(screen.height*0.67), vAxis: {maxValue: 10}} );
  117.  
  118.   }
  119.  
  120.         //when you are given a 10-digit timestamp you should first convert it from seconds to milliseconds by multiplying by 1000
  121.        
  122.         //var timestamp = 1280296860;
  123.         //    for( var k = 0; k < obj1.length; ++k ) {
  124.         //              pubDate = Date(obj1[k][0] * 1000); //expects milliseconds
  125.         //              formattedDate = weekday[pubDate.getDay()] + ' '
  126.         //                    + monthname[pubDate.getMonth()] + ' '
  127.         //                    + pubDate.getDate() + ', ' + pubDate.getFullYear()
  128.         //
  129.         //              obj1[k][0] = formattedDate ;
  130.         //    }
  131. </script>
  132. </head>
  133.  
  134. <body>
  135. <h1>Flukso</h1>
  136. <?php echo $fluksodata; ?>
  137. <div id="chart_div"></div>
  138. </body>
  139. </html>