diff options
Diffstat (limited to 'templates')
-rw-r--r-- | templates/beerpage.jinja2 | 78 |
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 %} |