() translation by (you can also view the original English article)
SVG (Gráficos Vectoriales Escalables) es un formato de imagen que define gráficos basados en vectores en formato XML. En éste tutorial, tendrás una visión de cómo comenzar a usar Pygal, una librería en Python para la creación de gráficos en formato SVG.
Comencemos
No hay dependencias para instalar Pygal. Está disponible para Python 2.7+. Asumiendo que tienes instalado Python y pip en tu sistema, instala Pyga usando pip.
1 |
pip install pygal
|
Si quieres usar la versión más reciente de Pygal, observa el repositorio de Pygal en Github y clónalo.
Creando un Gráfico de Barras
La visualización de datos explica la información que tenemos en la forma de gráficos. En éste tutorial, verás cómo crear un gráfico de barras usando la librería Pygal dentro de una aplicación web Python Flask. Comencemos creando una sencilla aplicación. Primero, instala flask si aún no lo tienes instalado.
1 |
pip install flask
|
Crea un archivo llamado app.py y agrega el siguiente código:
1 |
from flask import Flask |
2 |
app = Flask(__name__) |
3 |
|
4 |
@app.route("/") |
5 |
def home(): |
6 |
return "Tutsplus : Welcome to PyGal Charting Library !! " |
7 |
|
8 |
if __name__ == "__main__": |
9 |
app.run() |
Asume que tenemos algunos datos para una lista de marcas anuales para ciertos años. Los datos estarían en formato JSON. Aquí está un ejemplo de los datos 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 |
}]
|
Estarás visualizando Year a lo largo del eje X y Mark a lo largo del eje Y. Así que comencemos creando una nueva ruta para nuestra aplicación Python:
1 |
@app.route("/bar") |
2 |
def bar(): |
3 |
# Charting code will be here |
Estarás cargando datos desde un archivo JSON, así que necesitaremos importar la librería json junto con la librería pygal.
1 |
import pygal |
2 |
import json |
Lee los datos JSON al abrir el archivo en modo lectura, y carga los datos JSON.
1 |
with open('bar.json','r') as bar_file: |
2 |
data = json.load(bar_file) |
Crea un objeto gráfico de barra Bar de la librería pygal.
1 |
chart = pygal.Bar() |
Una vez que tengas el objeto del gráfico, necesitas establecer el eje X y el eje Y. Para agregar las marcas en el eje Y, leeremos las marcas como una lista del objeto del los datos JSON.
1 |
mark_list = [x['mark'] for x in data] |
Similarmente, lee el año del objeto de los datos JSON como una lista.
1 |
[x['year'] for x in data] |
Asigna los datos del eje X y el eje Y al objeto del gráfico.
1 |
chart.add('Annual Mark List',mark_list) |
2 |
chart.x_labels = [x['year'] for x in data] |
Ahora necesitas renderizar la imagen SVG del gráfico de barras en un archivo. En Python Flask, los archivos estáticos son servidos en un directorio llamado static, así que crea un directorio llamado static dentro del directorio del proyecto. Dentro del directorio static, crea un directorio images. Agrega la siguiente línea de código para renderizar la imagen SVG a un archivo.
1 |
chart.render_to_file('static/images/bar_chart.svg') |
Crea un directorio template dentro del directorio del proyecto. Dentro del directorio template, crea un archivo llamado app.html. Agrega el siguiente código HTML al archivo app.html:
1 |
<html>
|
2 |
<head>
|
3 |
<title> Tutsplus - Pygal Charting Library</title> |
4 |
</head>
|
5 |
<body>
|
6 |
<h2> Tutsplus - Pygal Charting Library</h2> |
7 |
<div>
|
8 |
<p>Bar Chart</p> |
9 |
<object type="image/svg+xml" data="{{image_url}}"> |
10 |
Your browser does not support SVG |
11 |
</object>
|
12 |
</div>
|
13 |
</body
|
14 |
</html> |
Renderizarás nuestro gráfico de barras dentro del archivo app.html. Finalmente, todo lo que necesitas hacer es renderizar la plantilla junto con el parámetro image_url, que servirá como los datos data para el elemento. Aquí está la ruta /bar completa y el método:
1 |
# -------------------------------------------
|
2 |
# Charting route which displays the bar chart
|
3 |
# -------------------------------------------
|
4 |
|
5 |
@app.route("/bar") |
6 |
def bar(): |
7 |
with open('bar.json','r') as bar_file: |
8 |
data = json.load(bar_file) |
9 |
chart = pygal.Bar() |
10 |
mark_list = [x['mark'] for x in data] |
11 |
chart.add('Annual Mark List',mark_list) |
12 |
chart.x_labels = [x['year'] for x in data] |
13 |
chart.render_to_file('static/images/bar_chart.svg') |
14 |
img_url = 'static/images/bar_chart.svg?cache=' + str(time.time()) |
15 |
return render_template('app.html',image_url = img_url) |
He añadido un query string o cadena de consulta cache al img_url para evitar que la imagen se cargue desde el cache del navegador.
Guarda los cambios de arriba y trata de ejecutar la aplicación:
1 |
python app.py |
Apunta tu navegador hacia http://localhost:5000/bar y deberías poder ver el gráfico de barras basado en los datos JSON.
Múltiples Gráficos de Barras
También puedes añadir múltiples barras al existente gráfico de barras. Supon que tienes los mismos datos JSON con unos cuántos parámetros extra que necesitan ser representados. Aquí está un ejemplo:
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 desplegar una barra de los datos del torneo, necesitas obtener una lista de la puntuación del torneo y agregarlos al objeto del gráfico de barras.
1 |
tourn_list = [x['tournament'] for x in data] |
2 |
chart.add('Tournament Score',tourn_list) |
Guarda los cambios de arriba y reinicia el servidor. Apunta tu navegador a http://localhost:5000/bar y deberías tener el gráfico de barras renderizado.
Agregando un Estilo Personalizado
También puedes agregar estilos personalizados a gráficos de barras. Por ejemplo, para cambiar los colores de las barras, necesitas importar el estilo Pygal.
1 |
from pygal.style import Style |
Define el estilo personalizado como se muestra para especificar colores para la barra y especificar un color de fondo para el gráfico.
1 |
custom_style = Style( |
2 |
colors=('#991515','#1cbc7c'), |
3 |
background='#d2ddd9' |
4 |
)
|
Aplica el estilo personalizado al gráfico cuándo se crea el objeto del gráfico de barras.
1 |
chart = pygal.Bar(style = custom_style) |
Guarda los cambios de arriba y reinicia el servidor. Apunta tu navegador a http://localhost:5000/bar y deberías poder ver el gráfico de barras con el estilo personalizado renderizado en la pantalla.
Concluyendo
En éste tutorial, viste cómo comenzar a utilizar Pygal, una librería en Python para la creación de gráficos SVG. Aprendiste cómo usar Pygal para crear un gráfico de barras en una aplicación Flask. Viste cómo agregar múltiples barras al gráfico de barras y personalizar el estilo del gráfico de barras.
Lo que viste es solo la punta del iceberg, y puede hacer mucho más usando Pygal. Te recomendaría leer la documentación oficial de Pygal para obtener información detallada.
Adicionalmente, no dudes en ver lo que tenemos disponible a la venta y para estudio en Envato Market, y no dudes en formular cualquier pregunta y proporcionar tu valiosa retroalimentación usando el medio de abajo.
El código fuente de éste tutorial está disponible en Github.
