Painel Gráfico
Neste painel, é possível configurar a visualização de dados, registros históricos e estatísticas de forma gráfica.
Cabeçalho
Título
Define um texto para o título a ser apresentado no cabeçalho do gráfico.
Aparência
Esta seção define as propriedades de espaçamento, cor do texto e cor de fundo aplicadas ao título.
Espaçamento
Define o espaçamento entre o título e a borda do painel:
Propriedade |
Descrição |
Default |
|---|---|---|
Superior |
Define a distância, em pixels, de espaçamento entre o título e a borda do painel |
0 |
Direita |
Define a distância, em pixels, de espaçamento entre o título e a borda do painel |
0 |
Esquerda |
Define a distância, em pixels, de espaçamento entre o título e a borda do painel |
0 |
Inferior |
Define a distância, em pixels, de espaçamento entre o título e a borda do painel |
0 |
Nota
O espaçamento é aplicado internamente ao título (padding) e pode ser utilizado para:
Ajuste de respiro visual: Adicionar distância extra entre o título e as bordas do painel, mesmo quando não houver cor de fundo definida;
Destaque com cor de fundo: Criar uma margem interna entre o texto e a borda, ideal para gerar um efeito de contorno preenchido. Ao configurar um espaçamento considerável em conjunto com uma cor de fundo, o título se destaca visualmente, proporcionando um design mais atraente e legível. Caso o título esteja centralizado, o espaçamento pode ser aplicado igualmente nos lados esquerdo e direito para manter a simetria visual;
Faixa que se estenda por toda a largura do Painel: Configure os espaçamentos esquerdo e direito com valores altos, como 1000 pixels. Isso proporcionará um visual mais equilibrado e profissional.
Cores
Define a cor do texto e do fundo do título. Para mais informações, acesse: Cores.
Texto
Propriedade |
Descrição |
Default |
|---|---|---|
Fonte |
Define os atributos da fonte do controle. Opções:
|
Source Sans Pro 18 |
Alinhamento |
Define o alinhamento vertical do texto dentro do controle. Opções:
|
Centro |
Série de Dados
Nesta seção, devem ser selecionados os Dados que serão apresentados nas séries pelo gráfico.
Atenção
Após realizar a configuração desta seção, as próximas seções serão exibidas.
Origem
Este campo será exibido se a Tela contiver alguma consulta customizada.
Seleciona a origem dos Dados para apresentar no gráfico:
Lista de dados: amostra geral do histórico;
Consulta customizada: amostra agregada por segundos, minutos, horas ou dias.
Atenção
Consulta customizada não possui as configurações:
Atualização em tempo real;
Mostrar desconexão.
Nome
Este campo será exibido após selecionar a origem como consulta customizada.
Deve-se selecionar o nome da consulta customizada para relatório que será utilizado para apresentação de seus valores na série do gráfico.
Atenção
O botão de aplicar, atualiza a consulta customizada cujo nome não foi alterado, servindo como um facilitador para modificações na consulta.
Atenção: ao aplicar as configurações, todo o gráfico será restaurado para o padrão inicial.
Seletor de dados
Este campo será exibido após selecionar a origem como lista de dados ou caso a Tela não contenha nenhuma consulta customizada.
Deve-se selecionar o Conector e posteriormente o Dado que será utilizado para apresentação de seus valores na série do gráfico.
Selecionando Dado a ser apresentado
Para selecionar um Dado a ser apresentado no painel, siga os seguintes passos:
Acesse as Propriedade do painel, clicando em ;
Acesse Lista de dados e selecione o Dado que deseja apresentar;
Clique em Adicionar série.
Também é possível adicionar todos os dados que possuem histórico habilitado para serem apresentados no gráfico através do botão Adicionar Todos.
Já para ordenar a apresentação de um Dado na lista, siga os seguintes passos:
Acesse as Propriedade do painel, clicando em ;
Acesse Série de dados, clique e segure o Dado que deseja ordenar;
Posicione o Dado no local desejado na lista de Dados selecionados para apresentação.
Por fim, para remover a apresentação de um Dado, siga os seguintes passos:
Acesse as Propriedade do painel, clicando em ;
Acesse Série de Dados e clique em no Dado desejado.
Conjunto de dados
Este campo será exibido após a configuração de, no mínimo, uma série de Dados.
Manipulação
O sistema disponibiliza funcionalidades para gerenciar o conjunto de dados, localizadas logo adiante nesta seção.
Randomizar Cores das Séries
Configura cores aleatórias para cada série de forma automática pelo ícone .
Cada cor é exibida na frente da série na seção de Conjunto de Dados.
Remover Todos
Permite a exclusão completa de todas as séries configuradas no conjunto de dados com um único clique no ícone , enviando uma mensagem de confirmação para o usuário como forma de proteção contra exclusões acidentais.
Atenção
É possível excluir sem a necessidade de confirmação pressionando a tecla CTRL ao clicar no ícone .
Ordenação
Oferece opções para organizar o conjunto de dados de acordo com suas preferências:
Padrão : Mantém a ordenação original/manual (sempre exibida ao entrar no modo de edição, independentemente de qualquer ordenação previamente aplicada);
Ascendente : Organiza as séries em ordem alfabética;
Descendente : Organiza as séries em ordem alfabética inversa.
Movimentação Manual
Permite reordenar manualmente as séries dentro do conjunto de dados:
Basta arrastar e soltar a série desejada para a posição preferida, garantindo uma organização personalizada.
Atenção
Esta funcionalidade não se aplica a consulta customizada, uma vez que a customização é definida na criação/edição da mesma.
Remover Individualmente
Permite a exclusão de cada série configurada no conjunto de dados com um único clique no ícone , enviando uma mensagem de confirmação para o usuário como forma de proteção contra exclusões acidentais.
Atenção
É possível excluir sem a necessidade de confirmação pressionando a tecla CTRL ao clicar no ícone .
Interação
Ao passar o mouse sobre cada um dos conjunto de dados, são exibidas as principais configurações associadas ao Conector e ao Dado.
Cada conjunto de dados é apresentado com:
O tipo de gráfico configurado;
O nome da série de dados.
Além disso, há funcionalidades que permitem:
Exibir ou ocultar a série correspondente no gráfico;
Excluir individualmente séries do conjunto.
Ao ser expandido, cada série de Dados possui as seguintes configurações:
Tipo e Nome
Tipo: Permite selecionar o tipo de gráfico.
Os tipos possíveis são:
Linha;
Barras;
Torta;
Dispersão.
Conforme mostrado na imagem abaixo:
Atenção
O Gráfico de Torta não possui as seguintes seções:
Geral;
Eixo X;
Eixo Y;
Tooltip.
Nome: Por padrão, essa configuração é preenchida com o nome do Dado associado à série, mas permite personalizar esse nome que será apresentado na legenda do gráfico para a série (Dado).
Simulação
Permite simular valores para a série (Lista de Dados e Consulta Customizada) através do botão .
Essa funcionalidade serve para visualizar o gráfico diretamente no Editor de Tela, facilitando o ajuste da configuração ao acompanhar em tempo real como o gráfico está ficando.
Clonar Série
Ao expandir a série, é exibido o ícone de clonar , localizado ao lado das configurações de Tipo e Nome, permitindo a duplicação da série de Dados.
Com essa funcionalidade, é possível adicionar novas séries de Dados ao gráfico sem a necessidade de configurar tudo novamente.
Essa funcionalidade é essencial para a criação de múltiplas séries de Dados com configurações semelhantes que compõem o gráfico, proporcionando flexibilidade na apresentação das informações.
A clonagem da série preserva todas as configurações feitas, sendo necessário apenas alterar o Dado Associado para refletir novas informações, o que facilita a criação de gráficos complexos sem reconfiguração total do painel.
Atenção
O formato do Dado rotulado vem por padrão conforme o cadastro do mesmo. Não é possível utilizar com consulta customizada ou no Painel Tabela.
Aparência
Nesta seção, é possível configurar a aparência do gráfico.
Tipo |
Configurações disponíveis |
|---|---|
Linha |
|
Barras |
|
Torta |
|
Dispersão |
|
Atenção
Cada “fatia” do Gráfico de Torta corresponde a um Dado ou um status para o intervalo de valor da consulta customizada.
Rótulo
Esta seção abrange as configurações de exibição do rótulo do gráfico, que apresenta os valores de cada série de Dados, caso a opção Visível esteja ativada.
Cor e Formato
Cor: Define a cor do rótulo. Para mais informações acesse: Cores.
Formato: Os tipos de formato permitem a personalização da apresentação dos valores que serão exibidos no rótulo. Os formatos possíveis são os seguintes:
{value}: valor não formatado;
Formato de apresentação de um valor: que por padrão já vem configurado conforme o cadastro do Dado;
Exceção: Dado com lista de texto associado, neste caso o formato ainda é o definido no input.
Atenção
O gráfico de torta possui mais argumentos para o formato:
{name}: nome do item (mesmo nome da legenda de cada série);
{percent}: percentual da fatia da torta (casas decimais ajustadas automaticamente).
Exemplos de utilização:
{name} %.2f ºC ({percent});
{name} - {value} - {percent} %.
Posição
Define a posição do rótulo no gráfico, permitindo personalizar onde as informações serão exibidas em relação às séries de dados.
Tipo |
Posição |
Descrição de onde o rótulo é exibido |
|---|---|---|
Linha |
|
|
Barras |
|
|
Torta |
|
|
Dispersão |
|
|
Fonte
Permite a personalização da fonte dos valores no Rótulo, podendo ser configurada de maneira Padrão ou Customizada.
Propriedade |
Descrição |
|---|---|
Fonte |
Define os atributos da fonte Opções:
|
Filtro (Rótulo)
Permite a configuração de filtros para a apresentação dos valores dos rótulos nas séries de Dados dos painéis Histórico e Gráfico, utilizando expressões em JavaScript:
Fig. 38 Menu de Propriedades para configuração de filtros para rótulos
Atenção
A expressão de filtro é aplicada exclusivamente para a exibição do rótulo e não altera as amostras dos Dados.
A seguir, são apresentados exemplos de utilização nos Conjuntos de Dados:
Lista de Dados;
Filtros utilizando Lista de Dados
Temos esse gráfico com o rótulo configurado:
Fig. 39 Gráfico com Histórico e com rótulo habilitado
Filtro por Índice
Exibe rótulos apenas no primeiro e no último registro:
$index == 0 || $index == $length-1
Explicação:
Exibe o primeiro registro: $index != 0
Exibe o último registro: $index == $length - 1
Fig. 40 Exibe rótulos apenas no primeiro e no último registro
Ocultar rótulos no primeiro e no último registro:
$index != 0 && $index != $length - 1
Explicação:
Oculta o primeiro registro: $index != 0
Oculta o último registro: $index != $length - 1
Fig. 41 Ocultar rótulos no primeiro e no último registro
Exibe rótulos apenas da metade dos registros:
!($index % 2)
Fig. 42 Exibe rótulos apenas da metade dos registros
Exibe rótulos apenas da terceira parte dos registros:
!($index % 3)
Fig. 43 Exibe rótulos apenas da terceira parte dos registros
Exibe rótulos apenas da metade dos registros, desprezando o primeiro e o último:
$index > 0 && $index < $length - 1 && !($index % 2)
Explicação:
Oculta o primeiro e último registro: $index > 0 && $index < $length - 1;
Exibe a metade dos registros: !($index % 2).
Fig. 44 Exibe rótulos apenas da metade dos registros, desprezando o primeiro e o último
Filtro por valor do Dado
Exibe rótulos apenas para valores acima de “20”:
$value > 20
Fig. 45 Exibe rótulos apenas para valores acima de “20”
Exibe rótulos com valores entre 20 e 50:
$value > 20 && $value < 50
Fig. 46 Exibe rótulos com valores entre 20 e 50
Exibe rótulos apenas para valores mínimos (< 20) ou máximos (> 50):
$value < 20 || $value > 50
Fig. 47 Exibe rótulos apenas para valores mínimos (< 20) ou máximos (> 50)
Filtro por valor do Dado e por Índice
É possível combinar o filtro por valor do Dado com o filtro por índice, utilizando os operadores lógicos OR(||) e AND(&&).
Isso permite aplicar múltiplas condições simultaneamente para controlar a exibição dos rótulos.
Exibe rótulos apenas para valores acima de “20”, sendo metade mostrado:
$value > 20 && !($index % 2)
Fig. 48 Exibe rótulos apenas para valores acima de “20”, sendo metade mostrado
Exibe rótulos apenas para valores menores que “20”, sendo um terço mostrado:
$value < 20 && !($index % 3)
Fig. 49 Exibe rótulos apenas para valores menores que “20”, sendo um terço mostrado
Exibe rótulos para valores entre 20 e 50 no primeiro e último registro:
($value > 20 && $value < 50) && ($index == 0 || $index == $length - 1)
Fig. 50 Exibe rótulos para valores entre 20 e 50 no primeiro e último registro
Exibe rótulos para valores acima de “50”, exceto no primeiro e último registro:
$value > 50 && $index != 0 && $index != $length - 1
Fig. 51 Exibe rótulos para valores acima de “50”, exceto no primeiro e último registro
Exibe rótulos apenas para valores abaixo de 30 e apenas em índices ímpares:
$value < 30 && $index % 2
Fig. 52 Exibe rótulos apenas para valores abaixo de 30 e apenas em índices ímpares
Exibe rótulos apenas para valores maiores que 10, sendo um terço dos registros, excluindo o primeiro e o último:
$value > 10 && $index > 0 && $index < $length - 1 && !($index % 3)
Fig. 53 Exibe rótulos apenas para valores maiores que 10, sendo um terço dos registros, excluindo o primeiro e o último
Filtro por Tempo
As expressões abaixo permitem exibir rótulos com base em critérios de tempo, como hora específica, intervalo de horas, dias da semana ou minuto da coleta.
Exibe rótulos apenas para amostras registradas às 11h:
moment(time).hour() == 11
Fig. 54 Exibe rótulos apenas para amostras registradas às 11h
Exibe rótulos para amostras entre 9h e 11h (inclusive):
moment(time).hour() >= 9 && moment(time).hour() <= 11
Fig. 55 Exibe rótulos para amostras entre 9h e 11h (inclusive)
Exibe rótulos nos primeiros 15 minutos de cada hora:
moment(time).minute() < 15
Fig. 56 Exibe rótulos nos primeiros 15 minutos de cada hora
Exibe rótulos apenas para registros cujo minuto corresponde ao valor informado, ignorando os segundos:
moment(time).minute() == 47
Fig. 57 Exibe rótulos apenas para registros cujo minuto corresponde ao valor informado, ignorando os segundos
Exibe rótulos somente quando a hora é múltipla de 2 (0h, 2h, 4h…):
moment(time).hour() % 2 == 0
Fig. 58 Exibe rótulos somente quando a hora é múltipla de 2 (0h, 2h, 4h…)
Exibe rótulos somente quando a hora não é múltipla de 2 (1h, 3h, 5h…):
moment(time).hour() % 2 == 1
Fig. 59 Exibe rótulos somente quando a hora não é múltipla de 2 (1h, 3h, 5h…)
Exibe rótulos somente quando a hora é múltipla de 3 (0h, 3h, 6h…):
moment(time).hour() % 3 == 0
Fig. 60 Exibe rótulos somente quando a hora é múltipla de 3 (0h, 3h, 6h…)
Exibe rótulos apenas de terça:
moment(time).day() == 2
Fig. 61 Exibe rótulos apenas de terça
Exibe rótulos apenas de segunda à sexta:
moment(time).day() > 0 && moment(time).day() < 6
Atenção
Lembre-se: o moment().day() retorna valores de 0 (domingo) à 6 (sábado).
Filtros utilizando Consulta Customizada
Temos esse gráfico com o rótulo configurado utilizando Consultas Customizadas com Expressão Agrupamento por Tempo:
Fig. 62 Gráfico com Consulta Customizada do Histórico e com rótulo habilitado
Filtro por Índice
O Filtro por Índice nas consultas customizadas funciona da mesma maneira de que utilizando Listas de Dados.
Para entender melhor, acesse Filtro por Índice.
Filtro por Valor do Dado
O Filtro por Valor do Dado nas consultas customizadas funciona da mesma maneira de que utilizando Listas de Dados.
Para entender melhor, acesse Filtro por valor do Dado.
Filtro por valor do Dado e por Índice
O Filtro por Valor do Dado e por Índice nas consultas customizadas funcionam da mesma maneira de que utilizando Listas de Dados.
Para entender melhor, acesse Filtro por valor do Dado e por Índice.
Filtro por Tempo
Para utilizar o Filtro com Tempo em Consultas Customizadas é necessário entender o que acontece com o timestamp ao utilizar uma Consulta Customizada.
Ao utilizar uma Consulta Customizada no Painel Gráfico, o timestamp, ou o eixo X do Gráfico, passa a ser tratado como um dado do tipo string, ou seja, ele deve ser tratado como um texto. Por conta disso, para se referenciar ao timestamp é necessário utilizar a expressão $name na fórmula.
Exibe rótulos apenas para os dias entre 10 e 20:
$name.substr(0,2)>="10" && $name.substr(0,2)<="20"
Explicação:
$name.substr(0,2)>=”10”: avalia se os dois caracteres a partir da posição 0 de $name (timestamp) é maior ou igual a “10”;
$name.substr(0,2)<=”20”: avalia se os dois caracteres a partir da posição 0 de $name (timestamp) é menor ou igual a “20”;
Os dois primeiros caracteres correspondem ao dia do timestamp;
&&: faz uma junção com os resultados das duas condições.
Fig. 63 Exibe rótulos apenas para os dias entre 10 e 20
Exibe rótulos apenas para registros entre 13h e 16h:
$name.substr(6,2) >= "13" && $name.substr(6,2) <= "16"
Explicação:
$name.substr(6,2) >= “13”: avalia se os dois caracteres a partir da posição 6 de $name (timestamp) é maior ou igual a “13”;
$name.substr(6,2) <= “16”: avalia se os dois caracteres a partir da posição 6 de $name (timestamp) é menor ou igual a “16”;
Os dois caracteres a partir da posição 6 correspondem à hora do timestamp;
&&: faz uma junção com os resultados das duas condições.
Fig. 64 Exibe rótulos apenas para registros entre 13h e 16h
Exibe rótulos apenas para registros do dia 26:
$name.startsWith("26")
Explicação:
$name.startsWith(“26”): avalia se o timestamp começa com o texto “26”;
O começo do timestamp (a partir da posição 0), corresponde à data, logo serão avaliados os registros do dia 26.
Fig. 65 Exibe rótulos apenas para registros do dia 26
Exibe rótulos apenas para registros das 3:00h e 13:00h:
$name.endsWith("3:00")
Explicação:
$name.endsWith(“3:00”): avalia se o final do timestamp termina com 3:00;
O final do timestamp corresponde à hora do registro, e a expressão analisa a quantidade de caracteres passados no parênteses no final do timestamp.
Fig. 66 Exibe rótulos apenas para registros das 3:00h e 13:00h
Exibe rótulos apenas para registros que contêm “15:00”:
$name.includes("15:00")
Fig. 67 Exibe rótulos apenas para registros que contêm “15:00”
Filtro por Categoria
Para esse exemplo foi usado o gráfico com o rótulo configurado utilizando Consultas Customizadas com Expressão Agrupamento por Condição de Intervalo (Categoria):
Exibe rótulos para nomes que correspondem exatamente a “Alta”:
$name == "Alta"
Fig. 68 Exibe rótulos para nomes que correspondem exatamente a “Alta”
Exemplo de Uso
Para exemplificar o uso da ferramenta de Rótulos de Dados em um painel gráfico, siga a sequência de configurações abaixo:
Crie uma nova tela contendo 2 painéis: Painel barra de ferramentas e Painel gráfico;
Em seguida, nas Propriedades do painel gráfico, clique na aba Propriedades específicas;
Na aba de Série de dados, selecione os Dados que serão monitorados pelo painel gráfico de acordo com o Conector em que eles foram cadastrados e clique em “Adicionar série”.
A sequência das configurações listadas acima está demonstrada no vídeo abaixo:
Após finalizar a configuração inicial, iremos configurar o painel gráfico:
Após algum Dado ser adicionado, poderemos visualizá-lo logo na lista abaixo, nomeada “Conjunto de dados”;
Expandindo as opções do Dado através do botão , altere a opção de exibição do histórico no gráfico selecionando a opção “Barras”;
Após isso, acesse o tópico Rótulo e marque a opção “Visível” para ativar a função;
Para personalizar os rótulos, em “Cor e Formato”, utilizaremos a cor preta e o campo “Posição”(local onde os rótulos serão exibidos comparados a barra) definido em Superior.
A sequência das configurações listadas acima está demonstrada no vídeo abaixo:
Após finalizar o processo de configuração/personalização e definir a tela configurada para o Dashboard do Conector, podemos visualizar a ferramenta dos rótulos sendo exibida de acordo com a medida em que o histórico do Dado varia:
Transformações
Esta seção abrange as configurações de Expressão e Filtro utilizadas para definir a apresentação dos valores de cada série de Dados.
Tipo |
Configurações disponíveis |
|---|---|
Linha |
|
Barras |
|
Torta |
|
Dispersão |
|
Atenção
A expressão pode-se aplicar no gráfico, na tabela ou em ambas. O filtro pode ser realizado com base no valor lido ou no valor calculado pela expressão.
Quando utilizada uma Expressão para alterar o valor das amostras do Dado a ser apresentado no gráfico, o tooltip do gráfico(janela que se abre ao arrastar o mouse sobre os pontos da curva do gráfico) apresentará o valor alterado após o nome do Dado e o valor “original” entre parênteses.
Substituição de Dado
Este campo exibe o Dado correspondente à série do gráfico, permitindo a substituição do Dado associado conforme necessário.
Essa funcionalidade permite alterar os Dados que compõem o gráfico, oferecendo flexibilidade na visualização das informações.
Além disso, também permite a clonagem de um painel, preservando todas as configurações, com a necessidade de alterar apenas o Dado associado para refletir novas informações nos painéis, sem a necessidade de reconfiguração total do painel.
Seletor de Dados
Deve-se selecionar o Conector e posteriormente o Dado que será utilizado para apresentação de seus valores na série do gráfico.
Linhas de Marcação
As Linhas de Marcação funcionam como referências visuais de BI (Business Intelligence), permitindo contextualizar os dados, destacar limites de segurança e realizar análises estatísticas diretamente no gráfico.
Este recurso está disponível para os painéis de Gráfico e Histórico, adaptando-se aos modos de exibição em Linha, Barras ou Dispersão.
As Linhas de Marcação adaptam-se automaticamente ao modelo de visualização escolhido, garantindo clareza analítica em diferentes contextos:
Gráfico de Linha: Proporciona uma leitura limpa e contínua, ideal para monitorar limites em grandes volumes de dados;
Gráfico de Barras: Facilita a identificação visual de variância e desvios em relação às metas (setpoints) em conjuntos de dados menores ou sazonais;
Gráfico de Dispersão: Permite identificar rapidamente a concentração de amostras e outliers em relação às médias e zonas de segurança. Além de ser ideal para monitorar a relação entre duas variáveis com a tendência.
Atenção
A funcionalidade não suporta o uso de consultas customizadas no momento.
Tipos de Linha e Análise
Ao expandir a seção, é possível selecionar a função analítica desejada:
Mínimo, Máximo e Média: Adiciona instantaneamente uma linha horizontal representando os valores estatísticos das amostras exibidas;
Tendência: Projeta uma “curva virtual” baseada no método dos mínimos quadrados (do primeiro ao último ponto), ideal para identificar desvios de comportamento sem cadastro manual como no recurso de Definição da Curva Padrão (Curva de Calibração) do Dado no Gráfico;
Set point: Define uma linha fixa para representar metas, limites operacionais ou níveis de segurança (HH, H, L, LL). Permite identificar violações de performance com um simples relance.
Nota
Cada tipo estatístico (Mínimo, Máximo, Média e Tendência) pode ser usado uma única vez por série.
O tipo Set point permite múltiplas instâncias. Para agilizar a configuração de vários limites, utilize a função Clonar para replicar estilos e fontes.
Configurações do Rótulo
Os rótulos permitem identificar o valor e o propósito da marcação:
Título e Formato: Define o texto de exibição. Utilize a variável
{c}para inserir automaticamente o valor da linha no título (ex:Meta: {c});Posição e Deslocamento: Define onde o rótulo aparece em relação à linha. O Deslocamento (em pixels) permite o ajuste fino nos eixos X ou Y para evitar sobreposições;
Estilo de Fonte: Personalização completa de família, tamanho, negrito e itálico.
Personalização Visual da Linha
Para garantir a clareza visual e a hierarquia de informações:
Aparência: Controle total sobre a Cor, Espessura e Opacidade (0% a 100%);
Tipo da Linha: Escolha entre Sólida, Tracejada ou Pontilhada para diferenciar, por exemplo, uma média (pontilhada) de um limite crítico (sólida);
Posição no Eixo Y (Set point): Define o valor fixo de referência no gráfico.
Dica
O uso de cores contrastantes e diferentes opacidades ajuda a distinguir linhas de tendência de limites de segurança, melhorando a percepção operacional do painel.
Geral
Área
Define os espaçamentos do gráfico dentro do painel.
Espaçamento
Propriedade |
Descrição |
Default |
|---|---|---|
Superior |
Define a distância, em pixels, de espaçamento entre a borda superior do painel e o gráfico |
0 |
Direita |
Define a distância, em pixels, de espaçamento entre a borda direita do painel e o gráfico |
0 |
Inferior |
Define a distância, em pixels, de espaçamento entre a borda inferior do painel e o gráfico |
0 |
Esquerda |
Define a distância, em pixels, de espaçamento entre a borda esquerda do painel e o gráfico |
0 |
Espaçamento Dinâmico
Por padrão, o espaçamento dinâmico vem habilitado, o que permite espaçamentos adicionais de forma automática para acomodar as informações nos eixos X e Y. Esta configuração também ajusta dinamicamente o tamanho da área do gráfico, especialmente ao utilizar a opção de múltipla escala para eixo Y. Caso alguma legenda seja ocultada, a escala associada será removida, permitindo o aumento da área disponível para o gráfico.
Se desabilitado, o espaçamento automático dos rótulos dos eixos em relação à área do gráfico será desativado, fixando o tamanho da área do gráfico.
Controles
Nesta seção, é possível configurar as opções disponíveis ao usuário para se manipular o gráfico.
Barra de ferramentas
Define a visibilidade dos ícones para manipular o gráfico. As opções são as seguintes:
Opção |
Valor |
|---|---|
|
Permite voltar a tela do gráfico em sua forma padrão, descartando os ajustes do zoom |
|
Quando ativada, essa opção permite selecionar uma área do gráfico para ser ampliada com o zoom. Mesmo depois de utilizar o zoom, existe a possibilidade de continuar ampliando a área quantas vezes forem necessárias. Quando desativada, a opção de zoom será desabilitada junto com a opção |
|
Ao ser ativada, essa opção permite voltar o gráfico ao estado anterior antes do último zoom ser aplicado, permitindo a navegação entre a área que foi ampliada mais de uma vez. Caso a área tenha sido ampliada somente uma vez, esta opção retornará ao gráfico em sua forma padrão (sem zoom) |
Habilitar o zoom
Permite habilitar/desabilitar a funcionalidade de zoom do gráfico através do painel específico ou via manipulação direta na área plotada. As configurações possíveis são as seguintes:
Painel: Quando ativado, é exibido e permite a personalização do zoom pelas pontas do painel apresentado logo abaixo do gráfico;
Zoom de área: O zoom de área permite que a ampliação da área plotada seja alterada pelo botão de rolagem do mouse (scroll).
Baixar
Permite habilitar/desabilitar a funcionalidade de baixar as informações do histórico de Dados da seleção do período de consulta no painel barra de ferramentas:
Arquivo CSV: Permite mostrar ou ocultar a opção de fazer o download do arquivo .CSV disponível no painel;
Arquivo XLS: Permite mostrar ou ocultar a opção de fazer o download do arquivo .XLSX disponível no painel.
Tempo Real
Atualização em tempo real
Habilita o comportamento de atualização em tempo real no painel com os valores dos dados associados as séries do Gráfico de Linha. Caso habilitada essa opção, o painel deixa de operar no modo de consulta ao histórico de dados para as séries e passa a apresentar no tempo, os valores atuais dos dados.
Atenção
Caso a opção de atualização em tempo real esteja habilitada no gráfico e for utilizado o zoom sobre o mesmo, sempre que o gráfico for atualizado pelo período determinado no campo Intervalo de atualização, as definições do zoom serão perdidas.
Propriedade |
Descrição |
Default |
|---|---|---|
Intervalo de atualização |
Determina o tempo de atualização de dados diretamente no gráfico em: Segundos, minutos, horas ou dias |
30 segundos |
Janela de tempo |
Determina o tempo de atualização do gráfico em: Segundos, minutos, horas ou dias |
60 segundos |
As configurações de Intervalo de atualização e de Janela de tempo, possuem dois parâmetros:
Propriedade |
Descrição |
|---|---|
Valor |
Determina o tempo do intervalo(entre atualizações ou janela de tempo) |
Unidade de tempo |
|
Incluir último valor
Habilita a apresentação do valor atual do Dado de cada série no gráfico ao abrir a tela. Caso não marcada essa opção, o primeiro valor a ser apresentado para cada série ocorrerá após o intervalo de atualização definido.
Desconexão
Mostrar Desconexão
Este recurso permite visualizar no gráfico os períodos em que o Conector associado aos Dados ficou desconectado do Portal. Isso permite analisar os valores registrados para os Dados considerando os períodos de conexão e desconexão do Conector com o Portal.
Para mais informações, acesse este mesmo recurso do Painel de Histórico, pois as configurações e funcionamento são equivalentes.
Eixo X
Esta secção contempla as configurações de apresentação dos valores dos Dados no Eixo X(linha horizontal) do gráfico.
A configuração deste recurso permite a personalização do Eixo X, podendo ser definida da maneira Padrão ou Customizada.
Tipo
Definições do tipo de escala, ou seja, opções que determinam como os Dados serão distribuídos ao longo do Eixo X:
Timestamp: Utilizado para gráficos temporais. Esta é a configuração padrão.
Categoria: Agrupa valores, utilizado em consultas customizadas, onde a escala do Eixo X é gerada a partir do processamento de expressões.
Valor: Define a escala com base nos valores das amostras de uma das séries de Dados.
Atenção
Para o tipo valor, é necessário:
Indicar qual série será usada no eixo;
Deve haver correspondência de timestamps entre as séries;
Além de ser possível utilizar consultas customizadas.
Título
Esta seção permite a configuração do Título do Eixo X.
Texto
Se o campo for preenchido, será exibido no final do Eixo X associado à série.
Posição
Define a posição do título no Eixo X, de acordo com o ícone selecionado ao clicar:
Superior;
Meio;
Inferior.
Offset
Ajusta o espaçamento (utilizando a medida em pixels) entre o título da escala e a linha do Eixo X, definindo a distância entre o título e o gráfico.
Rotação
A funcionalidade de Rotação permite ajustar o ângulo do título exibido no Eixo X de um gráfico.
O ângulo de rotação pode variar de -90º a 90º, e o ajuste é realizado por meio de um controle deslizante(slider) ou através das setas do teclado quando o slider estiver selecionado.
Além disso, é possível redefinir a rotação para 0º clicando no botão de “Restaurar”, representado pelo ícone “”.
Cor dinâmica
Permite a personalização da cor do título do Eixo X:
Habilitada: A cor do título será ajustada automaticamente para corresponder à cor do rótulo da escala associada;
Desabilitada: A cor do título seguirá o padrão do sistema.
Escala
Esta seção permite a configuração da Escala do Eixo X.
Atenção
Esta opção estará disponível apenas quando o tipo do Eixo X for definido como valor.
Acesse esse mesmo recurso no Eixo Y, para replicar no Eixo X, se houver necessidade, pois as configurações e funcionamento são equivalentes.
Estender escala
Expande os limites da escala automática em ambas as extremidades, além dos valores mínimo e máximo dos Dados. Isto evita que o gráfico fique muito próximo das bordas da área de visualização.
Acesse o exemplo de uso deste mesmo recurso no Eixo Y, para replicar no Eixo X, se houver necessidade, pois as configurações e funcionamento são equivalentes.
Atenção
Para que funcione, mantenha a escala em modo Automático.
Essa função será ignorada se você definir valores manuais para a Escala Mínima ou Máxima, ou seja, é possível estender a escala em apenas uma extremidade.
Série de Dados
Seletor responsável por definir a origem dos valores utilizados na escala.
Atenção
Para que uma série esteja disponível nesta opção, é necessário que ela faça parte do conjunto de Dados na seção de Série de Dados.
Rótulo
Esta secção permite a configuração do Rótulo do Eixo X.
Fonte
Permite a personalização da fonte dos valores no Eixo X, podendo ser configurada de maneira Padrão ou Customizada.
Propriedade |
Descrição |
Default |
|---|---|---|
Fonte |
Define os atributos da fonte Opções:
|
Source Sans Pro 84% |
Cor e Formato
Cor: Define a cor do texto. Para maiores informações, acesse: Cores.
Formato: Os tipos de formato permitem a personalização da apresentação dos valores que serão exibidos no Eixo X.
Os formatos possíveis são os seguintes:
Formato |
Utilidade |
|---|---|
Padrão |
Exibe no Eixo X os valores de forma padrão. Conforme a variação de informações no gráfico. |
Customizado |
Permite a personalização de como os valores do Eixo X serão apresentados. Para maiores informações, acesse Formato Customizado. |
Formato Customizado
Ao expandir as opções de Formato e selecionar “Customizado”, dois novos campos serão disponibilizados: Expressão e Formato
Expressão
É possível utilizar expressões em JavaScript para calcular valores a serem apresentados ou comparados, filtrar resultados, formatar valores, entre outras funcionalidades.
$value ou ${value}: Refere-se ao valor do Dado que será exibido no Eixo X.
Para maiores informações sobre como personalizar o valor exibido através de Expressões, consulte Expressões.
Formato
O Formato permite personalizar a forma em que os valores do Eixo X serão apresentados.
Esta propriedade define o formato de apresentação do valor, incluindo elementos como o formato de Data e Hora, prefixo, sufixo, e outros detalhes de formatação.
DD/MM HH:mm e %s são alguns exemplos de Formatos que podem ser utilizados como referência no Eixo X.
Para maiores informações sobre como personalizar o valor exibido através de Formatos, acesse Formato de apresentação de um valor.
Posição
Define a posição dos valores do Eixo X no Gráfico em relação à Linha:
- : Inferior em relação à Linha;
- : Superior em relação à Linha.
Offset: Valor que ajusta o espaçamento em relação a linha(utilizando a unidade de medida em “Pixels”).
Rotação
A funcionalidade de Rotação permite ajustar o ângulo dos valores exibidos no Eixo X de um gráfico.
O ângulo de rotação pode variar de -90º a 90º, e o ajuste é realizado por meio de um controle deslizante(slider) ou através das setas do teclado quando o slider estiver selecionado.
Além disso, é possível redefinir a rotação para 0º clicando no botão de “Restaurar”, representado pelo ícone “”.
Eixo Y
Esta secção contempla as configurações de apresentação dos valores dos Dados no Eixo Y(linha vertical) do gráfico.
A configuração deste recurso permite a personalização do Eixo Y, podendo ser definida da maneira Padrão ou Customizada.
Atenção
Ao desabilitar a opção Customizado, todas as configurações do Eixo Y serão redefinidas.
Múltipla Escala
Permite ao usuário configurar mais de uma escala para o Eixo Y:
Adicionar ( ): adiciona uma nova escala;
Selecionar: permite escolher o número do Eixo Y que será configurado;
Remover ( ): exclui a última escala adicionada ou limpa as customizações do Eixo Y quando houver apenas uma escala criada.
Atenção
A associação entre a escala do Eixo Y e a série de Dados é definida na configuração de Aparência do Conjunto de Dados. Cada escala pode estar relacionada a várias séries de Dados.
Ao sair do modo de edição e retornar, o Eixo Y 1 será selecionado automaticamente.
Título
Esta seção permite a configuração do Título do Eixo Y.
Texto
Se o campo for preenchido, será exibido no final do Eixo Y associado à série.
Posição
Define a posição do título no Eixo Y, de acordo com o ícone selecionado ao clicar:
Superior;
Meio;
Inferior.
Offset
Ajusta o espaçamento (utilizando a medida em pixels) entre o título da escala e a linha do Eixo Y, definindo a distância entre o título e o gráfico.
Rotação
A funcionalidade de Rotação permite ajustar o ângulo do título exibido no Eixo Y de um gráfico.
O ângulo de rotação pode variar de -90º a 90º, e o ajuste é realizado por meio de um controle deslizante(slider) ou através das setas do teclado quando o slider estiver selecionado.
Além disso, é possível redefinir a rotação para 0º clicando no botão de “Restaurar”, representado pelo ícone “”.
Cor dinâmica
Permite a personalização da cor do título do Eixo Y:
Habilitada: A cor do título será ajustada automaticamente para corresponder à cor do rótulo da escala associada;
Desabilitada: A cor do título seguirá o padrão do sistema.
Escala
Esta seção permite a configuração da escala do Eixo Y, ajustando como os valores são distribuídos verticalmente na área de plotagem.
Para isso, são disponibilizadas as seguintes opções:
Mínimo
Define o limite inferior do gráfico (menor valor a ser apresentado no eixo), determinando o ponto inicial de exibição da escala.
É possível configurar este limite de duas formas:
Mínimo Constante
Define um valor para o limite inferior do gráfico.
Padrão: O sistema define como zero, ou um número negativo caso haja variação negativa nas amostras com arredondamento para o próximo intervalo automático da escala.
Mínimo Relativo
Ajusta o limite inferior do eixo dinamicamente com base no menor valor presente nos Dados filtrados para definir o início da escala do gráfico:
Automático: Por padrão, a escala se adapta às mudanças nos Dados, garantindo que a série ocupe sempre a menor área visual possível, exibindo o valor exato do menor valor na escala;
Deslocamento: Permite adicionar uma margem extra de “respiro visual” para evitar que os pontos da série encostem na borda inferior do gráfico, melhorando a legibilidade.
Máximo
Define o limite superior do gráfico (maior valor a ser apresentado pelo eixo), determinando o ponto final de exibição da escala.
É possível configurar este limite de duas formas:
Máximo Constante
Define um valor para o limite superior do gráfico.
Padrão: O sistema define o valor máximo conforme a variação dos Dados e adiciona um arredondamento para o próximo intervalo automático da escala.
Máximo Relativo
Ajusta o limite superior do eixo dinamicamente com base no maior valor presente nos Dados filtrados para definir o topo da escala do gráfico:
Automático: Por padrão, a escala se adapta às mudanças nos Dados, garantindo que a série ocupe sempre a menor área visual possível, exibindo o valor exato do valor máximo na escala;
Deslocamento: Permite adicionar uma margem extra de “respiro visual” para evitar que os pontos da série encostem na borda superior do gráfico, melhorando a legibilidade.
Utilização da Escala Relativa
Diferente da escala padrão, a Escala Relativa ajusta a amplitude do eixo com base na variação real dos Dados, eliminando espaços vazios e focando no intervalo onde a mudança realmente acontece.
Nota
Este recurso não possui suporte à função Estender Escala. O Deslocamento Relativo deve ser utilizado como a alternativa oficial para garantir o espaçamento visual no topo e na base do gráfico.
Por que utilizar a Escala Relativa?
Foco e Precisão: Ideal para faixas de operação altas (ex: entre 400 e 500). Evita que o gráfico inicie no zero, o que “esmagaria” a visualização da variância.
Resolução Visual Superior: Ao aproximar os limites do eixo aos valores reais das amostras, pequenas oscilações e tendências que antes passavam despercebidas tornam-se claras e fáceis de analisar.
Aproveitamento de Área: Garante que a área de plotagem seja totalmente preenchida pelos Dados atuais, centralizando a informação de forma inteligente e profissional.
Cenário de Comparação
Para compreender o impacto visual, considere o exemplo de uma amostra que varia entre 402 e 507:
1º Escala Padrão (Constante): * O gráfico inicia em 0 e termina em 600; * Intervalos fixos de 100 em 100. Note que a série fica “espremida” no topo, dificultando a percepção de pequenas mudanças, pois a escala é excessivamente ampla em relação à faixa real dos valores.
2º Escala Relativa: * Ajusta o gráfico para iniciar exatamente em 402 e terminar em 507; * O intervalo torna-se menor (de 20 em 20, exceto nas extremidades). Note que a variação dos Dados torna-se detalhada e centralizada em toda a área do gráfico, permitindo uma análise muito mais precisa.
Intervalo (Incremento)
Define o “passo” ou a distância numérica entre cada marcação da escala.
Esta configuração é importante para definir a quantidade de linhas de grade e a distribuição dos valores no gráfico, facilitando a leitura e interpretação do gráfico: um intervalo menor oferece maior detalhamento, enquanto um intervalo maior resulta em uma visualização mais limpa.
Por padrão, o incremento é definido com base na variação dos Dados para otimizar a leitura, mas pode ser personalizado para atender às necessidades específicas de visualização.
A personalização manual é ideal para padronizar a análise entre diferentes gráficos, permitindo que escalas de painéis distintos utilizem o mesmo salto numérico. Isso facilita a comparação visual entre múltiplos gráficos, garantindo que todos sigam a mesma lógica de escala. Caso o valor seja apagado, o sistema retorna ao comportamento padrão.
Deslocamento (Offset)
Ajusta o espaçamento (em pixels) entre a Linha do Eixo e a área de plotagem dos Dados.
Estética e Clareza: Proporciona um acabamento profissional ao separar a escala numérica da representação gráfica.
Legibilidade: Evita que os valores do eixo e os símbolos da série (especialmente em gráficos de dispersão com símbolos grandes) fiquem “espremidos”.
Múltiplas Escalas: É essencial em gráficos com mais de uma escala, onde as linhas de escala podem ficar muito próximas ou sobrepostas, dificultando a distinção entre os Dados de cada série.
Dica
Utilize o Offset em conjunto com a Área de Espaçamento do painel para garantir que o rótulo do eixo tenha respiro suficiente e não seja cortado na visualização final.
Estender escala
Expande os limites da escala automática em ambas as extremidades, além dos valores mínimo e máximo dos Dados. Isto evita que o gráfico fique muito próximo das bordas da área de visualização.
Atenção
Para que funcione, mantenha a escala em modo Automático.
Essa função será ignorada se você definir valores manuais para a Escala Mínima ou Máxima, ou seja, é possível estender a escala em apenas uma extremidade.
Exemplo de utilização
Imagine um gráfico com uma série de dados de Temperatura. A série de Temperatura varia entre -20 e 100 graus Celsius.
Exibição padrão
Após associar o Dado na interface, por padrão, o gráfico é exibido com o tipo de linha e a escala é ajustada automaticamente para abranger todos os valores da série.
Configurando para Gráfico de Dispersão
Porém, o objetivo é exibir em um Gráfico de Dispersão (Scatter Plot).
Para isso, acesse as configurações do Conjunto de Dados e siga os passos:
No campo Tipo, altere o tipo do gráfico para
Dispersão;Em Aparência, aumente o tamanho do símbolo para
26;Em Rótulo, ative a exibição do rótulo, escolha a cor
branca, apague o formato e defina a posição comodentro do símbolo.
Perceba que os símbolos do gráfico estão muito próximos das bordas da área de visualização do gráfico, o que prejudica a leitura.
Ajustando a escala com “Estender escala”
Para melhorar a visualização, ajuste o espaçamento vertical.
Configure no Eixo Y, na seção Escala, a opção Estender escala
para 10%.
Observe que, agora, os símbolos do gráfico estão mais afastados dos limites superior e inferior da área de plotagem.
Ajustando o espaçamento horizontal com “Offset”
Apesar da melhoria, os símbolos ainda estão sobre o eixo Y da escala. Para finalizar os ajustes de visualização:
No Eixo Y, na seção Escala, configure a opção Offset para
20;Ajuste o espaçamento da área do gráfico em relação ao painel no menu Geral, Área, definindo o Espaçamento Esquerdo para
45.
Exibição/Ocultação
Permite ocultar uma escala enquanto seus limites e grades influenciem nas projeções das séries.
A visibilidade pode ser configurada ao clicar na opção Visível:
Marcado: Escala visível;
Desmarcado: Escala oculta.
Inverter Escala
Inverte a ordem dos valores no Eixo Y, de modo em que o menor valor seja exibido no topo do gráfico.
Esta configuração é realizada pela opção nomeada “Invertida”.
Atenção
Ao habilitar essa opção, o título do Eixo Y também será invertido.
Posição/Lado
Permite definir o lado da área do gráfico em que o Eixo Y será posicionado e exibido.
A posição pode ser ajustada ao clicar no ícone, alterando seu formato de acordo com o lado selecionado:
- : Lado Esquerdo;
- : Lado Direito.
Rótulo
Esta secção permite a configuração do Rótulo do Eixo Y.
Fonte
Permite a personalização da fonte dos valores no Eixo Y, podendo ser configurada de maneira Padrão ou Customizada.
Propriedade |
Descrição |
Default |
|---|---|---|
Fonte |
Define os atributos da fonte Opções:
|
Source Sans Pro 84% |
Cor e Formato
Cor: Define a cor do texto. Para mais informações, acesse: Cores.
Formato: Os tipos de formato permitem a personalização da apresentação dos valores que serão exibidos no Eixo Y.
Os formatos possíveis são os seguintes:
Formato |
Utilidade |
|---|---|
Padrão |
Exibe no Eixo Y os valores de cada série de dados de forma padrão(10, 20.75, 100…), conforme a variação de informações no gráfico. |
Lista de textos |
Permite configurar ou selecionar uma lista de textos cujo itens da lista que corresponderem as valores das séries de Dados serão substituídos pelos respectivos textos em suas apresentações no Eixo Y do gráfico. Para maiores informações, acesse Lista de textos. |
Customizado |
Permite a personalização de como os valores do Eixo Y serão apresentados. Para maiores informações, acesse Formato Customizado. |
Lista de textos
Permite configurar ou selecionar uma lista de textos cujos itens da lista que corresponderem aos valores das séries de Dados serão substituídos pelos respectivos textos em suas apresentações no Eixo Y do gráfico. Esta opção possui as seguintes configurações:
Origem
A configuração de origem define as seguintes opções:
Controle: Todas as configurações da Lista de textos serão contextuais ao controle em que a lista for definida, ou seja, a lista é criada e utilizável apenas no controle;
Global: Apresenta as Listas de Textos do contrato que foram criadas no cadastro de Dados. Neste caso, os itens que serão utilizados serão os definidos na lista selecionada.
Caso selecionada a origem Controle, as seguintes opções são disponibilizadas para que os itens da lista sejam definidos:
Texto
Texto que será apresentado no Eixo Y para o valor do dado conforme o valor definido na configuração abaixo.
Valor
Valor da série de Dados que será substituído pelo Texto no Eixo Y conforme o texto na configuração acima.
Exemplo
Vamos imaginar um Dado do tipo booleano(que pode assumir os valores 0 ou 1) e que este Dado defina o estado de funcionamento de um motor(0 = OFF e 1 = ON).
Por padrão, o Eixo Y do gráfico apresentará justamente os valores 0 ou 1 conforme a variação deste Dado.
Porém, neste exemplo seria adequado atribuir uma Lista de Textos aos valores 0 e 1 (“0FF” e “ON”) indicando os momentos em que o motor permaneceu ligado e desligado.
Portanto, iremos definir uma lista de texto da seguinte maneira:
Um item com seu Texto definido como “OFF” e com o Valor “0”;
Um item com seu Texto definido como “ON” e com o Valor “1”;
Exemplo da configuração da Lista de textos:
Neste caso, o Eixo Y do gráfico exibirá a palavra “OFF” quando o valor do dado na série for igual a “0” e exibirá o texto “ON” quando o valor do dado na série for igual a “1”, como mostra a imagem abaixo:
Formato Customizado
Ao expandir as opções de Formato e selecionar “Customizado”, dois novos campos serão disponibilizados: Expressão e Formato
Expressão
É possível utilizar expressões em JavaScript para calcular valores a serem apresentados ou comparados, filtrar resultados, formatar valores, entre outras funcionalidades.
$value ou ${value}: Refere-se ao valor do Dado que será exibido no Eixo X.
Para maiores informações sobre como personalizar o valor exibido através de Expressões, consulte Expressões.
Formato
O Formato permite personalizar a forma em que os valores do Eixo Y serão apresentados.
Esta propriedade define o formato de apresentação do valor, incluindo elementos como o formato de Data e Hora, prefixo, sufixo, e outros detalhes de formatação.
Abaixo estão alguns exemplos de Formatos que podem ser utilizados como referência no Eixo Y:
Valor |
Conteúdo |
|---|---|
Kilos (Kg) |
%05d Kg |
Graus Celsius (°C) |
%.2f °C |
Metros (M) |
%d M |
Para maiores informações sobre como personalizar o valor exibido através de Formatos, acesse Formato de apresentação de um valor.
Posição
Define a posição dos valores do Eixo Y no Gráfico em relação à Linha:
: Fora em relação à Linha;
: Dentro em relação à Linha.
Offset: Valor que ajusta o espaçamento em relação a linha(utilizando a unidade de medida em “Pixels”).
Rotação
A funcionalidade de Rotação permite ajustar o ângulo dos valores exibidos no Eixo Y de um gráfico.
O ângulo de rotação pode variar de -90º a 90º, e o ajuste é realizado por meio de um controle deslizante(slider) ou através das setas do teclado quando o slider estiver selecionado.
Além disso, é possível redefinir a rotação para 0º clicando no botão de “Restaurar”, representado pelo ícone “”.
Legenda
Mostrar na posição
Quando habilitada, exibe a legenda das séries dos Dados.
A legenda apresenta todas as séries de Dados selecionadas para visualização, facilitando a identificação de cada linha/curva apresentada.
Também permite ajustar o alinhamento da legenda por meio dos ícones de posicionamento no gráfico, possibilitando posicionar a legenda em diferentes áreas do painel para melhor visualização e aproveitamento do espaço disponível.
Cor dinâmica
Permite a personalização da cor da label na legenda:
Habilitada: A cor de cada label na legenda será ajustada automaticamente para corresponder à cor de sua série de Dados associada;
Desabilitada: A cor da label seguirá o padrão do sistema.
Nota
A utilização da cor dinâmica na legenda auxilia na rápida identificação visual dos Dados no gráfico, especialmente quando múltiplas séries são apresentadas simultaneamente.
Atenção
Caso o gráfico seja do tipo Torta, a cor dinâmica será a mesma do rótulo da série de Dados.
Orientação
Define a orientação da legenda no gráfico:
Horizontal: Exibe a legenda em uma única linha horizontal;
Vertical: Exibe a legenda em uma coluna vertical.
Espaçamento
Define o espaçamento entre a borda do painel e a legenda do gráfico:
Propriedade |
Descrição |
Default |
|---|---|---|
Superior |
Define a distância, em pixels, de espaçamento entre a borda superior do painel e a legenda |
0 |
Direita |
Define a distância, em pixels, de espaçamento entre a borda direita do painel e a legenda |
0 |
Esquerda |
Define a distância, em pixels, de espaçamento entre a borda esquerda do painel e a legenda |
0 |
Inferior |
Define a distância, em pixels, de espaçamento entre a borda inferior do painel e a legenda |
0 |
Tooltip
O recurso de Tooltip do gráfico é responsável por exibir detalhadamente cada um dos valores dos Dados apresentados no mesmo, podendo ser configurada de maneira Padrão ou Customizada.
Para mais informações, acesse Tooltip.
Limitação na apresentação de valores
Atualmente, a ferramenta utilizada para auxiliar na visualização dos valores dos Dados em um gráfico(tooltip) possui uma limitação.
Em algumas situações, a ferramenta tooltip pode não apresentar o valor de um dos Dados em sua legenda, como mostra o exemplo abaixo:
Neste exemplo, ao passar o cursor sobre um determinado ponto do gráfico, o tooltip exibido não apresenta a descrição do valor do Dado “Umidade”.
Pode-se contornar essa limitação ampliando o gráfico utilizando a ferramenta zoom-in (através do botão de rolar do mouse para cima) para que os detalhes do gráfico sejam ampliados e, consequentemente, possuir mais detalhes em cada ponto de alteração de valor dos Dados.
Configurações adicionais
Esta seção contempla as configurações adicionais de apresentação do gráfico:
Tema do gráfico;
Compatibilizar séries de Dados.
Para mais informações, acesse este mesmo recurso do Controle Chart, pois as configurações e funcionamento são equivalentes.
Expressões para apresentação de séries de Dados
No Painel de Histórico de Dados e no Painel Gráfico, é disponibilizada uma configuração chamada de “ Expressão” em cada Dado que deseja-se apresentar os seus valores no painel, sendo possível então definir uma expressão para calcular um novo valor para o Dado(com base no valor lido/original) e estes novos valores serem apresentados nos painéis.
Para mais informações sobre como personalizar o valor exibido, acesse Expressões.
Filtros de valores para apresentação de séries de Dados
No Painel de Histórico de Dados e no Painel Gráfico, é disponibilizada uma configuração chamada de “ Filtro” em cada Dado que deseja-se apresentar os seus valores no painel. Esta ferramenta permite definir um filtro para os valores que serão apresentados por estes painéis.
Para mais informações sobre como personalizar o valor exibido de acordo com os filtros, acesse Filtro de Inclusão e Filtro de Exclusão.
Expressões / Fórmulas de Histórico para o Gráfico de Torta
Para o tipo de gráfico configurado como Torta, é possível navegar e selecionar propriedades que serão usadas para escrever expressões que retornem o resultado de um cálculo ou mesmo combinando diversos resultados em uma única série.
Portanto, no campo Expressão de uma série do gráfico do tipo Torta, tem-se acesso as expressões de histórico.
Para mais informações, acesse Expressões Do Dado.
Exibição de Lacunas do Histórico Desativado pelo Dado Ativador
Introdução
Esse recurso permite configurar as séries de um gráfico para exibir visualmente as lacunas de Dados nos períodos em que o histórico está desabilitado, destacando a ausência de registros, independentemente do estado de conexão do Conector.
O estado do histórico é controlado pelo Dado Ativador de Histórico, que gerencia a ativação do histórico configurado no Dispositivo.
Atenção
O Dado Ativador precisa ter o histórico habilitado para ser exibido no gráfico.
Ocultar Tendência dos Dados
Durante os períodos em que o histórico está desativado, é possível ocultar a tendência dos Dados, interrompendo a linha de conexão entre pontos e destacando visualmente a ausência de registros.
Para configurar o gráfico de forma a evidenciar essa interrupção:
Defina a cor da série do Dado Ativador como sólida, sem transparência, e posicione-a à frente das outras séries.
Exemplo de Configuração
Para criar uma visualização com as configurações desejadas, siga os passos iniciais abaixo:
Crie uma nova Tela contendo 2 painéis: Painel Barra de Ferramentas e Painel Gráfico;
Nas Propriedades do Painel Gráfico, acesse Propriedades específicas;
Na seção de Série de Dados, selecione os Dados a serem monitorados pelo Painel Gráfico de acordo com o Conector associado a Tela onde foram cadastrados e clique em “Adicionar série”, para exibi-los no Conjunto de dados.
As configurações iniciais estão demonstradas na imagem abaixo:
Em seguida, habilite o Simulador Global para visualizar as mudanças nas configurações do Painel Gráfico em modo de edição:
Configuração do Eixo Y com Múltipla Escala:
Habilite o Eixo Y customizado;
Adicione o Eixo Y (2) com escala de 0 à 1, invertida, para mostrar o Dado Ativador com o valor Falso no topo;
Habilite a exibição da legenda do Conjunto de Dados.
As configurações estão demonstradas na imagem abaixo:
Ajustes de Aparência do Dado Ativador no Gráfico:
Defina uma cor sólida (RGB: 255, 229, 231, 1 ou #FFE5E7) sem transparência;
Habilite o preenchimento da área com opacidade 1;
Escolha a forma da onda como quadrada;
Configure a espessura de linha como zero para mostrar apenas o preenchimento;
Defina o Z-index como 4 para que a série fique à frente das demais;
Associe-a ao Eixo Y 2 (Múltipla Escala).
As configurações estão demonstradas na imagem abaixo:
Atenção
Observe no tooltip que o Dado Ativador com valor 1 está preenchido, pois o gráfico invertido preenche de cima para baixo.
Para inverter os valores do Dado Ativador e fazer com que a desconexão fique visível, use a expressão de transformação:
$value == 1 ? 0 : 1
Caso utilize o valor da temperatura (>= 40) como Dado Ativador para habilitar o histórico, a expressão ficaria:
$value >= 40 ? 0 : 1
Abaixo, a configuração aplicada:
Atenção
Podemos ver no tooltip que o valor foi transformado, com o valor calculado exibido primeiro, seguido pelo valor lido entre parênteses.
Para simplificar a visualização, oculte a escala do lado direito, se desejado:
Para ocultar a legenda do Dado Ativador, acesse as configurações específicas de Aparência:
Para ocultar o tooltip do Dado Ativador, acesse as configurações específicas de Aparência:
Gráficos de Dispersão (XY) com Curva Padrão
O gráfico de dispersão é uma ferramenta essencial para analisar a relação entre dois conjuntos de Dados, representados nos eixos X e Y. Cada ponto no gráfico corresponde a uma amostra capturada no mesmo timestamp, possibilitando a identificação de tendências, padrões e desvios em relação a uma curva padrão previamente cadastrada.
Por exemplo, ao monitorar um sistema hidráulico, podemos plotar Pressão (X) e Temperatura (Y). Se houver um aumento proporcional entre ambos, isso pode indicar um comportamento esperado do sistema. No entanto, desvios significativos da curva padrão podem apontar para possíveis anomalias ou indicar a necessidade de manutenção preventiva.
Para ilustrar esse conceito, considere o seguinte conjunto de amostras coletadas para os Dados de Pressão e Temperatura:
Atenção
Para que os valores dos Dados associados a X e Y sejam corretamente interpretados pelo gráfico, eles devem ser enviados com o mesmo timestamp. Isso garante a correta associação entre os dois valores na coordenada do gráfico.
Exemplo de configuração
Vamos criar um Gráfico de Dispersão para analisar a relação entre Pressão (X) e Temperatura (Y) em um sistema hidráulico. O objetivo é identificar a proporcionalidade entre essas grandezas e detectar possíveis desvios.
Estrutura da Tela
- Para isso, configuraremos uma tela com os seguintes componentes:
Painel de Barra de Ferramentas;
Painel Gráfico;
Painel Tabela.
A seguir, configuramos o Painel Tabela para exibir o histórico das amostras de Pressão e Temperatura:
O resultado esperado deve se parecer com:
Configuração da Curva Padrão
Agora, iremos utilizar a Definição da Curva Padrão do Dado no gráfico para adicionar uma série ao gráfico que auxiliará na análise.
Neste exemplo, queremos avaliar como a Temperatura (Y) varia em função da Pressão (X). Para isso, cadastramos os valores da Curva Padrão no Dado de Temperatura:
Por exemplo, quando a Pressão for 0, a Temperatura será 25. Se a Pressão aumentar para 0.05, a Temperatura será 75(e assim por diante).
Configuração do Painel Gráfico
Agora, configuramos o Painel Gráfico da tela.
Adicionando a Série de Temperatura
Primeiro, adicionamos uma série correspondente ao Dado de Temperatura, que representará os valores do Eixo Y:
O sistema detectará automaticamente a Curva Padrão cadastrada no Dado e adicionará uma nova série com o mesmo nome, identificada por um asterisco (*) e oculta por padrão:
Atenção
Ao clicar em Adicionar Todos, a Curva Padrão não será incluída. Para adicioná-la, é necessário adicionar a série manualmente.
Exibindo a Curva Padrão
Expandindo a série da Curva Padrão, podemos visualizar sua identificação:
Habilitamos a exibição da Curva Padrão e, opcionalmente, renomeamos para Curva de Calibração:
Agora, configuramos o Eixo Y e para isso, alteramos o tipo de gráfico da série de Temperatura para Dispersão:
Configuramos os demais parâmetros do Eixo Y:
Caso não queira exibir o último valor no tooltip sem seguir a coordenada, desative a opção Mostrar último valor registrado:
Configuração do Eixo X
Agora, configuramos o Eixo X, adicionando uma nova série no gráfico e associando-a ao Dado de Pressão e mantendo-a oculta:
Atenção
A série de Pressão deve estar oculta, pois seu valor será usado apenas para determinar a posição dos pontos no gráfico.
Na sequência, vamos configurar o Eixo X para utilizar os valores de Pressão em vez do timestamp das amostras:
Por fim, vamos definir a série associada ao Dado de Pressão para ser a fonte de valores do Eixo X:
Publicação e Visualização
Após publicar a tela e defini-la como Dashboard de um Conector, podemos acessá-la e realizar consultas definindo um Período Inicial e um Período Final no Painel de Barra de Ferramentas:
No gráfico, podemos observar a Curva de Calibração traçada conforme os valores XY cadastrados no Dado de Temperatura (Y). As amostras coletadas de Pressão e Temperatura são plotadas no gráfico, permitindo uma análise detalhada da relação entre essas grandezas com o padrão esperado.
Visualização da Identificação na Aplicação
O portal de telemetria disponibiliza no formulário de cadastro de Dados, este campo para a identificação associada a este Dado na aplicação/firmware do equipamento remoto.
A visualização no Painel Gráfico da Identificação na Aplicação é exibida apenas nas configurações, não sendo visível no dashboard, porém caso precise dele poderá alterar o nome de visualização do dado.
Para visualizá-lo no seletor de dados, precisa ativar esse modo, clicando no ícone que ira mudá-lo para , que mudará o nome dos dados que contém essa identificação, além de possuir essa informação no tooltip no nome do dado com essa informação.
Então pode ser apresentado no Seletor de Dados.
Podendo ser apresentado também na lista de dados selecionados.
Visualização da Unidade de Engenharia do Dado
A unidade do valor do dado está disponível no tooltip do painel gráfico por padrão para os dados que possuem o campo unidade no dado definido.
