aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/beerpage.jinja229
1 files changed, 29 insertions, 0 deletions
diff --git a/templates/beerpage.jinja2 b/templates/beerpage.jinja2
index 7c11dc8..d243578 100644
--- a/templates/beerpage.jinja2
+++ b/templates/beerpage.jinja2
@@ -1,5 +1,31 @@
{% extends "base.html" %}
{% block content %}
+ <script>
+window.onload = function () {
+
+//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 }
+ ]
+ }
+ ]
+};
+
+$("#chartContainer").CanvasJSChart(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>
@@ -18,6 +44,9 @@
</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>
<h5>Beers like {{ beer_data.name }}</h5>
<ul>
{% for similar_beer in similar_beers %}