Introdução ao Pygal: Criador de Gráficos SVG em Python

() translation by (you can also view the original English article)

SVG (Gráficos Vetoriais Escaláveis) é um formato de imagem que define gráficos vetoriais no formato XML. Nesse tutorial, veremos como usar Pygal, uma biblioteca de plotagem de gráfico em Python.

Começando

Não há dependências para instalar Pygal. Está disponível para Python 2.7+. Assumindo que temos Python e pip instalados no sistema, instalemos Pygal com pip.

1	pip install pygal

Se quisermos a versão mais atual de Pygal, clonemos o repositório do Pygal no GitHub.

Criando um Gráfico de Barras

Visualização de dados explica a informação que temos na forma de mapas e gráficos. Nesse tutorial, veremos como criar uma gráfico de barra usando Pygal em uma aplicação web Python com Flask. Comecemos criando uma aplicação web Flask simples. Primeiro, instalemos Flask se não o tivermos ainda:

1	pip install flask

Criemos um arquivo chamado app.py e dicionemos o seguinte:

from flask import Flask
app = Flask(__name__)

@app.route("/")
def home():
    return "Tutsplus : Welcome to PyGal Charting Library !! "

if __name__ == "__main__":
    app.run()

Assumamos que temos dados para uma lista de marca anual de alguns anos. Os dados estariam no formato JSON. Eis um exemplo do JSON:

1	[{
2	"year": 2000,
3	"mark": 85
4	}, {
5	"year": 2001,
6	"mark": 75
7	}, {
8	"year": 2002,
9	"mark": 65
10	}, {
11	"year": 2003,
12	"mark": 95
13	}, {
14	"year": 2004,
15	"mark": 85
16	}, {
17	"year": 2005,
18	"mark": 55
19	}]

Mostraremos Year no eixo X e Mark no eixo Y. Então, comecemos criando uma nova rota para a aplicação:

1	@app.route("/bar")
2	def bar():
3	# Charting code will be here

Carregaremos os dados do arquivo JSON, então precisaremos da biblioteca json e junto da pygal.

1	import pygal
2	import json

Leiamos os dados JSON abrindo o arquivo em modo de leitura e carreguemos os dados.

1	with open('bar.json','r') as bar_file:
2	data = json.load(bar_file)

Criemos um objeto de gráfico Bar da biblioteca pygal.

1	chart = pygal.Bar()

Quando tivermos o objeto, precisamos configurar os eixos X e Y. Para adicionar as marcas ao eixo Y, leremos as marcas como uma lista do objeto de dados JSON.

1	mark_list = [x['mark'] for x in data]

Similarmente, leiamos o ano do objeto JSON como lista.

1	[x['year'] for x in data]

Atribuamos os dados do eixo X e Y ao objeto do gráfico.

1	chart.add('Annual Mark List',mark_list)
2	chart.x_labels = [x['year'] for x in data]

Agora, precisamos renderizar a imagem SVG do gráfico de barra em um arquivo. No Flask, os arquivos estáticos ficam numa pasta chamada static, então criemo-no. Nele, criemos uma pasta images. Adicionemos a seguinte linha de código para salvar a imagem SVG num arquivo.

1	chart.render_to_file('static/images/bar_chart.svg')

Criemos uma pasta template dentro da pasta do projeto. Dentro dela, criemos o arquivo app.html e adicionemos o código HTML abaixo, nele.

<html>
<head>
     <title> Tutsplus - Pygal Charting Library</title>
</head>
<body>
     <h2> Tutsplus - Pygal Charting Library</h2>
     <div>
         <p>Bar Chart</p>
         <object type="image/svg+xml" data="{{image_url}}">
          Your browser does not support SVG
         </object>
     </div>
</body
</html>

Renderizaremos o gráfico de barras dentro do arquivo app.html. Por fim, o que precisamos fazer é renderizar o modelo com o parâmetro image_url, que servirá como data do elemento. Eis a rota /bar e o método:

# -------------------------------------------
# Charting route which displays the bar chart
# -------------------------------------------

@app.route("/bar")
def bar():
    with open('bar.json','r') as bar_file:
        data = json.load(bar_file)
    chart = pygal.Bar()
    mark_list = [x['mark'] for x in data]
    chart.add('Annual Mark List',mark_list)
    chart.x_labels = [x['year'] for x in data]
    chart.render_to_file('static/images/bar_chart.svg')
    img_url = 'static/images/bar_chart.svg?cache=' + str(time.time())
    return render_template('app.html',image_url = img_url)

Adicionamos a variável de url cache à img_url para prevenir que a imagem seja recarregada do cache do navegador.

Salvemos as mudanças e executemos a aplicação:

1	python app.py

Acessemos http://localshot:5000/bar e devemos ver o gráfico de barras baseado nos dados JSON.

Vários Gráficos de Barra

Podemos adicionar várias barras ao gráfico. Suponhamos que temos o mesmo JSON com alguns parâmetros extras a serem representados. Eis um exemplo:

1	[{
2	"year": 2000,
3	"mark": 85,
4	"tournament": 50
5	}, {
6	"year": 2001,
7	"mark": 75,
8	"tournament": 70
9	}, {
10	"year": 2002,
11	"mark": 65,
12	"tournament": 75
13	}, {
14	"year": 2003,
15	"mark": 95,
16	"tournament": 25
17	}, {
18	"year": 2004,
19	"mark": 85,
20	"tournament": 67
21	}, {
22	"year": 2005,
23	"mark": 55,
24	"tournament": 49
25	}]

Para mostra uma barra para o torneio, precisamos de uma lista do resultados do torneio e adicioná-la ao objeto do gráfico.

1	tourn_list = [x['tournament'] for x in data]
2	chart.add('Tournament Score',tourn_list)

Salvemos as mudanças e reiniciemos o servidor. Acessemos http://localhost:5000/bar e devemos ver o gráfico re-renderizado.

Adicionando Estilos Customizados

É possível adicionar novos estilos ao gráfico. Por exemplo, para mudar a cor das barras, podemos importar o estilo Pygal.

1	from pygal.style import Style

Definamos um estilo, como mostrado abaixo, para especificar cores das barras e a cor do plano de fundo do gráfico.

1	custom_style = Style(
2	colors=('#991515','#1cbc7c'),
3	background='#d2ddd9'
4	)

Apliquemos o estilo customizado ao gráfico ao criar o objeto de gráfico de barras.

1	chart = pygal.Bar(style = custom_style)

Salvemos as mudanças e reiniciemos o servidor. Acessemos http://localhost:5000/bar e devemos ver o gráfico de barra renderizado com o estilo customizado na tela.

PyGal Mutiple Bar Chart with Custom Style

Resumindo

Nesse tutorial, vimos como usar o Pygal, uma biblioteca de plotagem de gráficos SVG em Python. Aprendemos como criar gráficos de barra em uma aplicação Flask. Vimos como adicionar várias barras ao gráfico e como customizar o estilo do gráfico.

O que vimos é apenas a ponta do iceberg e podemos muito mais com Pygal. Recomendamos a leitura da documentação oficial do Pygal para mais informações.

Adicionalmente, não hesite em ver o que há disponível para venda na Envato Market nem de tirar suas dúvidas e prover feedback valioso usando os comentários abaixo.

O código fonte desse tutorial está disponível no GitHub.