Datos clave
- Categoría
- Data Visualization
- Tipos de entrada
- textarea, text, select, number, color, checkbox
- Tipo de salida
- html
- Cobertura de muestras
- 4
- API disponible
- Yes
Resumen
El Generador de Indicador permite crear gráficos de estilo velocímetro altamente personalizables a partir de tus datos, facilitando la visualización clara de KPIs, métricas de rendimiento y objetivos en tiempo real.
Cuándo usarlo
- •Para presentar el progreso de objetivos clave de rendimiento (KPIs) en informes ejecutivos.
- •Cuando necesites visualizar métricas de estado actual frente a un rango mínimo y máximo definido.
- •Para crear paneles de control (dashboards) visuales que requieran una lectura rápida del desempeño.
Cómo funciona
- •Ingresa tus datos en el campo de texto, ya sea como un valor único, una lista o en formato JSON.
- •Ajusta los parámetros de configuración como el rango de valores, los colores de las zonas y el estilo de la aguja.
- •Personaliza la apariencia activando o desactivando elementos como etiquetas, marcas de escala y animaciones.
- •Genera el gráfico y obtén una representación visual precisa de tus métricas.
Casos de uso
Ejemplos
1. Dashboard de Ventas Mensuales
Gerente de Ventas- Contexto
- El gerente necesita presentar el cumplimiento de la cuota de ventas del equipo frente al objetivo mensual de 100,000 unidades.
- Problema
- Los datos en una tabla son difíciles de interpretar rápidamente durante una reunión de equipo.
- Cómo usarlo
- Ingresar el valor actual de ventas y configurar el rango máximo en 100,000 con zonas de color para identificar el cumplimiento.
- Configuración de ejemplo
-
chartData: 'Ventas:85000', minValue: 0, maxValue: 100000, gaugeColors: '#10b981,#f59e0b,#ef4444' - Resultado
- Un gráfico de velocímetro claro que muestra el progreso del 85% con una aguja posicionada en la zona verde.
2. Monitoreo de Carga de Servidor
- Contexto
- Un administrador de sistemas debe vigilar el uso de CPU de un servidor crítico para evitar sobrecargas.
- Problema
- Necesita una alerta visual inmediata si el uso de CPU supera el 90%.
- Cómo usarlo
- Configurar el indicador con un rango de 0 a 100 y ajustar los colores para que el segmento final sea rojo intenso.
- Configuración de ejemplo
-
chartData: 'Uso CPU:92', showTicks: true, needleStyle: 'arrow', gaugeColors: '#10b981,#f59e0b,#ef4444' - Resultado
- Un indicador visual que muestra la aguja en la zona roja, permitiendo una acción correctiva inmediata.
Probar con muestras
json, videoHubs relacionados
Preguntas frecuentes
¿Qué formatos de datos acepta la herramienta?
Puedes ingresar valores simples, una lista de métricas (etiqueta:valor) o un array en formato JSON.
¿Puedo personalizar los colores del indicador?
Sí, puedes definir colores hexadecimales personalizados para las zonas del indicador, típicamente usados para representar rangos verde, amarillo y rojo.
¿Es posible animar la aguja del gráfico?
Sí, la herramienta incluye una opción de 'Aguja Animada' que genera un efecto de movimiento al cargar el gráfico.
¿Puedo mostrar múltiples indicadores a la vez?
Sí, al ingresar múltiples pares de etiquetas y valores en el campo de datos, el generador creará los indicadores correspondientes.
¿Qué significan los ángulos de inicio y fin?
Estos valores definen la apertura del arco del indicador en grados, permitiendo crear desde semicírculos hasta indicadores circulares completos.