how to pass template variables to javascript

Question

Friends, I am trying to pass the template variable to javascript in order to create a chart. But I am not getting it. Django considers all js files as static files. So dynamic template variables aren't available to javascripts.

I even tried this:

passing template variables to javascript

But it didn't help either. Only one variable could be passed. The rest didn't.

def profile(request,username):
    try:
        u = User.objects.get(username=username)
        questions = Question.objects.filter(user=u)
        answers = Answer.objects.filter(user=u)
        docs = Document.objects.filter(user=u)
    except User.DoesNotExist:
        pass
    return render(request,"auths/profile.html",locals())

Also, as described in the above link, my profile.html is

<input type="hidden" value="{{ u.username }}" id="username" />
<input type="hidden" value="{{ docs.count }}" id="docs" />
<input type="hidden" value="{{ questions.count }}" id="questions" />
<input type="hidden" value="{{ answers.count }}" id="answers" />


{% block extra %}
    <script type="text/javascript">
        var user = document.getElementById("username").value;
        var docs = document.getElementById("docs").value;
        var questions = document.getElementById("questions").value;
        var answers = document.getElementById("answers").value;
    </script>

   <script type="text/javascript" src="{% static 'highcharts.js'%}">      </script>
   <script type="text/javascript" src="{% static 'highcharts-3d.js'%}"></script>

   <script type="text/javascript" src="{% static 'chart.js' %}"></script>


{% endblock %}

And a section of my chart.js where I pass the data is :

series: [{
  type: 'column',
  name: 'User Profile',
  data: [
      ['Questions',   questions],
      ['Answers',   answers],
      ['Documents',  docs]
  ]
}]

As explained earlier, the problem is only one variable gets passed while the rest don't. As a result, no chart is rendered. What should I do friends?

In case if it helps, I am using Django 1.9 and highcharts.

Because you've used get for the User query, but filter for the rest. filter returns a queryset, not a model instance. — Daniel Roseman
– Daniel Roseman, Commented May 28, 2016 at 16:28
I don't get it. Thing is I want to show the number of documents, answers and questions of a particular user. Shouldn't I be using get to find the user and filter to extract the questions, answers, etc of that particular user? — amankarn
– amankarn, Commented May 28, 2016 at 16:30

amankarn · Accepted Answer · 2016-05-28 17:48:50Z

2

To answer my own question, I think I figured out what was wrong. The chart values are in number format. But I was passing it as string. So all that was needed to be done is convert those strings into values or number using javascript typecasting.

And a section of my chart.js where I pass the data is :

series: [{
  type: 'column',
  name: 'User Profile',
  data: [
      ['Questions',   Number(questions)],
      ['Answers',   Number(answers)],
      ['Documents',  Number(docs)]
      ]
}]

Changing the strings into numbers, the chart was rendered!

answered May 28, 2016 at 17:48

amankarn

718 bronze badges

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

Collectives™ on Stack Overflow

how to pass template variables to javascript

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