Chartjs-Create charts with a loop in Django with charts.js

by

1👍

✅

  1. You are referencing the (template) for-loop variable dt outside of the for loop.
  2. You are also giving all the created canvases the same fixed id.
  3. You are only building one Chart in your javascript code.

Try changing your code like this:

{% extends "layouts/base.html" %}
{% load static %}
{% block content %}

    <div class="content">
        <div class="page-inner">
            <h4 class="page-title">Chart.js</h4>
            <div class="page-category"></div>
        {% for dt in data %}

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">{{ dt.title }} Doughnut Chart</div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="doughnutChart{{ forloop.counter }}" style="width: 50%; height: 50%"></canvas> {# CHANGE THIS #}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% endfor %}


        </div>
    </div>


{% endblock content %}

{% block javascripts %}

    <script>

      {% for dt in data %} {# ADD THIS #}
        doughnutChart = document.getElementById('doughnutChart{{ forloop.counter }}').getContext('2d');    {# CHANGE THIS #}
        var myDoughnutChart{{ forloop.counter }} = new Chart(doughnutChart, { {# CHANGE THIS #}
            type: 'doughnut',
            data: {
                datasets: [
                    {
                    data: [ {{ dt.value1 }}, {{ dt.value2 }} ],
                    backgroundColor: ['#e95bda','#4bbffd']
                }
                ],

                labels: [
                'value 1',
                'value 2'
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend : {
                    position: 'bottom'
                },
                layout: {
                    padding: {
                        left: 20,
                        right: 20,
                        top: 20,
                        bottom: 20
                    }
                }
            }
        });
      {% endfor %}  {# ADD THIS #}

        // Chart with HTML Legends

        var gradientStroke = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
        gradientStroke.addColorStop(0, '#177dff');
        gradientStroke.addColorStop(...

        var myHtmlLegendsChart = new Chart(htmlLegendsChart, {
            ...
        var myLegendContainer = document.getElementById("myChartLegend");

        // generate HTML legend
        myLegendContainer.innerHTML = myHtmlLegendsChart.generateLegend();

        ...
        }

    </script>

{% endblock javascripts %}

By the way, this is just to make your code work the way you are writing it, but it is debatable whether it’s a good idea to dynamically generate Javascript code via Django templates.

Leave a comment