Skip to content

GitLab

Commit b6a7ffac authored by Vladislav Rykov's avatar Vladislav Rykov
Browse files

dev data google line chart added

parent 8166056b
Hide whitespace changes
Inline Side-by-side
app/app/templates/layout.html
View file @ b6a7ffac
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<meta name="viewport" content="with-device-width, initial-scale-1"/> <meta name="viewport" content="with-device-width, initial-scale-1"/>
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}"/> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}"/>
{% block head %}{% endblock %}
</head> </head>
<body> <body>
<nav class="navbar navbar-inverse"> <nav class="navbar navbar-inverse">
......
app/app/templates/public/dev-data.html
View file @ b6a7ffac
...@@ -2,6 +2,36 @@ ...@@ -2,6 +2,36 @@
{% block title %} Device Data: {% endblock %} {% block title %} Device Data: {% endblock %}
{% block head %}
{% if data %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Timestamp', 'Data'],
{% for d in data %}
['{{ d[1] }}', {{ d[2]['hih8121_h_mkr'] }}],
{% endfor %}
]);
var options = {
title: 'ESP32 Data',
curveType: 'function',
hAxis: { format: 'long' },
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
{% endif %}
{% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
...@@ -18,7 +48,9 @@ ...@@ -18,7 +48,9 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
{% if data %} {% if data %}
<div id="curve_chart" style="height: 600px;"></div>
<table class="table"> <table class="table">
<thead> <thead>
<th>Time</th> <th>Time</th>
...@@ -47,21 +79,21 @@ ...@@ -47,21 +79,21 @@
{% else %} {% else %}
<li class="disabled"> <li class="disabled">
{% endif %} {% endif %}
<a href="/dev-data-pg?p={{ pp }}" aria-label="Previous"> <a href="/dev-data?p={{ pp }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
</a> </a>
</li> </li>
{% for i in range(pr[0],pr[1]) %} {% for i in range(pr[0],pr[1]) %}
{% if i == cp %} {% if i == cp %}
<li class="active"> <li class="active">
<a href="/dev-data-pg?p={{ i }}"> <a href="/dev-data?p={{ i }}">
{{ i }} {{ i }}
<span class="sr-only">(current)</span> <span class="sr-only">(current)</span>
</a> </a>
</li> </li>
{% else %} {% else %}
<li> <li>
<a href="/dev-data-pg?p={{ i }}"> {{ i }} </a> <a href="/dev-data?p={{ i }}"> {{ i }} </a>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
...@@ -71,7 +103,7 @@ ...@@ -71,7 +103,7 @@
{% else %} {% else %}
<li class="disabled"> <li class="disabled">
{% endif %} {% endif %}
<a href="/dev-data-pg?p={{ np }}" aria-label="Next"> <a href="/dev-data?p={{ np }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
</a> </a>
</li> </li>
...@@ -88,11 +120,5 @@ ...@@ -88,11 +120,5 @@
</div> </div>
</div> </div>
<script type="text/javascrypt">
function conf() {
return confirm("Are you sure? It will remove all device data.")
}
</script>
{% endblock %} {% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment