Merge branch 'master' of gitlab.com:uncel_dolan/similar-beer

1 files changed, 52 insertions, 26 deletions

diff --git a/templates/beerpage.jinja2 b/templates/beerpage.jinja2
index d243578..68291af 100644
--- a/templates/beerpage.jinja2
+++ b/templates/beerpage.jinja2
@@ -1,31 +1,59 @@
 {% extends "base.html" %}
 {% block content %}
+
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script>
-window.onload = function () {
+    google.charts.load('current', {packages: ['corechart', 'bar']});
+google.charts.setOnLoadCallback(drawAnnotations);
+
+function drawAnnotations() {
+      var data = new google.visualization.DataTable();
+      data.addColumn('timeofday', 'Time of Day');
+      data.addColumn('number', 'Motivation Level');
+      data.addColumn({type: 'string', role: 'annotation'});
+      data.addColumn('number', 'Energy Level');
+      data.addColumn({type: 'string', role: 'annotation'});
+
+      data.addRows([
+        [{v: [8, 0, 0], f: '8 am'},   1, '1',  .25, '.2'],
+        [{v: [9, 0, 0], f: '9 am'},   2, '2',   .5, '.5'],
+        [{v: [10, 0, 0], f:'10 am'},  3, '3',    1,  '1'],
+        [{v: [11, 0, 0], f: '11 am'}, 4, '4', 2.25,  '2'],
+        [{v: [12, 0, 0], f: '12 pm'}, 5, '5', 2.25,  '2'],
+        [{v: [13, 0, 0], f: '1 pm'},  6, '6',    3,  '3'],
+        [{v: [14, 0, 0], f: '2 pm'},  7, '7', 3.25,  '3'],
+        [{v: [15, 0, 0], f: '3 pm'},  8, '8',    5,  '5'],
+        [{v: [16, 0, 0], f: '4 pm'},  9, '9',  6.5,  '6'],
+        [{v: [17, 0, 0], f: '5 pm'}, 10, '10',  10, '10'],
+      ]);
 
-//Better to construct options first and then pass it as a parameter
-var options = {
-	title: {
-		text: "Column Chart in jQuery CanvasJS"
-	},
-	data: [
-	{
-		// Change type to "doughnut", "line", "splineArea", etc.
-		type: "column",
-		dataPoints: [
-			{ label: "apple",  y: 10  },
-			{ label: "orange", y: 15  },
-			{ label: "banana", y: 25  },
-			{ label: "mango",  y: 30  },
-			{ label: "grape",  y: 28  }
-		]
-	}
-	]
-};
+      var options = {
+        title: 'Motivation and Energy Level Throughout the Day',
+        annotations: {
+          alwaysOutside: true,
+          textStyle: {
+            fontSize: 14,
+            color: '#000',
+            auraColor: 'none'
+          }
+        },
+        hAxis: {
+          title: 'Time of Day',
+          format: 'h:mm a',
+          viewWindow: {
+            min: [7, 30, 0],
+            max: [17, 30, 0]
+          }
+        },
+        vAxis: {
+          title: 'Rating (scale of 1-10)'
+        }
+      };
 
-$("#chartContainer").CanvasJSChart(options);
-}
-</script>
+      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
+      chart.draw(data, options);
+    }
+    </script>
     <div id="title" class="text-center">
         <h2>{{ beer_data.brewer if beer_data != None else 'DELICOUS BREWER' }}</h2>
         <h2>{{ beer_data.name if beer_data != None else 'DELICOUS BEER' }}</h2>
@@ -44,9 +72,7 @@ $("#chartContainer").CanvasJSChart(options);
             </tr>
         </table>
     </div>
-    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
-    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
-    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
+    <div id="chart_div"></div>
     <h5>Beers like {{ beer_data.name }}</h5>
     <ul>
       {% for similar_beer in similar_beers %}