Tutorial: Gráfico de Linha/Barra em campo da Consulta

Neste exemplo vamos ver uma Consulta exibindo, em um campo, um gráfico de barras horizontal, com o tamanho de acordo com o valor daquele campo, e na primeira coluna, exibiremos uma imagem que informará se o valor está em alta, baixa ou estável.

Criando a Consulta

1- Criaremos uma aplicação de Consulta utilizando a view “releases”.

Criando o campo de imagem

2- Vamos criar um novo campo do tipo “Texto”, chamado “flag”, sem label.

3- No evento onRecord, utilize o código descrito abaixo:

 
if({valuerelease} < 200){
{flag} = "<img src='../_lib/img/grp__NM__ico__NM__beneath.png' title='".{lang_field_tab03_2_info1}."' />";
}elseif({valuerelease} >= 200 && {valuerelease} < 300 ){
{flag} = "<img src='../_lib/img/grp__NM__ico__NM__expected.png' title='".{lang_field_tab03_2_info2}."' />";
}elseif({valuerelease} >= 300 ){
{flag} = "<img src='../_lib/img/grp__NM__ico__NM__above.png' title='".{lang_field_tab03_2_info3}."' />";
}

Criando um campo para exibir uma legenda

4- Assim como fizemos no passo 2, vamos criar um novo campo do tipo “Texto”, chamado “legend”, sem label.

5- No evento onFooter, utilize o código descrito abaixo:

 
{legend} = "<div style=\"text-align:center; width:100%;\">            <table style=\"font-size:10px; color:#464646;\" > <tr> <td colspan=\"6\" style=\"text-align:center; font-weight:bold; font-size:11px\">Legend</td> </tr> <tr> <td width=\"5\"><img src=\"../_lib/img/grp__NM__ico__NM__beneath.png\" /></td> <td>".{lang_field_tab03_2_info1}."</td> <td width=\"5\"><img src=\"../_lib/img/grp__NM__ico__NM__expected.png\" /></td> <td>".{lang_field_tab03_2_info2}."</td> <td width=\"5\"><img src=\"../_lib/img/grp__NM__ico__NM__above.png\" /></td> <td>".{lang_field_tab03_2_info3}."</td> </tr>     </table>     </div>";

6- Acesse o menu “Layout>>Cabeçalho & Rodapé”, para marcar para “Exibir Rodapé” e nas variáveis do Rodapé, marque para exibir o campo “legend”.

Criando o Gráfico de Linha/Barras

7- Vamos acessar o item “Editar campos” para selecionar os campos que serão exibidos na aplicação.

8- Em seguida, acesse as configurações do campo “valuerelease”, clicando no ícone do lápis ao lado do campo.

9- Na guia “Gráfico de Linha”, utilize as configurações conforme a imagem abaixo.

10- Agora basta clicar no botão “Executar aplicação”

Compartilhe este tutorial

Tutoriais na mesma categoria

Card View HTML (Formato Livre)

Neste exemplo, veremos o recurso do Scriptcase que permite utilizar templates HTML para visualizar ...

Colunas Fixas no Resumo

Neste exemplo, veremos a opção de fixar colunas no módulo de Resumo das aplicações de Consulta...

Salvando Visualizações de Relatório

Neste exemplo, veremos as opções disponíveis para o usuário final armazenar em sessão ou em ar...

Renomeando arquivos de exportação

Os arquivos resultantes das exportações realizadas na consulta, são armazenados no diretório&nb...

Comente este post