Adding Chart.js chart diagram to Jinja2 / Flask html page from js file

Question

I have the following code in a simple Bootstrap html file that displays a line chart of Chart.js.

<div class="card-block chartjs"> <canvas id="line-chart" height="500"></canvas> </div> 

The js file containing the chart setup is as follows:

 $(window).on("load", function(){ var ctx = $("#line-chart"); var chartOptions = { responsive: true, maintainAspectRatio: false, legend: { position: 'bottom', }, hover: { mode: 'label' }, scales: { xAxes: [{ display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, labelString: 'Value' } }] }, title: { display: true, text: 'Chart.js Line Chart - Legend' } }; var chartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderDash: [5, 5], borderColor: "#9C27B0", pointBorderColor: "#9C27B0", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }, { label: "My Second dataset", data: [28, 48, 40, 19, 86, 27, 90], fill: false, borderDash: [5, 5], borderColor: "#00A5A8", pointBorderColor: "#00A5A8", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }, { label: "My Third dataset - No bezier", data: [45, 25, 16, 36, 67, 18, 76], lineTension: 0, fill: false, borderColor: "#FF7D4D", pointBorderColor: "#FF7D4D", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }] }; var config = { type: 'line', options : chartOptions, data : chartData }; var lineChart = new Chart(ctx, config); }); 

I would like to avoid using a separate javascript file and most likely just on the Jinja2 / Flask html page. A working example can be found in this tutorial , it is the same that I would like to follow. I tried to copy any js part insert into my html page and put between the <script> tags, but unfortunately it doesn't work.

This is how I tried:

 # in my jinja2/flask html page <div class="card-body collapse in"> <div class="card-block chartjs"> <canvas id="line-chart" height="500"></canvas> </div> </div> <script> var ctx = $("#line-chart"); var chartOptions = { responsive: true, maintainAspectRatio: false, legend: { position: 'bottom', }, hover: { mode: 'label' }, scales: { xAxes: [{ display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, gridLines: { color: "#f3f3f3", drawTicks: false, }, scaleLabel: { display: true, labelString: 'Value' } }] }, title: { display: true, text: 'Chart.js Line Chart - Legend' } }; // Chart Data var chartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderDash: [5, 5], borderColor: "#9C27B0", pointBorderColor: "#9C27B0", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }, { label: "My Second dataset", data: [28, 48, 40, 19, 86, 27, 90], fill: false, borderDash: [5, 5], borderColor: "#00A5A8", pointBorderColor: "#00A5A8", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }, { label: "My Third dataset - No bezier", data: [45, 25, 16, 36, 67, 18, 76], lineTension: 0, fill: false, borderColor: "#FF7D4D", pointBorderColor: "#FF7D4D", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }] }; var config = { type: 'line', // Chart Options options : chartOptions, data : chartData }; // Create the chart var lineChart = new Chart(ctx, config); }); </script> 

Unfortunately, I am not very familiar with JS and have no more ideas on what I need to do to display the diagram in my Flask application. I would really appreciate it if someone could show me the necessary changes that I need to implement in order to make it work.

Answer 1

First, make sure the required JS is specified in your template (or the template that it extends).

Assuming you are serving it from the static/js folder:

 <head> ... <script src='/static/js/Chart.bundle.min.js'></script> ... </head> 

The content of the script tag looks mostly beautiful, only a small modification that gets the context and you get the final one }); to be deleted:

 <script> // get context var ctx = document.getElementById("line-chart").getContext("2d"); .... // Create the chart var lineChart = new Chart(ctx, config); // REMOVE THIS FROM THE END OF YOUR SCRIPT //}); </script> 

Answer 2

As bgse said in his answer, you need to download the library first. I suggest you use the CDN in such a way that you do not need to load the ChartJS library.

Secondly, you are writing several JSs that can be executed before the library is loaded onto the page. So, what would I add:

 <div class="card-body collapse in"> <div class="card-block chartjs"> <canvas id="line-chart" height="500"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script> $(document).ready(function(){ // Your JS code here // ... }); </script> 

This way the script code will be executed when all JS is loaded.