Отображение диаграммы Google с использованием Django

Question

Я сгенерировал переменную data в Django в следующем формате:

data = [['100',10],['90',9],['80',8]]

и я передал его моему шаблону с помощью render_to_response:

return render_to_response('template.html', {
                                            'data': data,
                                            },
                                            context_instance=RequestContext(request))

В заголовке шаблона я поместил вызов в Google Charts для создания линейного графика:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
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"});
}
</script>

Когда я это делаю, ничего не отображается. Если я уберу строки из data и попытаюсь снова, появится диаграмма, но, очевидно, без меток оси X.

Я также попытался добавить данные с помощью функции arrayToDataTable:

var data = google.visualization.arrayToDataTable([
      ['Number', 'Number/10'],
      {% for datum in data %}
          {{ datum }},
      {% endfor %}],
      false);

но при этом снова не отображается ни один график.

Любые предложения о том, как я могу изменить один из вышеперечисленных или попробовать другой подход, чтобы появились метки оси X?

Answer 1

Вы должны отключить автоэкранирование ваших результатов. Вы можете сделать это, добавив безопасный фильтр:

data.addRows( {{ data|safe }} );

или

{% autoescape off %}
[...]
    {{ data }}
[...]
{% endautoescape %}

Мой совет, если вы можете установить дополнительные пакеты, использовать одну из этих оболочек:

http://code.google.com/p/google-chartwrapper/

https://github.com/jacobian/django-googlecharts/

Я не могу добавить более двух ссылок, но еще одна находится здесь: code.google.com/p/django-graphs/