DesempenhoJavaScript

Exibindo gráficos com Python no navegador utilizando PyScript

Hoje vamos mostrar como exibir gráficos com Python diretamente no seu código HTML e isso é possível graças ao PyScript (https://pyscript.net). PyScript é uma estrutura que permite aos usuários criar aplicativos Python no navegador usando a interface do HTML a estrutura PyScript oferece aos usuários em todos os níveis de experiência acesso a uma linguagem de programação expressiva e fácil de aprender com inúmeras aplicações.

Existem várias formas de exibir gráficos no seu navegador, e paticamente toda linguagem de programação possui este recurso inclusive Python, a diferença do PyScript é que lhe permite que esta programação seja no lado cliente, ou seja, no navegador do usuário semelhante ao JavaScript. E isso é excelente para quem já programa em Python.

Lembrando que a SOLOWEB além de oferecer Hospedagem de Sites, Servidores Dedicados, Servidores VPS com o menor custo do Brasil, também desenvolve soluções de software e sites para sua empresa, faça uma cotação é rápido e sem custo, acesse: www.soloweb.com.br

Para este exemplo também vamos utilizar o Matplotlib (https://matplotlib.org/) sendo uma biblioteca de software para criação de gráficos e visualizações de dados em geral, feita para e da linguagem de programação Python (Wikipédia)

Precisando de uma hospedagem de site ou de um servidor dedicado personalizado, seja para ambiente de teste, desenvolvimento ou de produção? E com um suporte de especialistas, que ti, ajudam a resolver os problemas o mais rápido possível? A SoloWeb tem o prazer em ti, ajudar com isso. Entre em contato conosco e faça uma cotação agora mesmo, acesse: www.soloweb.com.br.

E vamos ao que interessa.

A melhor parte desde recurso é a praticidade que basta adicionar essas duas linhas a sua página HTML:

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

A primeira linha é inclusão do estilo (CSS) e na segunda linha o JavaScript que baixa todas as dependências que faz com que o PyScript funcione.

Então vamos ver como fica nosso arquivo HTML com um exemplo simples:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
	
  </head>

  <body>

    Minhas frutas preferidas:

    <py-script>

    frutas = ["Maçã", "Banana", "Laranja","Goiaba"]
    for x in frutas:
        print(x) 
 
    </py-script>

  </body>
</html>

Observe o importe do CSS e do JavaScript

E nosso código Python nas tags <py-script></py-script>

Com isso ao carregar nossa página tem o seguinte resultado:

Ok, agora e como seria o gráfico que informamos?

Vamos o código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
    <py-env>
      - matplotlib
    </py-env>
    </head>
    <body>
      Minhas frutas preferidas:
      <div id="grafico" style="width: 100%; height: 100%"></div>
      <py-script output="grafico">
        import matplotlib.pyplot as plt

        labels = 'Maçã', 'Banana', 'Laranja', 'Goiaba'
        sizes = [15, 30, 45, 10]
        explode = (0, 0.1, 0, 0)  # only "explode" the 2nd slice (i.e. 'Hogs')

        fig1, ax1 = plt.subplots()
        ax1.pie(sizes, explode=explode, labels=labels, autopct='%1.1f%%', shadow=True, startangle=90)
        ax1.axis('equal')  

        plt
      </py-script>
    </body>
</html>

Agora temos recursos novos além do código Python que gera o gráfico:

  • Usamos o bloco <py-env> para definir as bibliotecas que vamos utilizar como uma lista, precisa informar uma biblioteca por linha, neste caso utilizamos apenas uma.
  • Indicamos que vamos desenhar um gráfico especificando-o no bloco <py-script output=grafico”>.

E o resultado é:

É isso, nesse post vimos como podemos executar código Python diretamente no browser com o PyScript, abrindo um leque enorme de possibilidades!

O PyScript parece promissor, no entanto, ainda não recomendado para uso em produção, pois pode abrir novos problemas de segurança.

Também não irá substituir o JavaScript, mas já possibilita o desenvolvimento de diversas soluções e agora, também que mesmo executar alguns scripts simples já gera uma sobrecarga significativa de tempo de execução.

Siga nos para mais dicas toda semana!

Esperamos ter ajudado com mais esta dica, e siga nos, nas redes sociais para mais tutoriais, e se precisar de nossa ajuda estamos a disposição: www.soloweb.com.br.

E lembrando que a SOLOWEB além de oferecer Hospedagem de Sites, Servidores Dedicados, Servidores VPS com o menor custo do Brasil, também desenvolve soluções de software e realiza gerenciamento e monitoramento de servidores para sua empresa, faça uma cotação sem custo, acesse: www.soloweb.com.br