title: Displaying a Google Chart Using Django
body: <p>I have generated a variable <code>data</code> in Django with the following format:</p>
  
  <pre><code>data = [['100',10],['90',9],['80',8]]
  </code></pre>
  
  <p>and I've passed it off to my template using render_to_response:</p>
  
  <pre><code>return render_to_response('template.html', {
                                              'data': data,
                                              },
                                              context_instance=RequestContext(request))
  </code></pre>
  
  <p>In the template header I have placed a call to Google Charts to generate a line chart:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Number');
    data.addColumn('number', 'Number/10');
    data.addRows( {{ data }} );
  
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240, title: "Numbers"});
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I do this, nothing is displayed.  If I strip the strings out of <code>data</code> and try again, the chart appears, but obviously with no x-axis labels.</p>
  
  <p>I have also tried adding the data using the arrayToDataTable function:      </p>
  
  <pre><code>var data = google.visualization.arrayToDataTable([
        ['Number', 'Number/10'],
        {% for datum in data %}
            {{ datum }},
        {% endfor %}],
        false);
  </code></pre>
  
  <p>but this again fails to display any chart.</p>
  
  <p>Any suggestions on how I can change one of the above, or try another approach to get the x-axis labels to appear?</p>