Chartjs-Django Multiple chartJs chats in a page

by

0👍

✅

First you need to return your dictionary from your view. like this..

votes_dict={'one':12,'two': 19,'three': 3,'four': 5,'five': 2,'six': 3}

return render(request, 'master.html',{'votes':votes_dict})

So the votes_dict is your dictionary and votes is just the name you will call it so you can reference it on your template.

Then on your template it will look something like this…

      {% block content %}
    
        {% if votes %}
        <canvas id="myChart" width="400" height="400"></canvas>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data:  [{{ votes.one }}, {{ votes.two }}, {{ votes.three }}, {{ votes.four }}, {{ votes.five }}, {{ votes.six }} ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    </script>
{% endif %}

If your dictionary is bigger than one dimension it will look more like this

{% for vote in votes %}
   {{ vote.one }}, {{ vote.two }}, {{ vote.three }}, {{ vote.four }}, {{ vote.five }}, {{ vote.six }}

  {% endfor %}
       

          
{% endif %}

Leave a comment