Create charts with a loop in Django with charts.js

Question

I created a project in Django. I need charts in my project.

I use chart.js library and Json.

I use an API for take values. In the API page there are 5 objects.Every object has title, value1 and value2.

When I create a table it works. I can get values but I cannot display values in charts. How can I create several charts with a loop?

views.py

def Jdeneme(request):
    response = requests.get('https://api....t')
    data = response.json()
    return render(request, 'charts.html', {'data': data})

charts.html

{% 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" style="width: 50%; height: 50%"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% endfor %}


        </div>
    </div>


{% endblock content %}

{% block javascripts %}

    <script>

        doughnutChart = document.getElementById('doughnutChart').getContext('2d');
        var myDoughnutChart = new Chart(doughnutChart, {
            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
                    }
                }
            }
        });


        // 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 %}

talz · Accepted Answer · 2021-01-20 16:50:56Z

You are referencing the (template) for-loop variable dt outside of the for loop.
You are also giving all the created canvases the same fixed id.
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.

Collectives™ on Stack Overflow

Create charts with a loop in Django with charts.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