Introdução

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. Sua utilização na IDE se dá através da combinação entre os blocos de programação da categoria gráfico e o componente visual gráfico, e eles são os responsáveis, respectivamente, por criar um gráfico e o renderiza-lo em uma view HTML.

Pré-configuração

Será feito em etapas, primeiramente adicionando o componente na IDE e, após, desenvolvendo uma programação simples utilizando o bloco gráfico onde o mesmo utilizará dados de um banco.

Criando uma entidade no banco

• Adicione uma classe no diagrama - nesse exemplo, vai ser utilizado a classe anime;
• Crie atributos para essa classe, como anime (tipo texto), genero (tipo texto), episódios (tipo inteiro) e ano (tipo texto) (Figura 2.1);
• Faça a persistência da classe clicando com o botão direito do mouse sobre a classe e selecionando criar camada de dados para a entidade (Figura 2.1);
• Crie o formulário da classe clicando com o botão direito do mouse sobre a classe e selecionando criar visão para a entidade (Figura 2.1).

Figura 2.1 - Criar persistência e visão para a entidade

Vinculando página à barra de navegação e adicionando dados

Após, vincule a página na barra de navegação da página home (Figura 2.2) reproduzindo os passos abaixo:

1. Abra a view home.view.html;
2. Selecione a barra de navegação para abrir a janela Opções de Menu - caso ela não abra, clique no botão "..." (indicado pela seta vermelha na Figura 2.2) do campo configuração pertencente a aba propriedade;
3. Adicione um novo item a barra (1 da Figura 2.2) e insira um nome;
4. No botão "..." (2 da Figura 2.2) pertencente ao campo ação para abrir a janela de view e selecione a view da classe que foi gerada;

Figura 2.2 - Vinculando página à barra de navegação

Execute o projeto e adicione dados aleatórios, mas sempre preenchendo em todos os campos.

Adicionando componente visual

Na página da home.view.html adicione o componente gráfico. Selecione o componente e na aba propriedade, altere o conteúdo do campo identificador do gráfico para chartAnime e salve a página.

Figura 3 - Alterando o campo identificador do gráfico

Criando o bloco de programação

Vinculando página ao bloco

Crie um bloco de programação do tipo servidor e ao abrir a janela, vincule a página home com o bloco de programação (Figura 4.1) seguindo os passos abaixo:

1. Clique na engrenagem do bloco de programação;
2. Clique no botão "..." que fica ao lado do campo formulário de referência;
3. Selecione o formulário que contém o componente gráfico.

Figura 4.1 - Vinculando página html ao bloco de programação

Programação do bloco gráfico

Primeiro, adicione o bloco criar gráfico e no parâmetro ID, selecione chartAnime para vincular o bloco com o componente. No parâmetro tipo de gráfico selecione a opção bar.

Figura 4.2 - Adicionando o bloco criar gráfico e realizando as primeiras configurações

Após, adicione o bloco abrir consulta da categoria banco de dados e encaixe-o no parâmetro da legenda. Clique na engrenagem (indicado pela seta vermelha na Figura 4.3) para abrir a janela de configuração do bloco; após, adicione a classe anime (1 da Figura 4.3), obtenha o campo ano (2 da Figura 4.3) e agrupe os dados pelo campo ano (3 da Figura 4.3).

Figura 4.3 - Configurando o bloco para o parâmetro legenda

Por fim, adicione o bloco criar série da categoria gráfico ao parâmetro série(s) do gráfico, adicione uma campo de texto para o parâmetro nome da série do bloco e o nomeie como Qtd lançadas:, adicione outro bloco abrir consulta no paramêtro dados e clique na engrenagem desse bloco para abrir a janela de configuração e reproduza os seguintes passos:

1. Adicione a entidade anime;
2. Adicione o campo a.anime e selecione contar;
3. Agrupe os dados por a.ano.

FIgura 4.4 - Configurando o bloco para o parâmetro dados do bloco criar série

Parâmetro opções

Esse parâmetro define algumas personalizações ao gráfico, como adicionar título, definir animações no gráfico, alterar o layout e entre outros, mas essa personalização é através do código javascript e sua estrutura é conforme o exemplo abaixo e que é utilizado no bloco texto, encaixada no parâmetro opções (Figura 4.5).

Figura 4.5 - Personalização do gráfico

{
    "title": {
                "display": true,
                "text": "Animes assistido por ano",
                "fontSize": 20,
                "fontColor": "#00F"
	},
        
    "legend": {
                "display": true
	},
    
    "animation": {
                "duration": 1500,
                "easing": "easeOutBounce"
    },
    
    "layout": {
                "padding": {
                    "left": 120,
                    "right": 120,
                    "top": 60,
                    "bottom": 60
				}
    }
}