> For the complete documentation index, see [llms.txt](https://wedocs.gitbook.io/wedocs-5.1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wedocs.gitbook.io/wedocs-5.1/wedocs-4.6-es_es/cliente-desktop/criacao-e-edicao-de-dashboards/componente-grafico.md).

# Componente Gráfico

### Exemplos:

<div align="left"><img src="/files/8CVjwTHcjIpk8kxhnKq6" alt=""></div>

<div align="left"><img src="/files/27BoPPw5Q4QNYBE77xyh" alt=""></div>

<div align="left"><img src="/files/BLlZeFG9xrcRkbjhmyQb" alt=""></div>

Para criação de um componente de tipo <mark style="color:blue;">**Gráfico**</mark>, na última tela do assistente deste objeto deverá ser informado pelo menos um campo na área de *Valores* e *Rótulos*, além da escolha de um tipo de Gráfico em *Série Base*.

Para iniciar, bastar selecionar o campo na listagem do lado esquerdo e arrastar para as áreas *<mark style="color:blue;">**Valores**</mark>* e *<mark style="color:blue;">**Rótulos**</mark>* à direita (área central da tela):

<div align="left"><img src="/files/RxgzxHoM6zObqcIZ0Kwb" alt=""></div>

A listagem à esquerda da tela são os *<mark style="color:blue;">Campos</mark>* *<mark style="color:blue;">disponíveis</mark>*, conforme disponibilizados pelo metadado informado na confecção do componente em fases anteriores. Se caso algum campo estiver faltando ou ainda não existir edite o seu metadado ou crie um campo calculado.

Para os campos em *<mark style="color:blue;">Rótulos</mark>* é possível alterar sua formatação. Essa opção é uma funcionalidade genérica e possui mais informações no tópico **Componentes -** **Opções Gerais** deste mesmo documento.

Já para *Valores*, é possível alterar o título, a função de agregação (Soma, Média, Contagem, Máximo, Mínimo), sua formatação e o tipo da série que se baseará na opção *Série* *base*.

Por exemplo, caso selecionado na *<mark style="color:blue;">Série base</mark>* a opção Pizza, o assistente permitirá que a série seja tanto em Pizza quanto em Rosca pois estes são tipos da mesma família de série base. A seguir temos as opções de *<mark style="color:blue;">Valores</mark>* e das famílias de indicadores:

<div align="left"><img src="/files/s03uD4k4XvlRpAIll8au" alt=""></div>

Sendo assim, ao clicar nas opções que constam em *<mark style="color:blue;">Série base</mark>*, aparecerão os tipos de gráfico de acordo com sua familiaridade. Dentre eles, gráficos dos tipos: *Coluna, Linha, Área, Pizza, Rosca, Barra, Bolha, Dispersão.*

Além das opções apresentadas, há também a opção de remover o campo de valores através do símbolo *<mark style="color:blue;">X</mark>*, a opção para limpar todos os valores com um símbolo de *<mark style="color:blue;">Vassoura</mark>* e ainda a opção *<mark style="color:blue;">Configurações</mark>* representada como uma pequena *<mark style="color:blue;">Engrenagem</mark>*.

### **Mais de uma dimensão/valor para um gráfico - Visões customizadas**

Com a opção *Visões customizadas*, no momento de editar o gráfico o desenvolvedor de conteúdo pode disponibilizar campos que farão o usuário final utilizar este gráfico com diversas novas visões e novas formas de análise em meio à sua utilização do gráfico em questão:

<div align="left"><img src="/files/8EFDR6SxIiyhQJxZVWIu" alt=""></div>

Ao entrar na versão Web será possível visualizar os dados disponível (selecionado nas visões customizadas do componente), conforme exemplo a seguir:

<div align="left"><img src="/files/rzEpITaqCm3hIat0YCug" alt=""></div>

<div align="left"><img src="/files/rEe4wgJN2SstzcvDpKPV" alt=""></div>

Ao clicar em *<mark style="color:blue;">Usar campo do metadado</mark>*, irá abrir um menu suspenso para selecionar o campo que deseja utilizar:

<div align="left"><figure><img src="/files/8C4URKHnRmeXKQdtyGSe" alt=""><figcaption></figcaption></figure></div>

### **Várias dimensões para um gráfico**

No Weknow Desktop é possível criar diversas dimensões para o mesmo gráfico e está disponível na edição de um componente do tipo gráfico. Com está opção, no momento de editar o gráfico o desenvolvedor de conteúdo pode disponibilizar várias dimensões para o mesmo gráfico.

<div align="left"><img src="/files/YDEaUhbXYukBfcGPR2NO" alt=""></div>

Ao clicar no botão irá abrir um menu suspenso:

<div align="left"><img src="/files/IchuAegYrsluwKV7YEBv" alt=""></div>

O primeiro bloco de opções exibe as visões já cadastradas. A visão atualmente ativa é destacada em negrito. Além disso, a visão padrão (que é sempre a primeira da lista) é marcada com o texto adicional ‘(padrão)’.

* A opção *<mark style="color:blue;">**renomear esta visão**</mark>* permite que especifique o nome da visão atualmente ativa. Por padrão, o sistema monta o nome da visão de forma automática de acordo com os campos nela presentes.
* A opção *<mark style="color:blue;">**excluir esta visão**</mark>* permite que exclua a visão atualmente ativa. Está opção é visível apenas se houverem ao menos duas visões.
* A opção *<mark style="color:blue;">**alterar a ordem das visões**</mark>* permite que reorganize as visões. Ele pode, desta forma, definir a visão padrão colocando-a no topo da lista. Está opção é visível apenas se houverem ao menos duas visões.

<div align="left"><img src="/files/V561d2F7idgE87mffpcd" alt=""></div>

* A opção *<mark style="color:blue;">**excluir todas as visões**</mark> (exceto a padrão)* permite que remova todas as visões adicionais. Está opção é visível apenas se houverem ao menos duas visões.
* A opção *<mark style="color:blue;">**adicionar visão**</mark>* permite que adicione uma nova visão.

A pré-visualização do assistente exibe automaticamente os dados de acordo com a(s) visão(ões) ativa(s).

<div align="left"><img src="/files/nUwVL7NYZXrH0TB4Q3HA" alt=""></div>

No dashboard, o componente exibe textos adicionais quando há visões. Ao clicar nestes textos abre um menu suspenso que permite alterar a visão atualmente ativa:

<div align="left"><img src="/files/wCU5PkAuFG8sJwTug5za" alt=""></div>

Essa última opção abrirá uma janela de configurações estéticas.

Também é possível renomear o titulo do campo das visões pelo Weknow Desktop, mas para isso é necessário que o gráfico tenha pelo menos duas visões:

<div align="left"><figure><img src="/files/KDH4hn2wsevmfLuZCa9c" alt=""><figcaption></figcaption></figure></div>

As configurações estéticas contam com diversos parâmetros como: *<mark style="color:blue;">texto de legendas; dica flutuante; formatação de cores condicionais/fixas; Texto Central</mark>* (*utilizado em gráfico Rosca*) *<mark style="color:blue;">entre outras configurações</mark>*, que além de estarem a disposição especificamente em cada série, podem ser disponibilizadas de forma genérica em *<mark style="color:blue;">Série (padrão)</mark>*:

<div align="left"><img src="/files/6PpJkWWfbqlTqIFYw5gq" alt=""></div>

Nesta sessão em *<mark style="color:blue;">Menu lateral >> Configuração >> Série (padrão)</mark>*, as configurações são aplicadas como um padrão para todos os campos selecionados em *<mark style="color:blue;">Valores</mark>*, e caso algum dos valores tenham configurações informadas, estas então serão consideradas mais específicas e por isso então sobrepõe as configurações em Série (padrão).

Para o gráfico de *<mark style="color:blue;">Barras</mark>*, por exemplo, é possível selecionar em qual eixo os valores para o campo vão se posicionar. Permitindo um gráfico de barras com dois eixos (esquerda e direita) e com número de *<mark style="color:blue;">Divisões</mark>* diferentes, e até mesmo *<mark style="color:blue;">Barra de Rolagem</mark>*. Basta configurar o campo para ter o seu *<mark style="color:blue;">Eixo</mark>* *<mark style="color:blue;">vertical</mark>*<mark style="color:blue;">/</mark>*<mark style="color:blue;">horizontal</mark>* diferente do padrão, conforme segue:

<div align="left"><img src="/files/jxWilK6FYoVsfK5S1CQ3" alt=""></div>

<div align="left"><img src="/files/fW3uYfEgH2Ihs2VZFBgh" alt=""></div>

<div align="left"><img src="/files/08b5OUIhZOvoXeFXFhAW" alt=""></div>

Ainda assim, as configurações estéticas podem ser alteradas mais uma vez em *<mark style="color:blue;">Personalizações</mark>*. Essa opção é ainda mais específica, podendo ser aplicada a apenas uma parte do valor e não ao campo inteiro. Por isso sobrescreve todas as outras configurações estéticas já realizadas, sejam elas no padrão ou para um campo na opção da engrenagem.

<div align="left"><img src="/files/CffF7gae8AQ19NO9qEov" alt=""></div>

Para isso, a personalização depende apenas da *<mark style="color:blue;">Condição (fórmula)</mark>* para identificar quais valores são personalizados. Essa configuração utiliza do formulador do Weknow com diversas funções cada uma com sua descrição do valor retornado.

No exemplo a seguir a fórmula está buscando o valor do *<mark style="color:blue;">Rótulo</mark>* - $label – e comparando com o valor “Feminino”. Se caso verdadeiro, a personalização é aplicada, caso contrário não.

<div align="left"><img src="/files/OIrNaoriE0e7zWzaWc2o" alt=""></div>

Isso significa que essa personalização está sobrescrevendo a configuração padrão em todas as linhas que possuem o campo “*<mark style="color:blue;">person\_sex</mark>*” com o valor “*<mark style="color:blue;">Feminino</mark>*”, aplicando a seguinte configuração:

<div align="left"><img src="/files/QntSZa9QY74lZmyixOOP" alt=""></div>

> *O campo “person\_sex” não possui seus valores como “Feminino” e “Masculino”, para isso foi utilizada a opção de **Formatação**. Mais detalhes desta opção estão em **Componentes – Opções Gerais**.*

Nesse exemplo, com o modo *<mark style="color:blue;">Fixa</mark>* selecionado, o Rótulo assume tom em Rosa caso se chame “Feminino”, e através de outra personalização, Azul caso denominado “Masculino”.

#### Atenção!

Se houver alguma configuração em *<mark style="color:blue;">Personalizações</mark>* ou na *<mark style="color:blue;">Configuração</mark>* do campo, como apresentado anteriormente, essas sobrescreverão a configuração feita em *<mark style="color:blue;">Série (padrão)</mark>*.

Outros modos para configuração das cores estão disponíveis como o modo *<mark style="color:blue;">Escala</mark>*, é possível que se assumam cores de acordo com faixas percentuais dos valores assumidos de acordo com seu 100% de dados, ou ainda em faixas de valores reais. Exemplo:

<div align="left"><img src="/files/TVYwIi9orha32591Fcrh" alt=""></div>

#### **Utilize os botões para auxílio nesta configuração:**

* “***...***” – Importa sequências de cores padrão da ferramenta, e que podem ser editadas para o gráfico em questão sem alterar o modelo de fábrica;
* “***+***” – Insere nova faixa, onde então deverá ser editada a cor e Valor / Tipo associado;
* “***-***” – Remove faixa de cor selecionada;
* “***x***” – Limpa as configurações de cores desta regra de formatação condicional.

Ainda é possível configurar o comportamento de aplicação da escala através da opção *<mark style="color:blue;">Aplicação</mark>*. Por exemplo, ao selecionar *<mark style="color:blue;">Mesclar cores</mark>*, tendo duas cores num intervalo entre dois valores (0% a 100%) a formatação condicional analisa o peso do % de determinado valor ao seu total, e distribui esse peso de forma “*dégradé*” de cores:

<div align="left"><img src="/files/Fap18NJfdnaJ5BVhiB75" alt=""></div>

É possível também definir mais intervalos/faixas de percentuais. Segue exemplo usando a escala de cores pré-definida “Warm” e sua sugestão inicial de cores e faixas, a partir do botão “***...***”:

<div align="left"><img src="/files/dXfl6u30ZIyqEZV9n2mx" alt=""></div>

No exemplo acima note que o rótulo com maior peso tem 22,01%, e por isto o Weknow pintou com a cor que se encaixa entre as faixas 86% e 100%.

Pode-se criar sequências a qualquer momento e necessidade, ou ainda excluir ou mudar as cores que foram sugeridas pela escala.

Outro exemplo de configuração estética é a *<mark style="color:blue;">Linha curvada</mark>* de gráficos do tipo *<mark style="color:blue;">Linha</mark>* e *<mark style="color:blue;">Área</mark>*. Essa opção aparece apenas na visão do *Web Client,* porém pode ser aplicada na *<mark style="color:blue;">Série (padrão)</mark>* como no exemplo a seguir:

<div align="left"><img src="/files/HwBYMsih7CYRjuPzWPio" alt=""></div>

<div align="left"><img src="/files/Eib0e8B2PgLKRam6u4lS" alt=""></div>

Fazendo uso de todos os artifícios acima pode-se aplicar diversas configurações únicas para os componentes do tipo gráfico. A seguir está um exemplo em que utiliza de uma *<mark style="color:blue;">Personalização</mark>* do tipo *<mark style="color:blue;">Escala</mark>* para uma *<mark style="color:blue;">Série</mark>* específica (grupo de dados) além de uma *<mark style="color:blue;">Formatação</mark>* do campo “*<mark style="color:blue;">person\_sex</mark>*”:

<div align="left"><img src="/files/OXKOt8Z10shzqJdigTXD" alt=""></div>

<div align="left"><img src="/files/AGRZG7LvuZYYQy8CGS2v" alt=""></div>

<div align="left"><img src="/files/Hae8Oesm1dBNteqj583O" alt=""></div>

<div align="left"><img src="/files/WPpZ4MAnKYgLkYlimDRb" alt=""></div>

<div align="left"><img src="/files/9wBYDxmGWNcBvOkJcKia" alt=""></div>

* &#x20;<mark style="color:blue;">**Legendas do objeto Gráfico**</mark>**:** A área de edição de LEGENDAS dos gráficos é disposta com opções intuitivas, no entanto seu editor de texto possibilita utilização de macros que preenchem automaticamente valores relacionados a Séries, Total e Linhas de Tendência:

<div align="left"><img src="/files/49uMXQ3rZoMhRIVtE0L3" alt=""></div>

Antes de aplicar estas macros, seguem alguns **conceitos relacionados a estes termos que irão auxiliar ao entendimento para construção de textos de legenda** com macros de forma mais prática:

\
*<mark style="color:blue;">**Série**</mark>:* É um conjunto de pontos. Na imagem a seguir, as barras azuis são uma série e as barras roxas são outra série.

*<mark style="color:blue;">**Rótulo**</mark>:* Também é um conjunto de pontos, e no exemplo a seguir vemos que um rótulo pode ser dividido entre séries agrupando informações. Veja que no exemplo, BA é um rótulo, GO é outro, MA é outro, e assim por diante. Cada rótulo do exemplo um possui dois pontos.

*<mark style="color:blue;">**Ponto**</mark>:* É cada unidade desenhada individualmente (na imagem a seguir representado com barras).

Com base nestes conceitos, na imagem a seguir há: **2 séries; 14 rótulos; 28 pontos.**

<div align="left"><img src="/files/3d6yEuLh6jprpD69hSom" alt=""></div>

* <mark style="color:blue;">**Configurações> Valores> Anexar**</mark>**:**

As séries anexas são séries baseadas em uma série mestre, ou seja, elas usam os dados sumarizados de uma outra série para apresentar alguma informação adicional a respeito desta série como, por exemplo, a sua variação.

Na área *<mark style="color:blue;">CONFIGURAÇÃO</mark>*, ao inserir um campo na área *VALORES*, temos um ícone com símbolo *<mark style="color:blue;">**“+” Adicionar**</mark>*. Ao acioná-lo vemos as opções de anexar informações calculadas automaticamente levando em consideração o histórico exibido no gráfico na evolução de seus valores, e com isto podendo gerar diversas linhas de tendência, Média variável, Variação absoluta ou Variação Percentual para os valores da série em questão:

<div align="left"><img src="/files/Fka0kglGe7L3d9szDoMV" alt=""></div>

Dentre as opções mais utilizadas, destacamos a opção de *<mark style="color:blue;">**Variação Percentual**</mark>*<mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**,**</mark><mark style="color:blue;">**&#x20;**</mark>*<mark style="color:blue;">**Variação absoluta**</mark>*<mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**e**</mark><mark style="color:blue;">**&#x20;**</mark>*<mark style="color:blue;">**Média variável**</mark>*:

\ <mark style="color:blue;">**Variação percentual**</mark>**:** Apresenta a variação percentual dos dados da série mestre com base nos N rótulos anteriores (N >= 2):

<div align="left"><img src="/files/RlGLpMZwcp3bMMcvQtMf" alt=""></div>

<mark style="color:blue;">**Variação absoluta**</mark>: Apresenta a variação absoluta dos dados da série mestre com base nos N rótulos anteriores (N >= 2):

<div align="left"><img src="/files/Bxx77pX87GdSNVdhvl29" alt=""></div>

<mark style="color:blue;">**Média variável**</mark>**:** Apresenta a média variável dos dados da série mestre com base nos N rótulos anteriores (N >= 2).

<div align="left"><img src="/files/YpJJ9cDaS8qYjflapsVj" alt=""></div>

Antes de citarmos as demais opções de séries anexas dos tipos *<mark style="color:blue;">**Linhas de Tendência**</mark>*, vale ressaltarmos que estas linhas possuem em sua configuração a possibilidade de <mark style="color:blue;">**habilitar recuos ou avanços automáticos**</mark> para os rótulos com valores que possuem séries com anexos.

Isto faz com que, caso a opção *<mark style="color:blue;">**GERAL >> Estimar Rótulos**</mark>* esteja acionada, o gráfico incluirá automaticamente rótulos com informações prévias (recuo) aos rótulos vindos do metadado, ou novos rótulos com período futuro (avanço) com projeção de rótulo que não esteja no metadado, conforme informações de número de recuos ou avanços estejam citados nas configurações desta série:

<div align="left"><img src="/files/QmrByl6SGOl5sUvFM7tp" alt=""></div>

<div align="left"><img src="/files/zdjMl36OcJ1MDv13o59j" alt=""></div>

Sobre as linhas de tendência disponíveis, a seguir são elencadas as descrições dos critérios matemáticos considerados para cada opção técnica disponibilizada:

<mark style="color:blue;">**Linha de tendência linear**</mark>**:** Apresenta uma linha reta baseada na tendência apresentada pelos dados da série mestre. A fórmula que explica esta série é: y(x) = A + B\*x. **A** e **B** são calculados de acordo com os dados da série mestre. O coeficiente de correlação **R2** indica o quanto os dados condizem com esta linha de tendência. Há variáveis disponíveis para apresentar a fórmula e o coeficiente de correlação nos textos do gráfico. É possível indicar um recuo e/ou um avanço para estimar a tendência além dos rótulos disponíveis.

<div align="left"><img src="/files/9E3i4nbjbeNKXUg4xlNl" alt=""></div>

<mark style="color:blue;">**Linha de tendência exponencial**</mark>: Apresenta uma linha exponencial baseada na tendência apresentada pelos dados da série mestre. A fórmula que explica esta série é: y(x) = A \* eB\*x.\
**A** e **B** são calculados de acordo com os dados da série mestre.\
O coeficiente de correlação **R2** indica o quanto os dados condizem com esta linha de tendência. Há variáveis disponíveis para apresentar a fórmula e o coeficiente de correlação nos textos do gráfico. É possível indicar um recuo e/ou um avanço para estimar a tendência além dos rótulos disponíveis.

<div align="left"><img src="/files/X6RfVe7AQpiPeMulqUqy" alt=""></div>

<mark style="color:blue;">**Linha de tendência logarítmica**</mark>: Apresenta uma linha logarítmica baseada na tendência apresentada pelos dados da série mestre. A fórmula que explica esta série é: y(x) = A + B\*ln(x). **A** e **B** são calculados de acordo com os dados da série mestre.\
O coeficiente de correlação **R2** indica o quanto os dados condizem com esta linha de tendência. Há variáveis disponíveis para apresentar a fórmula e o coeficiente de correlação nos textos do gráfico. É possível indicar um avanço para estimar a tendência além dos rótulos disponíveis.<br>

<div align="left"><img src="/files/JW1R7mU8U4BNd8Ac6k7y" alt=""></div>

<mark style="color:blue;">**Linha de tendência quadrática**</mark>**:** Apresenta uma linha quadrática baseada na tendência apresentada pelos dados da série mestre. A fórmula que explica esta série é: y(x) = A + B\*x + C\*x2. **A** e **B** são calculados de acordo com os dados da série mestre.\
O coeficiente de correlação **R2** indica o quanto os dados condizem com esta linha de tendência. Há variáveis disponíveis para apresentar a fórmula e o coeficiente de correlação nos textos do gráfico. É possível indicar um recuo e/ou um avanço para estimar a tendência além dos rótulos disponíveis.

<div align="left"><img src="/files/P6TNxHNNRUC1TNM5Isu1" alt=""></div>

\ <mark style="color:blue;">**Linha de tendência potência**</mark>**:** Apresenta uma linha potência baseada na tendência apresentada pelos dados da série mestre. A fórmula que explica esta série é: y(x) = A + xB.\
**A** e **B** são calculados de acordo com os dados da série mestre.\
O coeficiente de correlação **R2** indica o quanto os dados condizem com esta linha de tendência. Há variáveis disponíveis para apresentar a fórmula e o coeficiente de correlação nos textos do gráfico. É possível indicar um recuo e/ou um avanço para estimar a tendência além dos rótulos disponíveis.

<div align="left"><img src="/files/q52Zwm37sWbruCYgJr9W" alt=""></div>

<mark style="color:blue;">**Total Acumulado Percentual**</mark>**:**  Apresenta o Total Acumulado Percentual com base na fórmula:

{% hint style="info" %} <mark style="color:blue;">**Fórmula:**</mark>

Vn = S / T + Vn-1
{% endhint %}

Onde:&#x20;

S: valor absoluto do ponto na série mestre&#x20;

T: total absoluto da série mestre&#x20;

Vn-1: valor do ponto anterior

<mark style="color:blue;">**Exemplo:**</mark>

Primeiro ponto: V1 = S / T + Vn-1 = 307 / 1000 + 0 = 30,7

Segundo ponto seria:&#x20;

V2 = S / T + Vn-1 = 87 / 1000 + 30,7 = 8,7 + 30,7 = 39,4&#x20;

<div align="left"><img src="/files/4kJMSN2hanMOnUP2Avvh" alt=""></div>

* <mark style="color:blue;">**Peculiaridades Gráfico Bolhas:**</mark>

Diferente de outros gráficos que avaliam apenas a partir de um valor e sua agregação, e divisão entre rótulos e séries, o gráfico de bolhas solicita informar 3 tipos de valores e suas agregações. Primeiramente em valor principal incluiremos N valores a serem medidos, e na sequência, entre 2 eixos X e Y (Eixo X inferior e eixo Y Vertical) outros valores com agregações são utilizados como referência. Por esta razão, os campos inclusos em valores são distribuídos entre os Eixos X e Y, conforme campos e agregações que o registro com valores apresente, e agrupa as categorias de informações de acordo com os campos rótulos indicados para o gráfico em questão.

***Exemplo**:* Média de valores unitários por categorias de materiais, de acordo com contagem de produtos em cada venda e a média dos valores unitários:

<div align="left"><img src="/files/ZEQF9Sywm9eVtrQbvH4V" alt=""></div>

* <mark style="color:blue;">**Peculiaridades Gráfico Dispersão:**</mark>

Gráficos de dispersão solicitam informar 2 tipos de valores e suas agregações entre 2 eixos X e Y (Eixo X inferior e eixo Y Vertical). Estes valores identificam cada ponto individualmente em Rótulos, como podemos ver no texto da dica flutuante do exemplo a seguir. Já as séries identificam uma divisão de grupos destas informações, como uma espécie de agrupamento de informações deste conjunto de pontos.

***Exemplo**:* Distribuição de população com análise de pontos de concentração de indivíduos (rótulo) e gêneros (séries) de acordo com cruzamento de altura e peso, para reconhecimento visual mais rápido de pontos que exijam cuidados por poderem estar fora de um conjunto de valores limite aceitáveis.

<div align="left"><img src="/files/ohmI6uJ2kVKv0JebeACp" alt=""></div>