Gráficos são elementos bastante utilizados para apresentar informações de uma maneira mais compreensível e amigável, eles são indicados principalmente quando trabalham com dados numéricos. O Cronapp permite gerar gráficos dinâmicos utilizando os blocos de programação da categoria gráfico e o componente visual gráfico, existentes em projetos web e mobile.
Figura 1 - Gráfico sendo executado no browser
* Nesse exemplo estamos utilizando o tipo do campo ano como Texto para simplificar.
Figura 2 - Criar persistência e visão para a entidade
Rode o projeto, acesse a página CRUD anime gerada no passo anterior e alimente a tabela inserindo itens na grade. (Figura 2.1)
Figura 2.1 - Inserindo registros na tabela
A configuração do gráfico será feita em duas etapas: adição do componente em um formulário e a criação de um bloco de programação simples, alimentado por banco de dados.
Em um formulário (web ou mobile), arraste o componente gráfico, selecione-o e na aba propriedade altere o conteúdo do campo identificador do gráfico para "chartAnime", facilitando a identificação, salve a página.
Figura 3 - Alterando o campo identificador do gráfico
Os blocos de gráficos existem tanto no lado cliente (web ou mobile) quanto no lado servidor. Utilizaremos os blocos do lado servidor por conta dos blocos de consulta ao banco de dados.
Crie um bloco de programação do tipo servidor e ao abrir a janela, vincule a página na qual arrastamos o gráfico com o bloco de programação seguindo os passos abaixo:
Figura 3.1 - Vinculando página HTML ao bloco de programação
O bloco criar gráfico é responsável por vincular o id do componente visual gráfico, selecionar o tipo do gráfico a ser exibido, receber as séries e suas respectivas legendas. Para mais informações, acesse a documentação do bloco.
Figura 3.2 - Vinculando o bloco ao componente visual e selecionando o tipo de gráfico
Após isso,
Figura 3.3 - Configurando o bloco para o parâmetro legenda
Uma série é um conjunto de valores de um mesmo elemento, responsável por quantificar visualmente o gráfico. Em um gráfico do tipo barra, o parâmetro Legenda do bloco criar gráfico alimentará os índices do eixo x, já o bloco criar série vai alimentar o desenho e as legendas do eixo y (Figura 3.4).
Acesse a documentação do Bloco para mais informações.
Figura 3.4 - Configurando o bloco para o parâmetro dados do bloco criar série
Esse parâmetro define algumas propriedades personalizáveis do gráfico e de suas séries, como adicionar título, definir animações ao gráfico, alterar o layout e entre outros.
Para mais informações, acesse os links abaixo: Animação, Layout, Legenda, Título, Tooltip e Elementos. |
A estrutura de configuração para o parâmetro opções é em formato JSON, formato de representação de dados que é composto basicamente de chave/valor. Por exemplo, no código abaixo, a propriedade title se refere ao título do gráfico e as combinações de chave/valor estão dentro dessa propriedade - delimitada por {}. Veja o que representa cada chave da propriedade title:
{ "title": { "display": true, "text": "Animes assistidos por ano", "fontSize": 20, "fontColor": "#00F" }, "legend": { "display": true }, "animation": { "duration": 1500, "easing": "easeOutBounce" }, "layout": { "padding": { "left": 120, "right": 120, "top": 60, "bottom": 60 } } } |
Sendo assim, adicione o bloco texto e o encaixe no parâmetro opções do bloco Criar gráfico (Figura 3.5). Copie o código apresentado acima para ver as personalizações que ocorrem no gráfico.
Figura 3.5 - Personalização do gráfico
De volta ao formulário no qual o componente gráfico se encontra presente:
Figura 4 - Vinculando bloco ao componente gráfico
Por fim, execute novamente o projeto e acesse a página para visualizar o gráfico (Figura 1).
Nessa página