.gitignore

@@ -0,0 +1 @@
+pi_temp.db

pi_temp.py

@@ -48,7 +48,9 @@ from flask import Flask, request, render_template
 import time
 import datetime
 import arrow
-import plotly.plotly as py
+import json
+import plotly
+import sqlite3
 from plotly.graph_objs import *
 
 app = Flask(__name__)
@@ -82,6 +84,62 @@ def history():
 
 	print "rendering history.html with: %s, %s, %s" % (timezone, from_date_str, to_date_str)
 	
+# 	Create new record tables so that datetimes are adjusted back to the user browser's time zone.
+	time_series_adjusted_temperatures  = []
+	time_series_adjusted_humidities 	= []
+	time_series_temperature_values 	= []
+	time_series_humidity_values 		= []
+
+	for record in temperatures:
+		local_timedate_series = arrow.get(record[0], "YYYY-MM-DD HH:mm").to(timezone)
+		time_series_adjusted_temperatures.append(local_timedate_series.format('YYYY-MM-DD HH:mm'))
+		time_series_temperature_values.append(round(record[2],2))
+
+	for record in humidities:
+		local_timedate_series = arrow.get(record[0], "YYYY-MM-DD HH:mm").to(timezone)
+		time_series_adjusted_humidities.append(local_timedate_series.format('YYYY-MM-DD HH:mm')) #Best to pass datetime in text
+																						  #so that Plotly respects it
+		time_series_humidity_values.append(round(record[2],2))
+
+	
+	temp = Scatter(
+        		x=time_series_adjusted_temperatures, 
+        		y=time_series_temperature_values,
+        		name='Temperature'
+    				)
+	hum = Scatter(
+        		x=time_series_adjusted_humidities,
+        		y=time_series_humidity_values,
+        		name='Humidity',
+        		yaxis='y2'
+    				)
+
+	data = Data([temp, hum])
+
+	layout = Layout(
+					title="Temperature and Humidity",
+				    xaxis=XAxis(
+				        type='date',
+				        autorange=True
+				    ),
+				    yaxis=YAxis(
+				    	title='Fahrenheit',
+				        type='linear',
+				        autorange=True
+				    ),
+				    yaxis2=YAxis(
+				    	title='Percent',
+				        type='linear',
+				        autorange=True,
+				        overlaying='y',
+				        side='right'
+				    )
+
+					)
+
+	fig = Figure(data=data, layout=layout)
+	graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+
 	return render_template("history.html",	timezone		= timezone,
 												temp 			= time_adjusted_temperatures,
 												hum 			= time_adjusted_humidities, 
@@ -90,10 +148,11 @@ def history():
 												temp_items 		= len(temperatures),
 												query_string	= request.query_string, #This query string is used
 																						#by the Plotly link
-												hum_items 		= len(humidities))
+												hum_items 		= len(humidities),
+												graphJSON=graphJSON,
+												)
 
 def get_records():
-	import sqlite3
 	from_date_str 	= request.args.get('from',time.strftime("%Y-%m-%d 00:00")) #Get the from date value from the URL
 	to_date_str 	= request.args.get('to',time.strftime("%Y-%m-%d %H:%M"))   #Get the to date value from the URL
 	timezone 		= request.args.get('timezone','Etc/UTC');
@@ -198,10 +257,12 @@ def to_plotly():
 				    )
 
 					)
-	fig = Figure(data=data, layout=layout)
-	plot_url = py.plot(fig, filename='lab_temp_hum')
 
-	return plot_url
+	fig = Figure(data=data, layout=layout)
+	#plot_url = py.plot(fig, filename='lab_temp_hum')
+	graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+
+	return graphJSON
 
 def validate_date(d):
     try:

pi_temp_logger.py

@@ -39,7 +39,7 @@ import sys
 import Adafruit_DHT
 
 def log_values(sensor_id, temp, hum):
-	conn=sqlite3.connect('/home/pi/Documents/pi-temp/pi-temp.db')  #It is important to provide an
+	conn=sqlite3.connect('/home/pi/Documents/pi-temp/pi_temp.db')  #It is important to provide an
 							     #absolute path to the database
 							     #file, otherwise Cron won't be
 							     #able to find it!

templates/history.html

@@ -17,9 +17,18 @@
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <link rel="stylesheet" href="/static/css/normalize.css">
     <link rel="stylesheet" href="/static/css/skeleton.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/jquery.datetimepicker.css"/ >
     <!-- Favicon
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <link rel="icon" type="image/png" href="/static/images/favicon.png">
+    <!~~ D3.js https://github.com/d3/d3/releases~~>
+    <script src="static/javascript/d3.min.js"></script>
+    <!~~ jQuery https://jquery.com/download/ ~~>
+    <script src="static/javascript/jquery-3.2.1.min.js"></script>
+    <!~~ Plotly.js https://github.com/plotly/plotly.js/releases/ ~~>
+    <script src="static/javascript/plotly.js"></script>
+    <script src="static/javascript/jquery.datetimepicker.full.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js" ></script>
   </head>
   <body>
     <div class="container">
