Nosso projeto agora deve ter alguns gráficos.
No projeto que já está na web eu fiz alguns gráficos como esses:
Esses gráficos foram feitos usando a biblioteca Chart js, uma biblioteca JavaScript de produção de gráficos.
Vamos voltar a mexer no nosso arquivo brazil.html e separar um espaço para os gráficos. Obs: todos os códigos deste tópico estão em formato de imagem pois o código JavaScript em si é barrado sempre que é postado no site por conta de mecanismos de proteção):
Novamente, o foco não é falar de bootstrap nem de front-end, então não vou explicar detalhadamente, mas eu criei uma div com a classe row e dentro dela duas divs filhas com a classe col, representando colunas de um grid. A primeira coluna vai representar 8/12 do espaço e a segunda coluna 4/12 do espaço.
Rodando o projeto com flask run veremos o seguinte:
Esse título "Gráficos" é só ilustrativo, para mostrar onde teremos os gráficos.
Para usar a lib chart js eu tenho algumas alternativas e uma delas é puxando o código da lib por meio de um CDN. Então, logo abaixo do nosso index.html vamos inserir este código:
Com isso eu já importei a biblioteca para minha página.
Vamos criar uma div para inserir uma tag canvas, que será onde nosso chat será renderizado:
Vou criar um gráfico bem simples, dentro do próprio html, com uma nova tag script.
Acima tem um pouco de JavaScript básico.
Primeiro eu criei uma variável contexto, que irá pegar o nosso canvas criado pelo id dele, e nele usei a função getContext e passei como argumento a string '2d' indicando que meu gráfico será 2d.
Em seguida criei o gráfico propriamente dito, e a criação de um gráfico é feita passando um objeto JavaScript, com alguns dados.
Dentre eles a chave 'line', que me diz o tipo de gráfico criado, ou seja, gráfico de linha.
Na chave 'data' eu passo um novo objeto com os dados a serem inseridos no gráfico.
Na chave labels eu passei um array com os dados que serão apresentados no eixo x, que são dias da semana.
Na chave datasets eu posso passar quantos datasets eu quiser, passando a label, ou seja, uma identificação para os dados, a cor da linha e os dados em si, também dentro de um array. Criei dados exponenciais para fingir que é a disseminação do coronavírus.
Na chave options nós passamos algumas opções, como se o gráfico será responsivo (com valor true), com um título para o gráfico, etc.
Diversos outros dados podem ser incluídos dentro do objeto que representará o gráfico e isso iremos ver mais pra frente.
Por fim eu realmente crio um Chart na última linha, passando como argumento o elemento HTML que renderizará o gráfico e o gráfico em si.
O resultado é o seguinte:
Vamos criar um novo dataset, para fingir que será um gráfico como este que já postei acima:
Vamos lá na chave datasets e passar um novo objeto com um novo array de dados:
Atualizando o site agora:
Se esse preenchimento da área do gráfico atrapalha a visualização eu posso passar a chave "fill" para cada dataset com o booleano false para apagar essa área:
O resultado:
Falta algumas informações para o gráfico como as legendas dos eixos.
Para isso nós incluiremos dentro da key options a key scales, que terá como valor um objeto com duas chaves, cada uma representando um eixo, x e y, com informações de label:
Atualizando a página já podemos ver as labels nos eixos:
Enfim, essa foi uma apresentação da lib que iremos usar para construir os gráficos já mostrados acima.
