ChartJS is Blank #10440

jtsang02 · 2022-06-24T08:29:49Z

jtsang02
Jun 24, 2022

Hi, I am trying to build a flask app that displays ChartJS. Anything I try loads a blank page. The data seems to load on the html, but does not show a graph. Here is my HTML document calling ChartJS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stock Prices Chart</title>
  </head>
  <body>
    <div>
      <div>
        <canvas id="lineChart"></canvas>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

      <script>
        const labels = {{ labels | safe }};
        const data = {
          labels: labels,
          dataset: [{
            label: 'My first dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: {{ values | safe }},
          }]
        };

        const config = {
          type: 'line',
          data: data,
          options: {}
        };
      </script>

      <script>
        const = myChart = new Chart(document.getElementById('lineChart'), config);
      </script>

    </div>
  </body>
</html>

Please also see my repo:

https://github.com/jtsang02/flask-chartjs-app

Udemology · 2022-06-26T11:29:33Z

Udemology
Jun 26, 2022

Is there a reason you use the '=' sign twice in the const = myChart = new Chart(...
I guess a typo.

This is your mistake
const = myChart = new Chart(document.getElementById('lineChart'), config);

Should be...
const myChart = new Chart(document.getElementById('lineChart'), config);

1 reply

jtsang02 Jun 27, 2022
Author

Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ChartJS is Blank #10440

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

ChartJS is Blank #10440

Uh oh!

Uh oh!

jtsang02 Jun 24, 2022

Replies: 1 comment · 1 reply

Uh oh!

Udemology Jun 26, 2022

Uh oh!

jtsang02 Jun 27, 2022 Author

jtsang02
Jun 24, 2022

Replies: 1 comment 1 reply

Udemology
Jun 26, 2022

jtsang02 Jun 27, 2022
Author