> 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-es/kilo-iot-server/dashboards/adding-widgets/chart-widget.md).
# Widget de gráfico
Traza el historial de un sensor como un widget de gráfico de líneas o barras — valor actual, tendencia, línea de promedio y bandas de umbral.
El widget de gráfico muestra el historial de una lectura como un gráfico — una línea o barras a lo largo de la última hora, día, semana o mes — para que veas no solo dónde se encuentra un valor ahora, sino la tendencia que lo llevó hasta allí.
Un solo widget de gráfico combina cuatro cosas en un mismo lugar: el **valor actual** como una lectura grande en la parte superior, el **gráfico histórico** — una línea o barras durante un período de tiempo elegido — una **línea de promedio** a lo largo de ese período, y unas **bandas de umbral** que marcan directamente en el gráfico los rangos de cumplimiento, advertencia e incumplimiento. Un operador ve la lectura actual, el camino que siguió para llegar allí y el contexto operativo, sin cambiar de vista.
Las bandas de umbral también colorean el **valor actual grande** en la parte superior — cuando el valor en vivo cae dentro de una banda, ese número principal toma el color de la banda, mientras que la línea o barras conservan el color de la métrica configurado en la pestaña Fuente de datos. Así, el widget indica el estado antes de que alguien examine la traza.
Un widget de gráfico rastrea una métrica. Para comparar varias lecturas, agrega un widget de gráfico independiente para cada una.
## Línea y Barra son tipos de gráfico
El selector del panel contiene un **Gráfico** widget. Dentro de su **Apariencia** pestaña, **Tipo de widget** ofrece dos presentaciones:
* [Gráfico de líneas](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — une las lecturas en una tendencia continua.
* [Gráfico de barras](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — dibuja una barra separada para cada reporte.
Comparten la misma fuente de datos, período de tiempo, rango de valores, umbrales, promedio, ejes, leyenda y **Mostrar métricas debajo** configuración. **Mostrar valor en la barra** Pertenece solo a Barra y se oculta cuando se selecciona Línea.
## Configurar un widget de gráfico
Aquí tienes una configuración completa para un caso real — seguir la temperatura de una unidad de refrigeración a lo largo de la semana, para que veas no solo la lectura actual sino si se mantuvo en cumplimiento todo el tiempo. Un sensor de temperatura en la unidad informa en °C. Este es solo un ejemplo: un gráfico sirve para cualquier lectura cuyo historial importe — solo cambian el dispositivo y los números.
1. Abre el panel en modo de edición y haz clic en **Gráfico** en el selector de widgets. El panel de configuración se abre en la **Fuente de datos** pestaña, sin fuentes de datos todavía.
2. Haga clic en **Añadir fuente de datos**. Aparece un **Fuente de datos 1** bloque.
3. En el bloque, haz clic en **Elegir dispositivo** y selecciona el sensor de temperatura de la unidad de refrigeración.
4. Haga clic en **Añadir métrica**. Aparece una fila de métrica.
5. En la fila, establece **Tipo de datos** a **Telemetría**, elige la lectura de temperatura en **Métrica del dispositivo**, y elige un **Color** — este color dibuja la línea (o las barras) en el gráfico y también es el color base de la lectura actual grande en la parte superior.
> **¿No encuentras tu métrica?** El **Métrica del dispositivo** la lista solo ofrece métricas numéricas. Si falta una lectura que esperabas, la métrica está almacenada como String o Boolean en lugar de Integer o Float. Abre **Dispositivos → Métricas**, encuentra la métrica y cambia cómo se almacena a Integer o Float — siempre que el dispositivo realmente informe un número. Consulta [Métricas](/kilo-docs-es/kilo-iot-server/devices/metric-templates.md).
Un widget de gráfico rastrea **una métrica** — una vez que esa métrica está configurada, no hay una segunda fila de métrica que completar. Para comparar varias lecturas, crea un widget de gráfico separado para cada una.
6. Haga clic en **Siguiente** para abrir la **Apariencia** pestaña.
7. Introduce un **Nombre del widget** — por ejemplo, "Temperatura de la cámara frigorífica" — y una **Descripción**.
8. Bajo **Tipo de widget**, elige **línea** o **barra**. El **línea** tipo dibuja una curva continua, ideal para una lectura que cambia gradualmente como la temperatura; **barra** dibuja una barra por intervalo, útil cuando cada reporte individual es lo que quieres comparar. Para este caso, elige **línea**.
9. Establece el **Período de tiempo** — el intervalo de historial que cubre el gráfico: **Última hora**, **Último día**, **Última semana**, o **Último mes**. Para una revisión semanal de cumplimiento, elige **Última semana**.
10. Bajo **Establecer rango de valores**, establece **Desde** y **Hasta** — el mínimo y el máximo del eje vertical. Elige una ventana que contenga cómodamente cada temperatura que alcanza la unidad: **Desde** -5, **Hasta** 20 (°C). (Un widget nuevo comienza en 0–100; cámbialo para que se ajuste a la lectura.)
11. Bajo **Umbrales**, haz clic en **Añadir umbral** para cada banda operativa. Los **Desde** y **Hasta** son los bordes inferior y superior de una banda de color en esa misma escala de -5–20 °C; asígnale un **Etiqueta** y aparece una **Color**. Para la cámara frigorífica, añade tres:
* "Conforme" — **Desde** 2, **Hasta** 8 — verde
* "Advertencia" — **Desde** 8, **Hasta** 12 — ámbar
* "Incumplimiento" — **Desde** 12, **Hasta** 20 — rojo
Cada umbral tiene dos interruptores visuales independientes. **Mostrar relleno** pinta la banda como un fondo coloreado en todo el gráfico; **Mostrar línea** dibuja una línea de límite en los bordes de la banda. Activa **Mostrar relleno** para la banda Conforme para que la zona segura se vea como un velo verde detrás de la traza; activa **Mostrar línea** para la banda de Incumplimiento para que su borde inferior a 12 °C sea una línea roja firme que la temperatura no debe cruzar.
12. Activa **Mostrar valor promedio** para añadir una línea discontinua en el promedio del período, etiquetada "Promedio" en la leyenda.
13. **Mostrar líneas del eje vertical** y **Mostrar líneas del eje horizontal** añade líneas de cuadrícula del eje temporal y del eje de valores — actívalas si una cuadrícula hace que el gráfico sea más fácil de leer.
14. Activa **Mostrar leyenda de datos** para listar las etiquetas de umbral y el promedio junto al gráfico.
15. Activa **Mostrar métricas debajo** para mostrar el nombre de la métrica y la lectura actual en una fila debajo del gráfico. Esto mantiene la lectura visible cuando el widget es demasiado pequeño para mostrar el valor grande con claridad.
16. Si elegiste **barra** en el paso 8, **Mostrar valor en la barra** muestra el valor de cada barra en la propia barra, de modo que un operador pueda leer cifras exactas en el gráfico en lugar de estimarlas con respecto al eje. La opción se aplica solo a gráficos de barras — en un gráfico de líneas no hay barras que etiquetar, así que no se ofrece.
17. Haga clic en **Guardar** para colocar el widget en el panel.
El resultado: un widget cuya lectura grande muestra la temperatura actual y cuyo gráfico traza toda la semana detrás de ella — las bandas verde, ámbar y roja hacen evidente de un vistazo si la carga se mantuvo en cumplimiento o se desvió hacia un incumplimiento. La misma configuración sirve para cualquier lectura con un historial que valga la pena vigilar; solo cambian el dispositivo, el rango de valores y las bandas.
## Cómo funciona el color de la lectura actual
El valor grande en la parte superior del widget usa por defecto el color de la métrica configurado en la pestaña Fuente de datos. Cuando el valor actual cae dentro de uno de tus rangos de umbral, la visualización cambia al color de ese umbral, y vuelve al color de la métrica cuando el valor sale de todas las bandas.
Así, un widget de cámara frigorífica se muestra en verde mientras la lectura se mantiene en la banda Conforme y se vuelve rojo en el instante en que entra en Incumplimiento — sin una configuración aparte para la lectura actual. El widget hace visible la situación; para recibir un aviso cuando ocurra, combínalo con una [Alarma](/kilo-docs-es/kilo-iot-server/alarm.md).
## Umbrales frente a condiciones
El widget de gráfico usa **bandas de umbral** — rangos coloreados dibujados en el gráfico histórico. El sistema completo de condiciones — reglas con nombre, orden de prioridad, valores predeterminados por métrica — pertenece a los widgets Último dato e Imagen. Consulta [Condiciones](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/conditions.md).
## Ejemplos prácticos
**Refrigeración de la sala de servidores — una semana de historial** Un sensor de temperatura del aire del rack en un **línea** gráfico, **Última semana**, rango de valores 10–40 °C. Tres umbrales: verde 18–27 °C "Normal", ámbar 27–32 °C "Cálido", rojo 32–40 °C "Crítico". Un operador que revisa el panel después de un fin de semana ve enseguida si la refrigeración se mantuvo estable o se disparó hacia el ámbar y el rojo fuera del horario laboral.
**Monitoreo de vibración — reportes discretos como barras** Un sensor de vibración de equipos que informa la amplitud a intervalos regulares, en un **barra** gráfico, **Último día**, rango de valores 0–20 mm/s. Tres umbrales: verde 0–7 mm/s "Normal", ámbar 7–12 mm/s "Elevado", rojo 12–20 mm/s "Crítico". Cada barra es un intervalo de reporte, así que un ingeniero puede identificar exactamente qué intervalos funcionaron de forma irregular y alinearlos con el programa de producción. Este es el caso en el que **Mostrar valor en la barra** — cuando el objetivo del widget es comparar reportes individuales, tener la amplitud impresa en cada barra evita tener que leer cada una en el eje.
**Consumo de energía — línea base y picos** Un medidor de potencia en una línea de producción, **línea** gráfico, **Última semana**. Establece el rango de valores para abarcar el consumo de la línea — por ejemplo 0–60 kW — luego añade una banda verde a lo largo del rango de producción esperado (digamos 15–40 kW) y una banda roja por encima para un sobreconsumo. Las cifras dependen del sitio: establece **Desde** y **Hasta** según tu propia línea base y pico esperado. Cualquier desviación por encima del rango esperado se muestra de inmediato cuando la línea sale de la banda verde.
Un gráfico se adapta a cualquier lectura cuyo historial tenga sentido — presión, caudal, humedad, nivel de llenado — así que tómalo como punto de partida. Dondequiera que la pregunta sea "¿qué es ahora y cómo llegó hasta aquí?", el widget de gráfico responde ambas cosas.
## Véase también
* [Widget de Últimos datos](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — El valor actual por sí solo, cuando no necesitas el historial
* [Gráfico de líneas](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — Configurar y leer una tendencia continua
* [Gráfico de barras](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — Comparar reportes y imprimir valores en las barras
* [Condiciones](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Reglas de color por métrica para los widgets Último dato e Imagen
* [Añadir widgets](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets.md) — Modo de edición y el selector 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-es/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.
