matt/pi-temp
1
0
Fork 0
Code Issues 23 Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request #15 from mattbk/plotly

Browse Source 
Use local Plotly
This commit is contained in:
mattbk
2017-11-15 21:27:45 -06:00
committed by GitHub
parent a9cff8ba29 3dafa8adbe
commit 70e3f15993
5 changed files with 187085 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
pi_temp.py
View File

@@ -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:

2
static/javascript/d3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
static/javascript/jquery-3.2.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

186991
static/javascript/plotly.js Normal file
View File

File diff suppressed because one or more lines are too long

113
templates/history.html
View File

@@ -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>