How to pass context from views to JS file Django

Question

I am using Google charts to show data in my webapp. Right now these charts are in the script tag in my templates (HTML) like so.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date',  'Low', {role: 'annotation'},  'Medium', {role: 'annotation'},  'High', {role: 'annotation'}, 'Emergency',],
      ['{{three_sun}}', 124,  124,    163,    163,     87,    87,   0],
      ['{{two_sun}}', 120,  120,    160,    160,     80,    80,   0],
      ['{{last_sun}}', 127,  127,    159,    159,     89,    89,   0],
      ['{{this_sun}}', {{total_low}},  {{total_low}},    {{total_medium}},    {{total_medium}},     {{total_high}},    {{total_high}},   {{total_emergency}}]

    ]);

    var options = {
      title: 'All Bugs',
      vAxis: {title: 'Total Bugs'},
      isStacked: true
    };

    var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
</script>

I am trying to clean up this project and have all my scripts coming from static .js files.

Now obviously it doesn't recognize {{three_sun}}. I need to know how i can be able to use this chart with the context variables, from a static.js like so.

chart.js

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date',  'Low', {role: 'annotation'},  'Medium', {role: 'annotation'},  'High', {role: 'annotation'}, 'Emergency',],
          ['{{three_sun}}', 124,  124,    163,    163,     87,    87,   0],
          ['{{two_sun}}', 120,  120,    160,    160,     80,    80,   0],
          ['{{last_sun}}', 127,  127,    159,    159,     89,    89,   0],
          ['{{this_sun}}', {{total_low}},  {{total_low}},    {{total_medium}},    {{total_medium}},     {{total_high}},    {{total_high}},   {{total_emergency}}]

        ]);

        var options = {
          title: 'All Bugs',
          vAxis: {title: 'Total Bugs'},
          isStacked: true
        };

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

and reference it like this in my template:

<head>
   {% load static %}
   <script src="{% static 'path/to/charts.js' %></script>
</head>
<body>
   <div id="chart_div"></div>
</body>

How can i use these {{ }} variables in my .js file?

score 0 · Answer 1 · answered Jul 24 '19 at 19:11

0

Found the answer here: Django Template Variables and Javascript

So in the template add a script tag and make variables that will then be able to be used in the js file.

<script type="text/javascript">
    var a = "{{three_sun}}"
</script>

answered Jul 24 '19 at 19:11

Mfreeman

3,548
7
23
37

How to pass context from views to JS file Django

1 Answers1