Chart.js integration to Django project

Question

New to Charts.js and Django. Seems like I make it working, but not as good as I want it to. Would like to integrate two calculations made on Django side:

my views.py:

def graph(request):
bug_all = BugTable.objects.filter()
bug_all_total = bug_all.count()

bug_posted = BugTable.objects.filter(
    status=BugTable.BUG_POSTED)
bug_posted_total = bug_posted.count()

context = {'bug_all_total': bug_all_total,
           'bug_posted_total': bug_posted_total}

return render(request, 'graph.html', context)

my graphs.html

<canvas id="Bug-status-bar" class="col-md-6"></canvas>
<script  THERE GOES CHART CDN LINK></script>
<script type="text/javascript">
var ctx = document.getElementById('Bug-status-bar');
var dataArray = [{{bug_all_total|safe}}, {{bug_posted_total|safe}}]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['All', 'Posted', 'Pending', 'Fixed'],
    datasets: [{
        label: 'Statistic on bug activity',
        data: dataArray,
        backgroundColor: [
            'rgba(255, 99, 132, 0.4)'
            'rgba(54, 162, 235, 0.2)',
        ],

        borderColor: [
            'rgba(255, 99, 132, 1)'
            'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});
</script>

When I put one of those elements (bug_all_total or bug_posted_total) to graph.html data section it works fine, but for some reasons it does not work if i put both of them. Any suggestions why? Any help is appreciated.

NS0 · Accepted Answer · 2019-05-10 17:26:12Z

1

Everything looks good, you are simply missing a few commas after the rgba strings.

Try this instead:

var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['All', 'Posted', 'Pending', 'Fixed'],
    datasets: [{
        label: 'Statistic on bug activity',
        data: dataArray,
        backgroundColor: [
            'rgba(255, 99, 132, 0.4)',    // <----
            'rgba(54, 162, 235, 0.2)',
        ],

        borderColor: [
            'rgba(255, 99, 132, 1)',     // <---
            'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

answered May 10, 2019 at 17:26

NS0

6,1361 gold badge18 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eddie_J Over a year ago

You are amazing, sir :) Thank You very much.

Muhammed Bilal Over a year ago

Eddie can you share your views.py complete and chart.js template complete your question can help me

Collectives™ on Stack Overflow

Chart.js integration to Django project

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related