Chartjs-Chartjs data isn't passing to django webpage

by

1👍

For the variables to show up, in your template, you have to wrap them inside two curly braces: {{ }}, you are using only one.

Modify your chart code as follows:

{% extends "base.html" %}
{% block content %}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="content">
            <div class="row">
                <div class="col-sm-8">
                      <div class="card card-tasks">
                            <h4>Chart.</h4>
                            <canvas id="line-chart" width="500" height="350"></canvas>
                              <script>
                                new Chart(document.getElementById("line-chart"), {
                                  type: 'line',
                                  data: {
                                    labels: {{ labels |safe }},
                                    datasets: [{
                                        data: {{ result|safe }},
                                        label: "output chart",
                                        borderColor: "#3e95cd",
                                        fill: false
                                      }
                                    ]
                                  },
                                  options: {
                                    title: {
                                      display: true,
                                      text: 'output chart'
                                    }
                                  }
                                });
                              </script>
                      </div>
                </div>
            </div>
</div>



{% endblock content %}

0👍

Thanks Amir for helping with the sugestion.

  1. I had to update the scripts from chartjs. that made it work

  2. had to put "{}" around the data and labels

Leave a comment