django-chartjs

Django and ChartJS experiments.

This project was done with:

Python 3.8.2
Django 2.2.12
Bootstrap 4.0
ChartJS 2.9.3

How to run project?

Clone this repository.
Create virtualenv with Python 3.
Active the virtualenv.
Install dependences.
Run the migrations.

git clone https://github.com/rg3915/django-chartjs.git
cd django-chartjs
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python contrib/env_gen.py
python manage.py migrate

Este projeto foi feito com:

Python 3.8.2
Django 2.2.12
Bootstrap 4.0
ChartJS 2.9.3

Como rodar o projeto?

Clone esse repositório.
Crie um virtualenv com Python 3.
Ative o virtualenv.
Instale as dependências.
Rode as migrações.

git clone https://github.com/rg3915/django-chartjs.git
cd django-chartjs
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python contrib/env_gen.py
python manage.py migrate

Criando o projeto do zero

Baixe este boilerplate.

wget https://gist.githubusercontent.com/rg3915/b363f5c4a998f42901705b23ccf4b8e8/raw/39caa9f63aa693ed651cebd4bb503cebffc51f6d/boilerplatesimple.sh

Ele serve pra criar um projeto simples em Django com o settings pré-configurado.

source boilerplatesimple.sh

Após terminar o processo de instalação você pode deletar isso.

rm boilerplatesimple.sh

Chart.js

O Chart.js é uma biblioteca Javascript para gerar gráficos.

Clicando em Get Started temos o seguinte exemplo:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

Criando os templates

Para ver este exemplo funcionando precisamos criar um template:

cd myproject/core
mkdir -p templates/includes

Vamos um template base.

cd templates
wget https://gist.githubusercontent.com/rg3915/0144a2408ec54c4e8008999631c64a30/raw/be05f2f8a483c6ddab3705c13bff0ac5fc2223be/base.html
wget https://gist.githubusercontent.com/rg3915/0144a2408ec54c4e8008999631c64a30/raw/ecbd782e23b3886ce64b318ef5ea194ed89b8ab3/index.html#

# Vá para a subpasta includes
wget https://gist.githubusercontent.com/rg3915/0144a2408ec54c4e8008999631c64a30/raw/ee78c798ed1fd57e2ba7328342ac3f4ab20268be/nav.html

Criando views e url.

Vamos criar a url

# core/urls.py
from django.urls import path
from myproject.core import views as v


app_name = 'core'


urlpatterns = [
    path('', v.index, name='index'),
]

E a views.py

from django.shortcuts import render


def index(request):
    template_name = 'index.html'
    return render(request, template_name)

Rodando a aplicação

Antes de rodar, faça

# Vá para a pasta onde está o manage.py
cd ../..
python contrib/env_gen.py
python manage.py migrate

E por fim, rode a aplicação.

python manage.py runserver

Inserindo o gráfico

Vamos copiar o exemplo de Get Started para dentro de index.html.

Veja o resultado em index.html.

E em base.html acrescente, no final do arquivo

    ...
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

Parte 2

Trabalhando com dados reais

Vamos trabalhar com dados reais vindos do banco de dados.

Para isso vamos criar alguns modelos: product e category.

models.py

Vamos editar o arquivo models.py.

cat << EOF > models.py
from django.db import models


class Category(models.Model):
    title = models.CharField('categoria', max_length=50, unique=True)

    class Meta:
        verbose_name = 'categoria'
        verbose_name_plural = 'categorias'

    def __str__(self):
        return self.title


class Product(models.Model):
    title = models.CharField('título', max_length=100, unique=True)
    price = models.DecimalField('preço', max_digits=8, decimal_places=2)
    category = models.ForeignKey(
        Category,
        verbose_name='categoria',
        on_delete=models.SET_NULL,
        null=True,
        blank=True
    )

    class Meta:
        ordering = ('title',)
        verbose_name = 'produto'
        verbose_name_plural = 'produtos'

    def __str__(self):
        return self.title
EOF

Migrações

Vamos criar as migrações do banco.

python manage.py makemigrations
python manage.py migrate

Inserindo alguns dados

Para isso abra o shell_plus.

python manage.py shell_plus

E rode o script a seguir:

# Criando as categorias
categories = ('Bebida', 'Sobremesa', 'Lanche', 'Fruta', 'Refeição')
[Category.objects.create(title=category) for category in categories]

# Criando os produtos
import csv
import io
import urllib.request
from pprint import pprint


def csv_online_to_list(url: str) -> list:
    '''
    Lê um CSV a partir de uma url.
    '''
    url_open = urllib.request.urlopen(url)
    reader = csv.DictReader(io.StringIO(
        url_open.read().decode('utf-8')), delimiter=',')
    csv_data = [line for line in reader]
    return csv_data


products = csv_online_to_list('https://raw.githubusercontent.com/rg3915/django-chartjs/master/fix/products.csv')

pprint(products)

aux = []

for product in products:
    data = {
        'title': product['title'],
        'price': product['price']
    }
    category_title = product.get('category')
    category = Category.objects.filter(title=category_title).first()
    obj = Product(**data)
    if category:
        obj = Product(category=category, **data)
    aux.append(obj)

Product.objects.bulk_create(aux)

Visualizando os dados no Admin

Talvez você ainda não tenha criado um super usuário...

python manage.py createsuperuser --username="admin"

Edite admin.py

cat << EOF > myproject/core/admin.py
from django.contrib import admin
from .models import Category, Product


@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    list_display = ('__str__', 'category',)
    search_fields = ('title',)
    list_filter = ('category',)


admin.site.register(Category)
EOF

Pegando os dados do banco para retornar no gráfico

cat << EOF > myproject/core/views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import Product


def index(request):
    template_name = 'index.html'
    return render(request, template_name)


def products(request):
    products = Product.objects.values('title', 'price')
    data = {
        'data': [
            {
                'title': item['title'],
                'value': float(item['price'])
            }
            for item in products
        ]
    }
    return JsonResponse(data)
EOF

Editando o template

TODO

Gráfico de pizza

Em inglês este gráfico é chamado de pie.

# core/urls.py
    path('api/categories/', v.categories, name='categories'),

# views.py
from django.db.models import Count
from django.http import JsonResponse
from .models import Product

# ...

def categories(request):
    categories = Product.objects\
        .values('category')\
        .annotate(value=Count('category'))\
        .order_by('category')\
        .values('category__title', 'value')
    data = {
        'data': [
            {
                'label': item['category__title'],
                'value': item['value'],
            }
            for item in categories
        ]
    }
    return JsonResponse(data)

pyTonyc/django-chartjs