Crear grafica de barras con Flet y Python


Vamos a crear una grafica de barra usando, flet y python, flet cuenta con funciones propias para hacer graficas por lo que no se necesita instalar nada.

Las graficas en flet funcionan con un componente BarChart que contiene dentro uno o mas componentes BarChartGroup y cada componente BarchartGroup se compone de elementos BarChartRod.

Los elementos BarChartRod tienen los valores de cada barra:

  • Valor de inicio Y
  • Valor de fin Y
  • Ancho
  • Color
  • Tooltip
  • Border Radius

Tambien se pueden cofigurar borde para el cuadro de la grafica.

Se puede configurar titulos y etiquetas, configurar si se va a expandir la grafica en toda la pantalla y activar si es interactiva, entre muchas mas configuraciones.

Codigo

A continuacion el codigo para hacer una grafica de barras con 5 barras.

import flet as ft


def main(page: ft.Page):
    chart = ft.BarChart( # definimos el componente de la grafica de barras
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod( # elemento de la grafica
                        from_y=0, # valor inicial de la barra
                        to_y=145, # valor final o altura de la barra
                        width=60, # ancho de la barra
                        color=ft.colors.PURPLE, # color de la barra
                        tooltip="HTML", # tooltip de una barra
                        border_radius=0, # radio del borde, para borde redondeado
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=115,
                        width=60,
                        color=ft.colors.YELLOW,
                        tooltip="PHP",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=35,
                        width=60,
                        color=ft.colors.BLUE,
                        tooltip="JAVASCRIPT",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[
                    ft.BarChartRod( # elemento de grafica
                        from_y=0, # valor inicial
                        to_y=65, # valor de la barra
                        width=60, # ancho de la barra
                        color=ft.colors.RED, # color de la barra
                        tooltip="PYTHON", # tooltip de la barra
                        border_radius=0, # border radio de la barra , para redondear bordes
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=4,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=25,
                        width=60,
                        color=ft.colors.PINK,
                        tooltip="JAVA",
                        border_radius=0,
                    ),
                ],
            ),
        ],
        # definimos un borde para la grafica
        border=ft.border.all(2, ft.colors.GREY_400),
        # definims un titulo para la grafica
        left_axis=ft.ChartAxis(
            labels_size=40, title=ft.Text("Fruit supply"), title_size=40
        ),
        bottom_axis=ft.ChartAxis( # asignamos valor a las etiquetas en la parte de abajo de cada grafica
            labels=[
                ft.ChartAxisLabel(
                    value=0, label=ft.Container(ft.Text("HTML"), padding=5)
                ),
                ft.ChartAxisLabel(
                    value=1, label=ft.Container(ft.Text("PHP"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=2, label=ft.Container(ft.Text("JAVASCRIPT"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=3, label=ft.Container(ft.Text("PYTHON"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=4, label=ft.Container(ft.Text("JAVA"), padding=10)
                ),
            ],
            labels_size=40,
        ),
        horizontal_grid_lines=ft.ChartGridLines(
            color=ft.colors.GREY_300, width=1, dash_pattern=[3, 3]
        ),
        tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300),
        max_y=210, # es necesario asignar el maximo valor Y de la grafica
        interactive=True, # debe ser interactiva para activar los tooltips
        expand=True, # para expandir el componente a todo el cuadro de la app
    )

    page.add(chart)


ft.app(main)

Guardamos el codigo como bar-chart-flet.py y para ejecutarlo usamos el comando:

py bar-chart-flet.py

El resultado es el siguiente:

Y listo, si tienen dudas, no olviden escribir sus comentarios, tambien les invito a suscribirse a mi blog y a mi canal de youtube https://youtube.com/evilnapsis

Leave a comment

Your email address will not be published. Required fields are marked *