Use local Plotly #15
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
pi_temp.db
|
||||
BIN
pi_temp.db
BIN
pi_temp.db
Binary file not shown.
73
pi_temp.py
73
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:
|
||||
|
||||
@ -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!
|
||||
|
||||
2
static/javascript/d3.min.js
vendored
Normal file
2
static/javascript/d3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
static/javascript/jquery-3.2.1.min.js
vendored
Normal file
4
static/javascript/jquery-3.2.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
186991
static/javascript/plotly.js
Normal file
186991
static/javascript/plotly.js
Normal file
File diff suppressed because one or more lines are too long
@ -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,7 +57,6 @@
|
||||
<div class="row">
|
||||
<div class="eleven columns">
|
||||
<div class="one column">
|
||||
<a href="" id="plotly">Plotly</a>
|
||||
<a href="/">Live</a>
|
||||
</div>
|
||||
<form id="range_select" action = "/history" method="GET">
|
||||
@ -68,9 +76,7 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<a href="" id="plotly_url" target="_blank"></a><span id="plotly_wait"></span>
|
||||
</div>
|
||||
<div class='row' id='plotly-plot'></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() {
|
||||
|
||||
var data = new google.visualization.DataTable();
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
<footer>
|
||||
<!~~Plot data~~>
|
||||
<script type="text/javascript">
|
||||
var graph = {{graphJSON | safe}};
|
||||
Plotly.plot('plotly-plot', graph.data, graph.layout);
|
||||
</script>
|
||||
</footer>
|
||||
|
||||
<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>
|
||||
-</html>
|
||||
Reference in New Issue
Block a user