Bar chart (#3)

Added bar chart

app.py

 from flask import Flask, render_template, request
 import RPi.GPIO as GPIO
 from flask_sqlalchemy import SQLAlchemy
-
+from sqlalchemy import asc, desc
 import os
 from datetime import datetime, date, timedelta
 # from daily_usage import DailyUsage
@@ -36,7 +36,8 @@ class DailyUsage(db.Model):
 
 
 def get_todays_usage():
-    latest_entry = db.session.query(DailyUsage).order_by(DailyUsage.id.desc()).first()
+    latest_entry = DailyUsage.query.order_by(desc(DailyUsage.date)).first()
+    # latest_entry = db.session.query(DailyUsage).order_by(DailyUsage.date.asc()).first()
     if latest_entry:
         latest_entry_date = date(latest_entry.date.year, latest_entry.date.month, latest_entry.date.day)
         if latest_entry_date == datetime.today().date():
@@ -49,7 +50,7 @@ def get_todays_cost():
 
 
 def create_entry(change_pin):
-    latest_entry = db.session.query(DailyUsage).order_by(DailyUsage.id.desc()).first()
+    latest_entry = DailyUsage.query.order_by(desc(DailyUsage.date)).first()
     start_time = pins[change_pin]['on_time']
     # Get the elapsed time and strip away milliseconds
     elapsed = int((datetime.now() - start_time).total_seconds())
@@ -93,35 +94,41 @@ for pin in pins:
     GPIO.output(pin, GPIO.LOW)
 
 
+labels = []
+values = []
+max = 0
+
+# Create data for chart
+count = 0
+records = DailyUsage.query.order_by(asc(DailyUsage.date)).all()
+for record in records:
+    labels.append(date(record.date.year, record.date.month, record.date.day))
+    values.append(record.kwhUsed)
+    if record.kwhUsed > max:
+        max = record.kwhUsed
+    count += 1
+    if count >= 7:
+        break
+
 @app.route("/")
 def main():
     # For each pin, read the pin state and store it in the pins dictionary:
     for pin in pins:
         pins[pin]['state'] = GPIO.input(pin)
 
-    # Set the template data for the HTML template
     template_data = {
         'pins': pins,
         'daily_total': daily_total,
         'todays_cost': todays_cost,
         'cost_per_kWh': os.environ['cost_per_kWh'],
         'display_new_device_form': False,
-        'display_change_kWh': False
+        'display_change_kWh': False,
+        'labels': labels,
+        'values': values,
+        'max': max
     }
 
-    labels = [
-        'JAN', 'FEB', 'MAR', 'APR',
-        'MAY', 'JUN', 'JUL', 'AUG',
-        'SEP', 'OCT', 'NOV', 'DEC'
-    ]
-
-    values = [
-        967.67, 1190.89, 1079.75, 1349.19,
-        2328.91, 2504.28, 2873.83, 4764.87,
-        4349.29, 6458.30, 9907, 16297
-    ]
-
-    return render_template('main.html', **template_data, labels=labels, values=values)
+    return render_template('main.html', **template_data)
 
 
 @app.route("/toggle/<change_pin>")
@@ -146,7 +153,10 @@ def toggle_pin(change_pin):
         'pins': pins,
         'daily_total': get_todays_usage(),
         'todays_cost': get_todays_cost(),
-        'cost_per_kWh': os.environ['cost_per_kWh']
+        'cost_per_kWh': os.environ['cost_per_kWh'],
+        'labels': labels,
+        'values': values,
+        'max': max
     }
 
     return render_template('main.html', **template_data)
@@ -160,7 +170,10 @@ def handle_change_kWh():
         'pins': pins,
         'daily_total': daily_total,
         'todays_cost': todays_cost,
-        'cost_per_kWh': os.environ['cost_per_kWh']
+        'cost_per_kWh': os.environ['cost_per_kWh'],
+        'labels': labels,
+        'values': values,
+        'max': max
     }
     return render_template('main.html', **template_data)
 
@@ -172,7 +185,10 @@ def add_new_device():
         'daily_total': daily_total,
         'todays_cost': todays_cost,
         'cost_per_kWh': os.environ['cost_per_kWh'],
-        'display_new_device_form': True
+        'display_new_device_form': True,
+        'labels': labels,
+        'values': values,
+        'max': max
     }
     return render_template('main.html', **template_data)
 
