0

I'm creating a web application where I need to create a few charts. I'm using django 3 and ChartJS. I have created one list for the labels and one list for the data to be inserted into ChartJS. The problem I'm having is that no matter what I try or do the data just will not show up in the graph. When I try to access the data by writing it on the page it does work, but it does not work at all when inserting it into ChartJS for some reason.

According to the ChartJS documentation the data field can receive a list of values so I dont understand why this is not working.

I have searched quite a lot for solutions to this using google and stackoverflow and while I found some similar threads on stackoverflow, the solutions did not work for me. I tried converting to json, other ways of inserting the data, using a for loop etc, but nothing seems to work no matter what I do.

In the web application the labels and values are dynamically created, but at this time to troubleshoot the problem easier I have just created two lists by hand and tried to send them off to the template and insert them into ChartJS which does not work either.

This is the code I'm currently using:

views.py:

def check_spending(request):
    graph_labels = ["Test1", "Test2", "Test3"]
    graph_values = ["100", "50", "20"]

    return render(request, 'spending/view_spending.html',
        {'graph_labels': graph_labels,
         'graph_values': graph_values})

HTML:

<!-- Values are printed out here -->
{{ graph_labels }}
{{ graph_values }}
for loop
{% for key in graph_labels %}
  {{ key }}
{% endfor %}

<!-- Values does not work here -->
<canvas id="spending_overview_detailed" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('spending_overview_detailed');
var spending_overview_detailed = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [{{ graph_labels }}],
        datasets: [{
            label: 'Spending',
            data: [{{ graph_values }}],
            borderWidth: 1
        }],
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
Improve this question

2 Answers 2

Reset to default
2

I ended up changing the labels and data field to the following:

[{% for label in graph_labels %} {{ label }}, {% endfor %}]
[{% for value in graph_values %} {{ value }}, {% endfor %}]

Notice the comma in the for loop, without it the values will not be processed correctly.

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

1 Comment

Thank you to have shared your knowledge. Now I have a new way.
0

{{ graph_labels }} and {{ graph_values }} are Django template variable and you are trying to access then inside javascript , this will not work. Use template tag "json_script" Django Documentation to pass data from django template to your javascript.

Improve this answer

3 Comments

You're wrong. I have used django template variables inside javascript in this case when I was not using lists and just numbers in the variables and that does work. Thanks for answering though.
it may have worked for numbers , but a python list can not be accessed directly in javascript. even the other answer to your question suggests the same. If you are able to find a simpler way , please do update us.
What you wrote was that "{{ graph_labels }} and {{ graph_values }} are Django template variable and you are trying to access then inside javascript, this will not work". You do not state if the case is a list or a variable. A list does not work, but my answer works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.