Chartkick - JavaScriptowe wykresy zintegrowane z Django

Share

Chartkick to aplikacja, narzędzie do dynamicznego tworzenia wykresów na stronach internetowych. Dostępna jest wersja dla JavaScript, Ruby, jak i dla Pythona. Wersja dla Pythona integruje się z Django i Flaskiem. Zobaczmy co ta aplikacja potrafi.

Instalacja

Zaczynamy standardowo, czyli od instalacji paczki z pypi:

W settingsach Django dodajemy:

INSTALLED_APPS = (
    'chartkick',
)

import chartkick
STATICFILES_DIRS = (
    chartkick.js(),
)

W szablonach, w których chcemy mieć wykresy musimy dodać parę plików JS. Dostępne są dwa backendy - Google Charts oraz Highcharts. W zależności od tego, który backend wybieramy dodajemy różne pliki. Dla Google Charts:

<script src="http://www.google.com/jsapi"></script>
<script src="static/chartkick.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="static/chartkick.js"></script>

Użytkowanie

Kilka przykładowych wykresów znajdziemy na githubie. Żeby osiągnąć taki efek będziemy musieli przekazać do szablonu dane do wykresu - w postaci słownika albo listy, oraz użyć taga szablonowego dostarczanego przez Chartkick. Oto przykład od strony szablonu:

{% load chartkick %}
{% pie_chart data with height='400px' %}
{% line_chart line_data %}

context['data'] = {'Python': 52.9, 'Jython': 1.6, 'Iron Python': 27.7}
context['line_data'] = list(enumerate(range(1, 20)))

Z czego wykres liniowy domyślnie oś X interpretuje jako datę/czas a nie jako liczbę. Na githubie znajdziemy też przykłady bardziej złożone wykresy (np. wiele serii danych na wykresie liniowym), choć z Chartkicka raczej nie wyciągniemy nic więcej ponad to. Do bardziej złożonych wykresów naukowych trzeba będzie użyć lepszej biblioteki, np. matplotlib.

Wykresy Chartkick z backendem Highcharts

Wykresy Chartkick z backendem Google Charts

Share

Django, 29 December 2013