Use local Plotly #15
							
								
								
									
										112
									
								
								pi_temp.py
									
									
									
									
									
								
							
							
						
						
									
										112
									
								
								pi_temp.py
									
									
									
									
									
								
							@@ -50,6 +50,7 @@ import datetime
 | 
			
		||||
import arrow
 | 
			
		||||
import json
 | 
			
		||||
import plotly
 | 
			
		||||
import sqlite3
 | 
			
		||||
from plotly.graph_objs import *
 | 
			
		||||
 | 
			
		||||
app = Flask(__name__)
 | 
			
		||||
@@ -84,61 +85,60 @@ 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_tempreratures  = []
 | 
			
		||||
	time_series_adjusted_humidities 	= []
 | 
			
		||||
	time_series_temprerature_values 	= []
 | 
			
		||||
	time_series_humidity_values 		= []
 | 
			
		||||
 | 
			
		||||
	for record in temperatures:
 | 
			
		||||
		local_timedate = arrow.get(record[0], "YYYY-MM-DD HH:mm").to(timezone)
 | 
			
		||||
		time_series_adjusted_tempreratures.append(local_timedate.format('YYYY-MM-DD HH:mm'))
 | 
			
		||||
		time_series_temprerature_values.append(round(record[2],2))
 | 
			
		||||
 | 
			
		||||
	for record in humidities:
 | 
			
		||||
		local_timedate = arrow.get(record[0], "YYYY-MM-DD HH:mm").to(timezone)
 | 
			
		||||
		time_series_adjusted_humidities.append(local_timedate.format('YYYY-MM-DD HH:mm')) #Best to pass datetime in text
 | 
			
		||||
# 	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_tempreratures,
 | 
			
		||||
        		y=time_series_temprerature_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 in Clayton's Apartment",
 | 
			
		||||
				    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)
 | 
			
		||||
	#plot_url = py.plot(fig, filename='lab_temp_hum')
 | 
			
		||||
	graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
 | 
			
		||||
# 		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,
 | 
			
		||||
@@ -149,10 +149,10 @@ def history():
 | 
			
		||||
												query_string	= request.query_string, #This query string is used
 | 
			
		||||
																						#by the Plotly link
 | 
			
		||||
												hum_items 		= len(humidities),
 | 
			
		||||
												graphJSON=graphJSON)
 | 
			
		||||
												#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');
 | 
			
		||||
 
 | 
			
		||||
@@ -151,6 +151,7 @@
 | 
			
		||||
        jQuery("#range_select").submit();
 | 
			
		||||
      });
 | 
			
		||||
      
 | 
			
		||||
      
 | 
			
		||||
    jQuery("#plotly").click(function(){
 | 
			
		||||
      jQuery("#plotly_wait").text("Sending data...");
 | 
			
		||||
      jQuery("#plotly_url").text("");
 | 
			
		||||
@@ -164,6 +165,7 @@
 | 
			
		||||
	  });
 | 
			
		||||
	      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>
 | 
			
		||||
@@ -171,9 +173,7 @@
 | 
			
		||||
      <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', 'Temperature');      
 | 
			
		||||
@@ -182,7 +182,6 @@
 | 
			
		||||
            [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,
 | 
			
		||||
@@ -196,21 +195,15 @@
 | 
			
		||||
        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');      
 | 
			
		||||
@@ -219,7 +212,6 @@
 | 
			
		||||
            [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,
 | 
			
		||||
@@ -233,29 +225,29 @@
 | 
			
		||||
        title: 'Humidity',
 | 
			
		||||
        curveType: 'function'  //Makes line curved
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      var chart = new google.visualization.LineChart(document.getElementById('chart_humid'));
 | 
			
		||||
 | 
			
		||||
      chart.draw(data, options);
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
      </script> 
 | 
			
		||||
      
 | 
			
		||||
<!-- 
 | 
			
		||||
<div id='plotly-plot'></div> 
 | 
			
		||||
 | 
			
		||||
{{ graphJSON }}
 | 
			
		||||
  <footer>
 | 
			
		||||
      <!-- D3.js https://github.com/d3/d3/releases-->
 | 
			
		||||
      <!~~ D3.js https://github.com/d3/d3/releases~~>
 | 
			
		||||
    <script src="static/javascript/d3.min.js"></script>
 | 
			
		||||
    <!-- jQuery https://jquery.com/download/ -->
 | 
			
		||||
    <!~~ 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/ -->
 | 
			
		||||
    <!~~ Plotly.js https://github.com/plotly/plotly.js/releases/ ~~>
 | 
			
		||||
    <script src="static/javascript/plotly.js"></script>
 | 
			
		||||
    
 | 
			
		||||
    <!--Plot Scaled-D on results.html-->
 | 
			
		||||
    <!~~Plot data~~>
 | 
			
		||||
    <script type="text/javascript">
 | 
			
		||||
		var graph = {{graphJSON | safe}};
 | 
			
		||||
		Plotly.plot('plotly-plot', graph.data, graph.layout);
 | 
			
		||||
    </script>
 | 
			
		||||
  </footer>
 | 
			
		||||
 -->
 | 
			
		||||
 
 | 
			
		||||
</html>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user