Chartjs-ChartJS doesnt display labels provided by Jinja variable

by

1👍

✅

If you are not using safe filter special symbols would be escaped during template parsing process and would corrupt the variable value.

In the case above, final variable value without ‘jinja safe’ filter would be 

["16.07.2017", "23.07.2017"] =>['16.07.2017','23.07.2017']

And that value (['16.07.2017','23.07.2017']) is illegal for JS and you’ll be able to see the error in the browser console:

Uncaught SyntaxError: Unexpected token &

In the case above, final variable value with ‘jinja safe’ filter would be the same

["16.07.2017", "23.07.2017"] =>["16.07.2017", "23.07.2017"]

You can read more about escaping here.

0👍

var ctx = document.getElementById('myChart').getContext('2d');
var dates = {{labels|safe}};
var data1 = {{data|safe}}
var chart = new Chart(ctx, {
type: 'line',
data: {
      labels: dates,
      datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: data1

I added the Jinja expressions as variables inside the script and now the chart renders as expected. Still not sure why …

Leave a comment