title: Django - Best way to refresh a div in a Template using Javascript?
body: <p>I want to refresh the <code>&lt;div&gt;</code> that my google chart is embedded in every 30 seconds to display updates to the data in the model that it is using.</p>
  
  <p>here is the template:</p>
  
  <p>metrics.html</p>
  
  <pre><code>{% extends 'metrics/metrics_header.html' %}
  {% block content %}
  
      &lt;h1&gt;Metrics&lt;/h1&gt;
      &lt;p&gt;Submitted = {{ submitted }},
          Conforming = {{ conforming }}
          Transcoding = {{ transcoding }}
          Complete = {{ complete }}
          Error = {{ error }}
      &lt;/p&gt;
  
        &lt;script type="text/javascript"&gt;
          google.charts.load("current", {packages:['corechart']});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
                  ['Job State', 'Jobs', { role: "style" }],
                  ['Submitted', {{ submitted }},'blue'],
                  ['Conforming', {{ conforming }},'purple'],
                  ['Transcoding', {{ transcoding }},'yellow'],
                  ['Complete', {{ complete }},'green'],
                  ['Error', {{ error }},'red']
            ]);
  
            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                             { calc: "stringify",
                               sourceColumn: 1,
                               type: "string",
                               role: "annotation" },
                             2]);
  
            var options = {
              title: "Total Number of Jobs Processed",
              bar: {groupWidth: "100%"},
              legend: { position: "none" },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
            chart.draw(view, options);
        }
        &lt;/script&gt;
  &lt;div id="columnchart_values" style="width: 100%; height:600px;"&gt;&lt;/div&gt; 
  {% endblock %}
  </code></pre>
  
  <p>I have been using this to refresh the entire page: :</p>
  
  <pre><code>&lt;script&gt;
      setTimeout(function(){
          window.location.reload(true);
      }, 5000);
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can imagine it looks really bad when the entire page reloads every 5 seconds, is there a more ecstatically pleasing way to reload the <code>&lt;div&gt;</code>'s that contain jinja2 variables?</p>