Chartjs-Jinja throughs "SyntaxError: expected property name, got '%' " error

by

1👍

✅

Jinja work only with html files, you can’t use it’s tags in another files. But you can simply render little script with variables which contains needed values in html template and than use them in external script, for example:

    {% extends "index.html" %}
    {% block content %}
    <!-- bar chart canvas element -->
    <canvas id="myChart" width="600" height="400"></canvas>
    <p id="pointSelected">Point selected:</p>

    <script>
        var labels = [{% for item in labels %}
           "{{item}}",
          {% endfor %}]
        var data = [{% for item in values %}
              {{item}},
            {% endfor %}]
        // and so on for each variable
        // it's important to import external script 
        // after variables declaration, not before
    </script>

    <script src="external-script.js"></script>

    {% endblock %}

and than you can simply use them in external script like:

    var chartData = {
        labels : labels,
        // and so on
    };

Leave a comment