Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

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 O Cronapp permite gerar gráficos dinâmicos utilizando 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 HTMLexistentes em projetos web e mobile.

Figura 1 - Gráfico sendo executado no browser

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
  1. Crie um projeto do tipo web ou mobile, Caso tenha dúvidas de como criar esse tipo de projeto, acesse o link ( Criar novo projeto );
  2. Gere uma entidade no diagrama de dados (passo abaixo) e 
  3. Alimente a base de dados (passo abaixo).

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 gênero (tipo texto), episódios (tipo inteiro) e ano (tipo texto*) (Figura 2.1);.
  • Gere a 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  e o CRUD, através da opção criar visão para a entidade (Figura 2.1).

* Nesse exemplo estamos utilizando o tipo do campo ano como Texto para simplificar.

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

Alimentando a base de dados

Rode o projeto, acesse a página CRUD anime gerada no passo anterior e alimente a tabela inserindo itens na grade. (Figura 2.2)

reproduzindo os passos abaixo:
  • Abra a view home.view.html;

  • Image Added

    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;
  • Adicione um novo item a barra (1 da Figura 2.2) e insira um nome;
  • 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;
  • - Inserindo registros na tabela

    Configuração do Gráfico

    A configuração do gráfico será feita em duas etapas: adição do componente em um formulário view e a criação de um bloco de programação simples, alimentado por banco de dados.

    Componente visual

    Em um formulário (web ou mobile), arraste o componente gráfico, selecione-o e na aba propriedade

    Image Removed

    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 "chartAnime", facilitando a identificação, salve a página.

    Figura 3 - Alterando o campo identificador do gráfico

    Criando o bloco de programação

    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.

    Vinculando página ao bloco

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


    Image Added

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


    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.

    Image Removed

    Figura 4.1 - Vinculando página html ao bloco de programação
    1. , nesse exemplo: página home.view.html da pasta logged.

    Programação do bloco gráfico

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


    Figura 4.2 - Adicionando Vinculando o bloco criar gráfico e realizando as primeiras configuraçõesao componente visual e selecionando o tipo de gráfico


    Após isso, adicione o bloco abrir consulta, da categoria banco de dados, e encaixe-o no parâmetro da legendaClique 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 (item 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 arraste o bloco criar Criar série da , categoria gráfico, ao parâmetro série(s) do gráfico do gráfico, adicione uma bloco Criar gráfico; encaixe um bloco campo de texto para o no parâmetro nome Nome da série do bloco e o nomeie como Qtd lançadas:, adicione ; adicione outro bloco abrir consulta no paramêtro dadosAbrir consulta, categoria Banco de dados, no parâmetro Dados e clique na engrenagem desse bloco para abrir a janela de configuração e reproduza . Reproduza os seguintes passos:

    Image Added

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

    1. Adicione a entidade anime;Adicione
    2. Na área Campos, selecione a opção COUNT na primeira caixa de seleção e depois selecione o campo a.anime e selecione contar;
    3. Agrupe os dados por a.ano.

    Image Removed

    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 propriedades ao gráfico, como adicionar título, definir animações no gráfico, alterar o layout e entre outros e podem criar personalizações para cada uma dessas propriedades, de acordo com as opções disponibilizadas nos links abaixo.

    Informações
    titleSaiba mais

    Para saber mais sobre quais personalizações podem ser configuradas, acesse os links abaixo:

    AnimaçãoLayoutLegendaTítuloTooltipElementos.


    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 pelo {}, onde a chave é o atributo (display, text, fontSize e fontColor) e os valores são cada uma delas fazem as seguintes personalizações:

    • "display": true - habilita a visualização do título no gráfico;
    • "text": "Animes assistido por ano" - define o conteúdo para o título;
    • "fontSize": 20 - define o tamanho do título;
    • "fontColor": "#00F" - cor para o título.
    Bloco de código
    languagejs
    titleCódigo utilizado no bloco opções
    {
        "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
    				}
        }
    }
    

    Sendo assim, adicione o bloco texto e o encaixa no parâmetro opções (Figura 4.5). Copie o código apresentado acima para ver as personalizações que ocorrem no gráfico.

     

    Figura 4.5 - Personalização do gráfico

    Vinculando bloco ao evento do gráfico

    Na view home.view.html, no qual o componente gráfico se encontra presente, selecione o componente e na aba propriedades, selecione a sub-aba eventos. Clique em exibir mais e procure o evento ao iniciar. Após achar o evento, clique em "..." pertencente ao evento e selecione o bloco de programação para criar gráfico (Figura 4.6).

    Figura 4.6 - Vinculando bloco ao componente gráfico

    Paineltitle

    Nessa página

    Índice