How do I pass django context variables into javascript?

Question

I'm using highcharts and it requires me to pass into it variables such as this

 series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33
        }, {
            name: 'Chrome',
            y: 24.03,
            sliced: true,
            selected: true
        }, {
            name: 'Firefox',
            y: 10.38
        }, {
            name: 'Safari',
            y: 4.77
        }, {
            name: 'Opera',
            y: 0.91
        }, {
            name: 'Proprietary or Undetectable',
            y: 0.2
        }]

How would I pass this into my javascript?

you can use python dictionary

BugHunter
– BugHunter

2017-03-24 21:56:19 +00:00
Commented Mar 24, 2017 at 21:56 — BugHunter
– BugHunter, Commented Mar 24, 2017 at 21:56

solarissmoke · Accepted Answer · 2017-03-25 05:04:33Z

2

You can generate the data structure in Python, and then pass it to your script as a JSON object. You need to use a library like django-argonauts to do this safely.

In your view:

data = {
    'series': [
        'name': 'Brands',
        'colorByPoint': true,
        # etc...
    ]
}

Pass this as a context variable to your template.

Then, in the template:

{% load argonauts %}
<script>
  (function () {
      var data = {{ data|json }};
      // do something with data
  })();
</script>

Where |json is a template filter provided by the Argonauts library, which will handle properly escaping all the data for you.

answered Mar 25, 2017 at 5:04

solarissmoke

31.7k15 gold badges76 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

How do I pass django context variables into 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