Add monthly usage graph

1 files changed, 61 insertions, 1 deletions

diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js
index 3d02fd8..c8710db 100644
--- a/public/javascripts/dash.js
+++ b/public/javascripts/dash.js
@@ -7,14 +7,17 @@ var dash = {
   realtimeTrendLastSample: 0,
 
   dailyUsageChart: null,
+  monthlyUsageChart: null,
 
   init: function() {
     this.initRealtimeGauge();
     this.initRealtimeTrendChart();
     this.initDailyUsageChart();
+    this.initMonthlyUsageChart();
     
     this.startPolling();
     this.getDailyUsageData();
+    this.getMonthlyUsageData();
   },
 
   initRealtimeGauge: function() {
@@ -113,6 +116,37 @@ var dash = {
     });
   },
 
+  initMonthlyUsageChart: function() {
+    var ctx = document.getElementById('mu-chart').getContext('2d');
+    this.monthlyUsageChart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        datasets: [{
+          label: "Energy (kWH)",
+          borderColor: 'rgb(255, 99, 132)',
+          backgroundColor: 'rgb(255, 99, 132)',
+          data: []
+        }]
+      },
+      options: {
+        legend: {
+          display: false
+        },
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero:true
+            }
+          }]
+        },
+        maintainAspectRatio: false,
+        tooltips: {
+          intersect: false
+        },
+      }
+    });
+  },
+
   realtimeTrendChartOnRefresh: function(chart) {
     chart.data.datasets.forEach(function(dataset) {
       dataset.data.push({
@@ -194,7 +228,33 @@ var dash = {
     });
 
     dash.dailyUsageChart.update();
-  }
+  },
+
+  getMonthlyUsageData: function() {
+    $.ajax({
+      url: "/energy-usage/1/month-stats",
+      type: "GET",
+      success: function(data) {
+        dash.parseMonthlyUsageData(data);
+      },
+      dataType: "json",
+      timeout: 4000
+    });
+  },
+
+  parseMonthlyUsageData: function(usageData) {
+    usageData.forEach(function(entry) {
+      // Months from API response are 1 based
+      var month = moment().month(entry.month -1);
+
+      dash.monthlyUsageChart.data.labels.push(month.format('MMM'));
+      dash.monthlyUsageChart.data.datasets.forEach(function(dataset) {
+        dataset.data.push(entry.energy);
+      });
+    });
+
+    dash.monthlyUsageChart.update();
+  },
 
 };