diff options
| author | Ben Cohen <ben@kensho.com> | 2019-07-28 16:04:36 -0400 |
|---|---|---|
| committer | Ben Cohen <ben@kensho.com> | 2019-07-28 16:04:36 -0400 |
| commit | 5754654d9e58e029f1968b2ec1e3a15c92f47d4d (patch) | |
| tree | d380643ace9797e28e5ccf332e40340c226ef855 | |
| parent | 2ad968974e240451def6244c59774c7ab6246bbd (diff) | |
| parent | f5adfb9c918d03704ca553b21e0ead8c195a5c36 (diff) | |
Merge branch 'master' of gitlab.com:uncel_dolan/similar-beer
| -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 %} |