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”.