我使用Arduino将传感器数据发送到Raspberry pi,例如温度,湿度,烟雾水平等。Raspberrypi将它们存储并提交到MySQL数据库。我现在正在使用Flask在Web服务器上显示数据集。
在我的python代码中,我有权访问数据库。
def getTemps():
cursor = dbConn.cursor()
result = cursor.execute(sql)
if result > 0:
tempDetails = curcor.fetchall()
return render_template("temp.html", tempDetails=tempDetails)
现在,我可以将它们显示在html的表格中,如下所示
{% for data in tempDetails %}
<tr>
<td>{{ data[0] }}</td>
<td>{{ data[1] }}</td>
<td>{{ data[2] }}</td>
<td>{{ data[3] }}</td>
</tr>
{% endfor %}
p.s:data [0]是id,data [1]是温度,data [2]是湿度,data [3]是时间戳。
但是,我也想将它们放在图表中,我尝试使用Chart.js
,但是我不确定如何将温度(和/或湿度)列表放入数据集中。
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [/* I want to display each timestamp*/],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [/* in here should i use the {% for data in tempDetails %} for loop again?*/]
}]
},
// Configuration options go here
options: {}
});
任何帮助将不胜感激!!!干杯!
也许这可以帮助将烧瓶中的数据传递给js:How can I pass data from Flask to JavaScript in a template?
报价:“您可以在模板中的任何地方使用{{variable}},而不仅限于HTML部分。因此应该可以使用:
<html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>
“