> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/chart-widget.md).
# Widget de Gráfico
Plote o histórico de um sensor como um widget de Gráfico de linhas ou barras — valor atual, tendência, linha média e bandas de limite.
O widget de Gráfico representa o histórico de uma leitura como um gráfico — uma linha ou barras ao longo da última hora, dia, semana ou mês — para que veja não só onde um valor está agora, mas também a tendência que o levou até lá.
Um único widget de Gráfico combina quatro coisas num só lugar: o **valor atual** como uma leitura grande no topo, o **gráfico histórico** — uma linha ou barras ao longo de um período escolhido — uma **linha média** ao longo desse período, e **bandas de limiar** que assinalam diretamente no gráfico os intervalos de conformidade, aviso e violação. Um operador vê a leitura atual, o percurso que ela fez para chegar lá e o contexto operacional, sem mudar de vista.
As bandas de limiar também colorem o **grande valor atual** no topo — quando o valor em tempo real cai dentro de uma banda, esse número principal assume a cor da banda, enquanto a linha ou as barras mantêm a cor da métrica definida no separador Fonte de dados. Assim, o widget indica o estado antes de alguém estudar o traçado.
Um widget de Gráfico acompanha uma métrica. Para comparar várias leituras, adicione um widget de Gráfico separado para cada uma.
## Linha e Barra são tipos de Gráfico
O seletor do painel contém um **Gráfico** widget. No seu **Aparência** separador, **Tipo de widget** oferece duas apresentações:
* [Gráfico de Linha](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — junta leituras numa tendência contínua.
* [Gráfico de Barras](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — desenha uma barra separada para cada relatório.
partilham a mesma fonte de dados, período, intervalo de valores, limiares, média, eixos, legenda e **Mostrar métricas abaixo** definições. **Exibir valor na barra** pertence apenas a Barra e fica oculto quando Linha é selecionado.
## Configurar um widget de Gráfico
Aqui está uma configuração completa para um caso real — acompanhar a temperatura de uma unidade de refrigeração ao longo da semana, para que veja não só a leitura atual, mas também se manteve a conformidade durante todo o tempo. Um sensor de temperatura na unidade reporta em °C. Este é apenas um exemplo: um Gráfico serve qualquer leitura cujo histórico seja importante — só mudam o dispositivo e os números.
1. Abra o painel em modo de edição e clique em **Gráfico** no seletor de widgets. O painel de definições abre no separador **Fonte de dados** sem fontes de dados ainda.
2. Clique em **Adicionar fonte de dados**. Uma **Fonte de dados 1** aparece.
3. No bloco, clique em **Escolher dispositivo** e selecione o sensor de temperatura da unidade de refrigeração.
4. Clique em **Adicionar métrica**. Aparece uma linha de métrica.
5. Na linha, defina **Tipo de dados** para **Telemetria**, escolha a leitura de temperatura em **Métrica do dispositivo**, e escolha uma **Cor** — esta cor desenha a linha (ou as barras) no gráfico e é também a cor base do grande valor atual no topo.
> **Não consegue encontrar a sua métrica?** O **Métrica do dispositivo** a lista só oferece métricas numéricas. Se faltar uma leitura que esperava, a métrica está armazenada como String ou Boolean em vez de Integer ou Float. Abra **Dispositivos → Métricas**, encontre a métrica e altere a forma como é armazenada para Integer ou Float — desde que o dispositivo realmente reporte um número. Veja [Métricas](/kilo-docs-pt/kilo-iot-server/devices/metric-templates.md).
Um widget de Gráfico acompanha **uma métrica** — depois de essa métrica estar definida, não existe uma segunda linha de métrica para preencher. Para comparar várias leituras, crie um widget de Gráfico separado para cada uma.
6. Clique em **Seguinte** para abrir o **Aparência** separador.
7. Introduza um **Nome do widget** — por exemplo "Temperatura da câmara frigorífica" — e uma descrição opcional **Descrição**.
8. Em **Tipo de widget**, escolha **linha** ou **barra**. O **linha** tipo desenha uma curva contínua, ideal para uma leitura que muda gradualmente, como a temperatura; **barra** desenha uma barra por intervalo, útil quando cada relatório individual é o que pretende comparar. Para este caso, escolha **linha**.
9. Defina o **Período** — o intervalo de histórico coberto pelo gráfico: **Última hora**, **Último dia**, **Última semana**, ou **Último mês**. Para uma revisão semanal de conformidade, escolha **Última semana**.
10. Em **Definir intervalo de valores**, defina **De** e **Até** — o mínimo e o máximo do eixo vertical. Escolha uma janela que contenha confortavelmente todas as temperaturas que a unidade atinge: **De** -5, **Até** 20 (°C). (Um novo widget começa em 0–100; altere-o para se adequar à leitura.)
11. Em **Limiars**, clique em **Adicionar limiar** para cada banda operacional. Os **De** e **Até** valores de um limiar **Etiqueta** e um separador **Cor**são o limite inferior e o limite superior de uma banda colorida nessa mesma escala de -5–20 °C; atribua-lhe uma
* "Conforme" — **De** 2, **Até** 8 — verde
* "Aviso" — **De** 8, **Até** 12 — âmbar
* "Quebra" — **De** 12, **Até** 20 — vermelho
Cada limiar tem dois controlos visuais independentes. **Mostrar preenchimento** pinta a banda como um fundo colorido ao longo de todo o gráfico; **Mostrar linha** desenha uma linha de limite nas extremidades da banda. Ative **Mostrar preenchimento** para a banda Conforme para que a zona segura apareça como uma lavagem verde por trás do traço; ative **Mostrar linha** para a banda de Quebra para que a sua extremidade inferior a 12 °C seja uma linha vermelha forte que a temperatura não deve cruzar.
12. Ative **Mostrar valor médio** para adicionar uma linha tracejada na média do período, rotulada "Média" na legenda.
13. **Mostrar linhas do eixo vertical** e **Mostrar linhas do eixo horizontal** adicionam linhas de grelha do eixo temporal e do eixo de valores — ative-as se uma grelha tornar o gráfico mais legível.
14. Ative **Mostrar legenda dos dados** para listar as etiquetas dos limiares e a média ao lado do gráfico.
15. Ative **Mostrar métricas abaixo** para mostrar o nome da métrica e a leitura atual numa linha por baixo do gráfico. Isto mantém a leitura visível quando o widget é demasiado pequeno para mostrar claramente o valor grande.
16. Se escolheu **barra** no passo 8, **Exibir valor na barra** imprime o valor de cada barra na própria barra, para que um operador possa ler números exatos do gráfico em vez de os estimar em relação ao eixo. A opção aplica-se apenas a gráficos de barras — num gráfico de linha não há barras para etiquetar, por isso não é oferecida.
17. Clique em **Guardar** para colocar o widget no painel.
O resultado: um widget cujo valor grande mostra a temperatura atual e cujo gráfico traça toda a semana por trás dela — as bandas verde, âmbar e vermelha tornam óbvio, num relance, se a carga manteve a conformidade ou se derivou para uma violação. A mesma configuração serve qualquer leitura com um histórico que valha a pena vigiar; só mudam o dispositivo, o intervalo de valores e as bandas.
## Como funciona a cor da leitura atual
O valor grande no topo do widget usa por defeito a cor da métrica definida no separador Fonte de dados. Quando o valor atual cai dentro de um dos seus intervalos de limiar, o visor muda para a cor desse limiar e volta à cor da métrica quando o valor sai de todas as bandas.
Assim, um widget de câmara frigorífica mostra verde enquanto a leitura está na banda Conforme e fica vermelho no instante em que sobe para Quebra — sem configuração separada para a leitura atual. O widget torna a situação visível; para receber um alerta quando isso acontecer, combine-o com um [Alarme](/kilo-docs-pt/kilo-iot-server/alarm.md).
## Limiar vs condições
O widget de Gráfico usa **bandas de limiar** — intervalos coloridos desenhados no gráfico histórico. O sistema completo de condições — regras nomeadas, ordem de prioridade, predefinições por métrica — pertence aos widgets Últimos Dados e Imagem. Veja [Condições](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/conditions.md).
## Exemplos práticos
**Arrefecimento da sala de servidores — uma semana de histórico** Um sensor de temperatura do ar num rack num **linha** gráfico, **Última semana**, intervalo de valores 10–40 °C. Três limiares: verde 18–27 °C "Normal", âmbar 27–32 °C "Quente", vermelho 32–40 °C "Crítico". Um operador que verifica o painel após um fim de semana vê de imediato se o arrefecimento se manteve estável ou disparou para âmbar e vermelho fora do horário.
**Monitorização de vibração — relatórios discretos como barras** Um sensor de vibração de equipamento que comunica amplitude em intervalos regulares, num **barra** gráfico, **Último dia**, intervalo de valores 0–20 mm/s. Três limiares: verde 0–7 mm/s "Normal", âmbar 7–12 mm/s "Elevado", vermelho 12–20 mm/s "Crítico". Cada barra corresponde a um intervalo de relatório, para que um engenheiro possa identificar exatamente quais os intervalos que correram de forma irregular e alinhá-los com o plano de produção. Este é o caso que justifica **Exibir valor na barra** — quando o objetivo do widget é comparar relatórios individuais, ter a amplitude impressa em cada barra poupa ter de ler cada uma no eixo.
**Consumo de energia — linha de base e picos** Um contador de energia numa linha de produção, **linha** gráfico, **Última semana**. Defina o intervalo de valores para abranger a escala do traçado da linha — por exemplo 0–60 kW — e depois adicione uma banda verde ao longo do intervalo de produção esperado (digamos 15–40 kW) e uma banda vermelha acima disso para consumo excessivo. Os valores são específicos do local: defina **De** e **Até** à sua própria linha de base e pico esperado. Qualquer desvio acima do intervalo esperado aparece então imediatamente quando a linha sai da banda verde.
Um Gráfico adequa-se a qualquer leitura cujo histórico tenha significado — pressão, fluxo, humidade, nível de enchimento — portanto trate estes como pontos de partida. Onde quer que a pergunta seja "o que é agora, e como chegou aqui", o widget de Gráfico responde a ambas.
## Ver também
* [Widget de Últimos dados](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — O valor atual por si só, quando não precisa do histórico
* [Gráfico de Linha](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — Configurar e ler uma tendência contínua
* [Gráfico de Barras](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — Comparar relatórios e imprimir valores nas barras
* [Condições](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Regras de cor por métrica para os widgets Últimos Dados e Imagem
* [Adicionar Widgets](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets.md) — Modo de edição e o seletor de widgets
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.kiloiot.io/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/chart-widget.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
