Fail to load chart on Flask/jinja2 html using chart.js

Question

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

this is chart.html

<head>
   <meta charset="utf-8" />
   <title>Chart.js </title>

   <!-- import plugin script -->
   <script src='app/static/js/Chart.min.js'></script>
 </head>

<body>

<div class="chartjs"> 
<h1>Flask Chart.js</h1>
<!-- bar chart canvas element -->
<canvas id="chart" width="600" height="400"></canvas>
</div>

<script>

   // bar chart data
   var barData = {
   labels : [{% for item in labels %}
              "{{item}}",
          {% endfor %}],
   datasets : [
      {
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        bezierCurve : false,
        data : [{% for item in values %}
                  {{item}},
                {% endfor %}]
      }]
   }

    Chart.defaults.global.animationSteps = 50;
    Chart.defaults.global.tooltipYPadding = 16;
    Chart.defaults.global.tooltipCornerRadius = 0;
    Chart.defaults.global.tooltipTitleFontStyle = "normal";
    Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
    Chart.defaults.global.animationEasing = "easeOutBounce";
    Chart.defaults.global.responsive = false;
    Chart.defaults.global.scaleLineColor = "black";
    Chart.defaults.global.scaleFontSize = 16;

   // get bar chart canvas
   var mychart = document.getElementById("chart").getContext("2d");

   steps = 10
   max = 10

   // draw bar chart
   var LineChartDemo = new Chart(mychart).Line(barData, {
    scaleOverride: true,
    scaleSteps: steps,
    scaleStepWidth: Math.ceil(max / steps),
    scaleStartValue: 0,
    scaleShowVerticalLines: true,
    scaleShowGridLines : true,
    barShowStroke : true,
    scaleShowLabels: true,
    bezierCurve: false,

   });


</script>

</body>

the direction of Chart.min.js

it turns out the chart.js doesn't work

this is part of views.py which is concern with chart.html

@main.route('/chart', methods=['GET', 'POST'])
def chart():
labels = ["January","February","March","April","May","June","July","August"]
values = [10,9,8,7,6,4,7,8]
return render_template('chart.html', values=values, labels=labels)

I doubt if the js was not referenced correctly and there was something wrong with the chart.html.

the direction of Chart.min.js is SOE-->app-->static-->js-->Chart.min.js — Mark Yuan
– Mark Yuan, Commented Nov 3, 2017 at 16:45
I am having the same problem. Did you ever find a solution for this? — Rachel Solomon
– Rachel Solomon, Commented Mar 29, 2018 at 17:13

midtownguru · Accepted Answer · 2018-05-19 13:52:06Z

3

I had a similar problem. It was solved by replacing labels and data parts with

{{labels | tojson}}

{{values | tojson}}

if they are lists.

I found the answer here

answered May 19, 2018 at 13:52

midtownguru

2,7435 gold badges25 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Fail to load chart on Flask/jinja2 html using chart.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related