diff options
| -rw-r--r-- | templates/beerpage.jinja2 | 29 |
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 %} |