Javascript window.onload not displaying charts with Chart.js and Flask

Question

I'm new to Javascript and now I'm tasked to display charts with Chart.js. I did grouping in Python and used Flask to build the web app. However, my chart is somehow not displayed and I'm not sure why.

HTML

<canvas id="barchart2" width="600" height="400"></canvas>

JS

<script>
 var config = {
    type: 'bar',
    labels : [
                       "52",

                       "51",

                       "54",

                       "53",

                       "46",

                       "82",

                       "57",

                       "48",

                       "50",

                       "56",
                   ],
        datasets : [
           {
                 fillColor: "rgba(151,187,205,0.2)",
                 strokeColor: "rgba(151,187,205,1)",
                 pointColor: "rgba(151,187,205,1)",
              data : [
                           611,

                           18,

                           11,

                           10,

                           9,

                           8,

                           6,

                           3,

                           2,

                           2,
                         ]
           }
           ]
         },
     options: {
       legend: {
         display: true,
       },
       title: {
         display: true,
         text: 'Top 10 District in Singapore',
       }
     },
  };
  window.onload = function() {
           var ctx = document.getElementById("barchart2").getContext("2d");
           window.myBar = new Chart(ctx, config);
  };
</script>

When I used this JS instead

var barData = {
         labels : [{% for item in lbl1 %}
                        "{{item}}",
                    {% endfor %}],
         datasets : [
            {
                  fillColor: "rgba(151,187,205,0.2)",
                  strokeColor: "rgba(151,187,205,1)",
                  pointColor: "rgba(151,187,205,1)",
               data : [{% for item in val1 %}
                            {{item}},
                          {% endfor %}]
            }
            ]
         }
         // get bar chart canvas
         var mychart = document.getElementById("barchart2").getContext("2d");
         // draw bar chart
         new Chart(mychart).Bar(barData);

It worked perfectly (note: without options. I tried to add options, but the options doesn't show although the charts still appears. That's why I wanna change to this format instead). But when I use the window.onload function, the chart doesn't appear at all.

Would appreciate your help. Thanks!

mxcoder · Accepted Answer · 2018-07-05 03:44:02Z

1

Could you paste here the complete generated JS code with the data? Or review your data, because I think that might be the problem somehow.

Here's a JSFiddle with your original code (sans your data) that works:

https://jsfiddle.net/wj80597q/5/

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },
  options: {
    legend: {
      display: true,
    },
    title: {
      display: true,
      text: 'Top 10 District in Singapore',
    }
  },
};
(function() {
  var ctx = document.getElementById("barchart2").getContext("2d");
  window.myBar = new Chart(ctx, config);
})()

answered Jul 5, 2018 at 3:44

mxcoder

1987 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nadia Desratri Over a year ago

I've edited my question with the generated JS code and I finally found the problem. Turns out I forgot to place all of Chart.js script in my base html! Thanks so much for your help!

Collectives™ on Stack Overflow

Javascript window.onload not displaying charts with Chart.js and Flask

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related