@@ -192,6 +208,9 @@ def handle_new_device():
         'daily_total': daily_total,
         'todays_cost': todays_cost,
         'cost_per_kWh': os.environ['cost_per_kWh'],
+        'labels': labels,
+        'values': values,
+        'max': max
     }
     return render_template('main.html', **template_data)
 
@@ -210,6 +229,9 @@ def delete_pin(delete_pin):
         'daily_total': daily_total,
         'todays_cost': todays_cost,
         'cost_per_kWh': os.environ['cost_per_kWh'],
+        'labels': labels,
+        'values': values,
+        'max': max
     }
     return render_template('main.html', **template_data)
 
@@ -220,7 +242,10 @@ def change_kWh():
         'daily_total': daily_total,
         'todays_cost': todays_cost,
         'cost_per_kWh': os.environ['cost_per_kWh'],
-        'display_change_kWh': True
+        'display_change_kWh': True,
+        'labels': labels,
+        'values': values,
+        'max': max
     }
     return render_template('main.html', **template_data)
 

static/css/main.css

@@ -53,4 +53,16 @@ body {
 
 .smart_meter_info {
     margin-left: 5%;
+    margin-bottom: 5%;
+}
+
+.chart {
+    width: 70%;
+    height: 50%;
+    margin-left: 25%;
 }
+
+.chart_title {
+    text-decoration: underline;
+    text-align: center;
+}
\ No newline at end of file

templates/main.html

@@ -2,6 +2,7 @@
 <head>
    <title>Current Status</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
 </head>
 
 <div class="heading">
@@ -45,6 +46,49 @@
                     {% endif %}
                     {% endfor %}
                 </ul>
+
+{#            <div class="chart">#}
+                <h3 class="chart_title">Last weeks usage</h3>
+                <canvas id="chart" class="chart" ></canvas>
+                <script>
+                  // bar chart data
+                  var barData = {
+                    labels : [
+                      {% for item in labels %}
+                       "{{ item }}",
+                      {% endfor %}
+                ],
+                    datasets : [{
+                      fillColor: "rgba(151,187,205,0.2)",
+                      strokeColor: "rgba(151,187,205,1)",
+                      pointColor: "rgba(151,187,205,1)",
+                      data : [
+                        {% for item in values %}
+                           "{{ item }}",
+                          {% endfor %}
+                    ]
+                      }
+                    ]
+                  }
+                 // get bar chart canvas
+                 var mychart = document.getElementById("chart").getContext("2d");
+                   steps = 1
+                   max = {{ max }}
+                 // draw bar chart
+                 new Chart(mychart).Bar(barData, {
+                   scaleOverride: true,
+                   scaleSteps: steps,
+                   scaleStepWidth: Math.ceil(max / steps),
+                   scaleStartValue: 0,
+                   scaleShowVerticalLines: true,
+                   scaleShowGridLines : true,
+                   barShowStroke : true,
+                   scaleShowLabels: true
+                   }
+                 );
+                </script>
+
+{#            </div>#}
             </div>
         </div>
     </div>
@@ -67,49 +111,5 @@
         {% endif %}
 
     </div>
-
-<canvas id="chart" width="600" height="400"></canvas>
-    <script>
-      // bar chart data
-      var barData = {
-        labels : [
-          {% for item in labels %}
-           "{{ item }}",
-          {% endfor %}
-	],
-        datasets : [{
-          fillColor: "rgba(151,187,205,0.2)",
-          strokeColor: "rgba(151,187,205,1)",
-          pointColor: "rgba(151,187,205,1)",
-          data : [
-            {% for item in values %}
-               "{{ item }}",
-              {% endfor %}
-	    ]
-          }
-        ]
-      }
-     // get bar chart canvas
-     var mychart = document.getElementById("chart").getContext("2d");
-       steps = 10
-       max = 17000
-     // draw bar chart
-     new Chart(mychart).Bar(barData, {
-       scaleOverride: true,
-       scaleSteps: steps,
-       scaleStepWidth: Math.ceil(max / steps),
-       scaleStartValue: 0,
-       scaleShowVerticalLines: true,
-       scaleShowGridLines : true,
-       barShowStroke : true,
-       scaleShowLabels: true
-       }
-     );
-    </script>
-
-
 </body>
-
-
-
-</html>
+</html>
\ No newline at end of file