@@ -48,8 +57,7 @@
       <div class="row">
       <div class="eleven columns">
       	<div class="one column">
-			    <a href="" id="plotly">Plotly</a>
+			    <a href="/">Live</a>
-          		<a href="/">Live</a>
        	</div>
         <form id="range_select" action = "/history" method="GET">  
           <input type="hidden" class="timezone" name="timezone" />      
@@ -68,9 +76,7 @@
         </form>          
       </div>
     </div>
-    <div class="row">
+    <div class='row' id='plotly-plot'></div>
-     <a href="" id="plotly_url" target="_blank"></a><span id="plotly_wait"></span>
-	</div>
       <div class="row">
         <div class="one-third column" style="margin-top: 5%">
           <strong>Showing all records</strong>
@@ -122,11 +128,7 @@
       </div>
     </div>
   </body>
-  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
+
-  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
-  <link rel="stylesheet" type="text/css" href="/static/css/jquery.datetimepicker.css"/ >
-  <script src="/static/javascript/jquery.datetimepicker.full.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js" ></script>
  
  
   <script>
@@ -150,95 +152,16 @@
         jQuery(".timezone").val(timezone.name()); 
         jQuery("#range_select").submit();
       });
-
-    jQuery("#plotly").click(function(){
-      jQuery("#plotly_wait").text("Sending data...");
-      jQuery("#plotly_url").text("");
-      {% autoescape false %}
-      jQuery.get("/to_plotly?{{query_string}}")
-      {% endautoescape %}
-        .done(function( data ) {
-          jQuery("#plotly_url").attr("href",data);
-          jQuery("#plotly_url").text("Click to see your plot");
-          jQuery("#plotly_wait").text("");            
-	  });
-	      return false; //This is so that the click on the link does not cause the page to refresh
-	});
     </script>
       
-  <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
 
-      <script>
-       google.load('visualization', '1', {packages: ['corechart']});
-    google.setOnLoadCallback(drawChart);
 
-    function drawChart() {
+  <footer>
+    <!~~Plot data~~>
+    <script type="text/javascript">
+               var graph = {{graphJSON | safe}};
+               Plotly.plot('plotly-plot', graph.data, graph.layout);
+    </script>
+  </footer>
 
-      var data = new google.visualization.DataTable();
+-</html>      
-      data.addColumn('datetime', 'Time');  
-      data.addColumn('number', 'Temperature');      
-      data.addRows([
-          {% for row in temp %}
-            [new Date({{row[0][0:4]}},{{row[0][5:7]}}-1,{{row[0][8:10]}},{{row[0][11:13]}},{{row[0][14:16]}}),{{'%0.2f'|format(row[1])}}],
-          {% endfor %}
-        ]);
-
-      var options = {
-        width: 600,
-        height: 563,
-        hAxis: {
-          title: "Date",
-          gridlines: { count: {{temp_items}}, color: '#CCC' },
-          format: 'dd-MMM-yyyy HH:mm' },
-        vAxis: {
-          title: 'Degrees'
-        },
-        title: 'Temperature',
-        curveType: 'function'  //Makes line curved
-      };
-
-      var chart = new google.visualization.LineChart(document.getElementById('chart_temps'));
-
-      chart.draw(data, options);
-
-    }
-
-      </script>
- 
-<script>
-    google.load('visualization', '1', {packages: ['corechart']});
-    google.setOnLoadCallback(drawChart);
-
-    function drawChart() {
-
-      var data = new google.visualization.DataTable();
-      data.addColumn('datetime', 'Time');  
-      data.addColumn('number', 'Humidity');      
-      data.addRows([
-          {% for row in hum %}
-            [new Date({{row[0][0:4]}},{{row[0][5:7]}}-1,{{row[0][8:10]}},{{row[0][11:13]}},{{row[0][14:16]}}),{{'%0.2f'|format(row[1])}}],
-          {% endfor %}
-        ]);
-
-      var options = {
-        width: 600,
-        height: 563,
-        hAxis: {
-          title: "Date",
-          gridlines: { count: {{hum_items}}, color: '#CCC' },
-          format: 'dd-MMM-yyyy HH:mm'        },
-        vAxis: {
-          title: 'Percent'
-        },
-        title: 'Humidity',
-        curveType: 'function'  //Makes line curved
-      };
-
-      var chart = new google.visualization.LineChart(document.getElementById('chart_humid'));
-
-      chart.draw(data, options);
-
-    }
-
-      </script>  
-</html>