Многие веб-разработчики время от времени сталкиваются с необходимостью визуализировать сравнительно большое количество данных при помощи диаграмм (далее я буду называть их графиками, хоть это и не совсем верно). Задача не нова, и в сети есть множество готовых решений: работающие на стороне сервера и на стороне клиента, использующие изображения, Canvas, SVG, Flash, Silverlight…
В этой статье я расскажу про django-google-charts и некоторые особенности использования Google Chart Tools для построения графиков на сайте под управлением Django.
Часто, когда нужно добавить график на страницу, разработчик идет по пути наименьшего сопротивления: копирует JavaScript из примера в интернете и как-нибудь выводит в него данные из приложения. Получается что-то наподобие:
var chart_data = [ {% for row in chart_data %} [{{ row.0 }}, {{ row.1 }}], {% endfor %} ];
Почему это плохо?
- Код тяжело читается, вследствие чего легко допустить ошибку. Вы же заметили ошибку в моем примере? :)
- Сложно масштабировать. Когда нужно добавить второй график на страницу, обычно копируют этот же кусок кода еще раз и меняют имена переменных. В результате получается нечитаемая каша, отлаживать это и вносить изменения достаточно неприятно.
- Сильное связывание с контекстом. Повторное использование такого шаблона ограничено.
Постановка задачи
Хорошее решение для рисования графиков:
- Позволяет просто и понятно добавлять новые графики на сайт и убирать ненужные;
- Соблюдает принцип DRY для определения общих элементов (например, цветовой схемы);
- Можно повторно использовать;
- Не изобретает нового API.
Вариант решения
Приложение для компоновки графиков django-google-charts выросло из небольшого набора хаков в моем текущем проекте. Алярма: это первый публичный релиз, возможны причудливые баги. Исправления и замечания всячески приветствуются.
Установка
$ pip install django-google-charts # или $ easy_install django-google-charts
Добавляем
'googlecharts' в INSTALLED_APPS.Как это работает (общий вид)
{% load googlecharts %} {% googlecharts %} {% data переменная "необязательное имя" %} {# (именованный) набор данных #} {% col "тип" "название" %}...{% endcol %} {# формат #} {% col "тип" "название" %}...{% endcol %} {# еще формат #} ... {% enddata %} {% options "необязательное имя" %} {# (именованный) набор опций #} ... {% endoptions %} {% graph "#id" "данные" "опции" %} {# точка сборки #} {% endgooglecharts %}
Расскажу немного про назначение каждого тега.
{% googlecharts %}...{% endgooglecharts %}
Подключает необходимые скрипты, является контейнером для всей конструкции. Ничего интересного.
{% data переменная "имя" %}...{% enddata %}
Именованный набор данных. Имя можно не указывать (получится
"default").{% col "тип" "название" %}...{% endcol %}
Формат. Типы данных в Google Visualization API вот такие:
'string' 'number' 'boolean' 'date' 'datetime' 'timeofday'
Подробнее можно почитать в документации.
Внутрь тега передается специальная переменная
val, в этом месте ее можно форматировать:{% col "string" "Date" %}'{{ val|date:"M j" }}'{% endcol %} {# или, например #} {% col "number" %}{{ val|floatformat:2 }}{% endcol %}
Результат должен соответствовать заявленному типу; кавычки вокруг строки сами не поставятся.
Пример. Допустим, в блок
{% data %} мы передали такую переменную контекста:[['foo', 32], ['bar', 64], ['baz', 96]]
Нам нужны два тега
{% col %}, по количеству элементов в строке входных данных. Первый получит на вход 'foo', 'bar' и 'baz'; второй, соответственно, 32, 64 и 96. Реализация (самая простая) может выглядеть так:{% col "string" "Name" %}"{{ val }}"{% endcol %} {% col "number" "Value" %}{{ val }}{% endcol %}
{% options "имя" %}...{% endoptions %}
Параметры графика.
{% options %} kind: "LineChart", options: { width: 300, height: 240 // ... } {% endoptions %}
Внутри тега объект JavaScript, можно использовать глобальные переменные и вызывать функции. Типы графиков и поддерживаемые опции для каждого типа перечислены вот здесь.
{% graph "id_элемента" "данные" "опции" %}
Выводим график в элемент на странице. Последние два параметра можно не указывать, получится
"default" "default".Пример использования
Предположим, у нас есть такая модель:
class Payment(models.Model): amount = models.DecimalField(max_digits=11, decimal_places=4) datetime = models.DateTimeField()
Для подготовки данных к отображению в виде графика можно использовать django-qsstats-magic.
from qsstats import QuerySetStats def view_func(request): start_date = ... end_date = ... queryset = Payment.objects.all() # считаем количество платежей... qsstats = QuerySetStats(queryset, date_field='datetime', aggregate=Count('id')) # ...в день за указанный период values = qsstats.time_series(start_date, end_date, interval='days') return render_to_response('template.html', {'values': values})
Метод
time_series возвращает данные в таком виде:[[date, value], [date, value], ...]
В файле template.html:
{% load googlecharts %} <div id="count_graph"></div> {% googlecharts %} {% data values "count" %} {% col "string" "Date" %}"{{ val|date:"M j" }}"{% endcol %} {% col "number" "# of payments" %}{{ val }}{% endcol %} {% enddata %} {% options %} kind: "LineChart", options: { backgroundColor: "#f9f9f9", colors: ["#09f"], gridlineColor: "#ddd", legend: "none", vAxis: {minValue: 0}, chartArea: {left: 40, top: 20, width: 240, height: 180}, width: 300, height: 240 } {% endoptions %} {% graph "count_graph" "count" %} {# используем опции по умолчанию #} {% endgooglecharts %}
Масштабирование
Теперь, чтобы добавить еще один график на страницу, нужно сделать следующее:
– Собрать данные (views.py):
# сумма всех платежей в день за указанный период summary = qsstats.time_series(start_date, end_date, interval='days', aggregate=Sum('amount')) return render_to_response('template.html', {'values': values, 'summary': summary})
– Добавить в template.html:
<div id="count_sum"></div> ... {% data summary "sum" %} {% col "string" "Date" %}"{{ val|date:"M j" }}"{% endcol %} {% col "number" "Paid amount, USD" %}{{ val|floatformat:2 }}{% endcol %} {% enddata %} ... {% graph "count_sum" "sum" %} {# используем опции по умолчанию, снова #}
GitHub
Исходный код django-google-charts содержит также демонстрационный проект. Чтобы его запустить, достаточно выполнить:
$ python manage.py syncdb --noinput # создает базу данных sqlite в /tmp $ python manage.py populatedb # наполняет ее случайными данными $ python manage.py runserver
Выглядит тестовый проект вот так:
Ограничения первого публичного релиза (ложка дегтя)
- Только один тег
{% googlecharts %}на странице; - (Почти) нет проверки ошибок, особенно в JavaScript;
- Исчезающе мало документации.
