Medidor circular
Documentación de Circular Gauge
Table of contents
Circular Gauge Extension para Qlik
Descarga e instalación
Qlik Sense Desktop
Para instalar el Circular Gauge Extension en Qlik Sense Desktop, haga lo siguiente:
- Descargue Circular Gauge Extension para Qlik Sense.
- Extraiga el archivo.
- Abra una ventana del Explorador de Windows y navegue hasta el directorio de Qlik Sense Extensions:
..\Users\<UserName>\Documents\Qlik\Sense\Extensions. - Copie la carpeta anychart-4x-circular-gauge al directorio Extensions.
- Reinicie Qlik Sense Desktop.
Qlik Sense Server
Para instalar el Circular Gauge Extension en un servidor Qlik Sense,
- Descargue Circular Gauge Extension para Qlik Sense.
- Abra Qlik Management Console (QMC): https://<QPS server name>/qmc
- Seleccione Extensions en la página de inicio de QMC o desde el menú desplegable Start.
- Haga clic en Import en la barra de acciones.
- En el cuadro de diálogo, seleccione el archivo descargado. Deje el área de contraseña en blanco.
- Haga clic en Open en la ventana del explorador de archivos.
- Haga clic en Import.
Qlik Sense Cloud
Para instalar el Circular Gauge Extension en Qlik Sense Cloud, haga lo siguiente:
- Descargue Circular Gauge Extension para Qlik Sense Cloud.
- Extraiga el archivo.
- Acceda a Management Console:
- añada /console a la dirección de su tenant: https://<your tenant address>/console
- o use el enlace de navegación Administration bajo el perfil de usuario en el hub
- Vaya a la página Extensions y haga clic en Add.
- En el cuadro de diálogo, seleccione el archivo con la Extension en el bundle – por ejemplo, anychart-4x-circular-gauge.zip.
- Haga clic en Add.
- Repita los pasos anteriores para añadir otras Extension.
- En el Management Console, vaya a la sección Content Security Policy y haga clic en Add.
- En el cuadro de diálogo, asigne un nombre a la Content Security Policy – por ejemplo, AnyChart.
- Escriba la dirección del servidor de origen: qlik.anychart.com
- Seleccione las siguientes directivas:
- connect-src
- font-src
- img-src
- script-src
- style-src
- Haga clic en Add.
Resumen
El Circular Gauge Extension de AnyChart para Qlik proporciona una visualización compacta y altamente personalizable para mostrar KPIs en un diseño radial. Ideal para paneles donde la eficiencia del espacio es clave, el indicador puede mostrar uno o múltiples valores utilizando punteros, cada uno de los cuales representa una única medida agregada o una división de dimensiones.
Puede configurar una amplia gama de opciones visuales y de comportamiento para adaptar el gráfico a sus necesidades. Defina un diseño preciso utilizando Axis Settings , incluyendo radius and swipe angle , start angles personalizados y ranges de valores estáticos o dinámicos. Añada Reference Lines y Reference Ranges para resaltar umbrales clave y crear zonas intuitivas dentro del indicador.
El gráfico admite Text and Image Labels , lo que facilita la inclusión de información contextual o de marca directamente dentro del área del indicador. Utilice los ajustes de Presentation para ajustar detalles estructurales como el cap , frame , y el adaptive mode , lo que garantiza que el gráfico siga siendo legible incluso en tamaños más pequeños.
Además, la sección Colors and Legend le permite aplicar una lógica de color personalizada (por dimensión, medida o expresión) y configurar leyendas para mejorar la legibilidad. Combinadas, estas características hacen del Circular Gauge una opción versátil para rastrear métricas individuales o comparar múltiples KPIs de un solo vistazo.
Inicio rápido
Este tutorial rápido explica cómo crear un Circular Gauge básico.
En primer lugar, añada un gráfico vacío a su hoja:
- Vaya a Custom objects > AnyChart en el panel de activos.
- Arrastre un gráfico AnyChart Circular Gauge vacío a la hoja.
Luego añada una medida para representar el valor del KPI:
- Vaya a Measures en el panel de propiedades.
- Haga clic en Add Measure y seleccione una dimensión.
(Opcional) Añada una dimensión para dividir la medida en múltiples punteros:
- Vaya a Dimensions en el panel de propiedades.
- Haga clic en Add Dimension y seleccione una dimensión.
Tenga en cuenta que también puede crear dimensiones y medidas a partir de campos o añadirlas haciendo clic en los botones del gráfico vacío.
Dimensión y Medida
Medida
Para añadir una medida, haga lo siguiente:
- Vaya a Measures en el panel de propiedades.
- Haga clic en Add measure y seleccione una medida.
El Circular Gauge puede mostrar una sola medida sin dimensiones. En este caso, el gráfico muestra un único puntero que representa el valor agregado total. Sin embargo, cuando se añade una dimensión, la medida se desglosa por valores de dimensión; cada valor se muestra entonces como un puntero independiente en el indicador.
Dimensión
Para añadir una dimensión, haga lo siguiente:
- Vaya a Dimensions en el panel de propiedades.
- Haga clic en Add dimension y seleccione una dimensión.
Añadir una dimensión divide la medida por sus valores distintivos. Cada valor de dimensión está representado por un puntero separado en el indicador, lo que le permite comparar la misma métrica (por ejemplo, Profit) en múltiples categorías (por ejemplo, Sales Channels). Esto convierte al indicador en una visualización comparativa manteniendo una vista compacta de una sola métrica.
Axis Settings
El panel de Axis settings le permite controlar cómo se comporta y aparece el eje del indicador, incluyendo su tamaño, sweep angle, scale range y posición inicial.
Radius and Swipe Angle
- Axis radius – Controla el tamaño general del arco del indicador en relación con el área del gráfico. El valor se establece como un porcentaje.
- Axis swipe angle – Define qué tan ancho es el arco del indicador (por ejemplo, un círculo completo es 360°, un semicírculo es 180°, etc.). Puede usar esto para ajustar el indicador en diseños estrechos o paneles compactos.
Start Angle
Por defecto, el indicador comienza desde el axis swipe angle (modo Auto), pero habilitar Custom le permite especificar un ángulo preciso (en grados) para donde comienza el arco.
Range
El eje range determina los valores mínimos y máximos mostrados en el indicador. En modo Auto, el gráfico calcula esto basándose en los valores de la medida. Cambiar a Custom le permite definir:
- Mode – Elija entre Min, Max o Min/Max
- Min / Max – Ingrese valores estáticos o expresiones de Qlik para establecer límites dinámicos
Esto es útil para normalizar indicadores en múltiples gráficos o resaltar umbrales específicos.
Styling
La subsección Styling incluye interruptores para mostrar y personalizar:
- Major ticks
- Minor ticks
- Axis line
- Labels
Cada interruptor se puede expandir para acceder a ajustes de apariencia más detallados, como color, fuente, tamaño y visibilidad.
Reference Lines and Ranges
Reference lines and ranges le permiten resaltar umbrales clave o segmentos importantes en el indicador. Estos marcadores visuales admiten valores estáticos o expresiones dinámicas y pueden ser completamente estilizados y etiquetados.
Todas las opciones de configuración se pueden encontrar bajo el Properties Panel → Add-ons .
Reference Lines
Una Reference Line aparece como un trazo fino a través de la escala del indicador, marcando un valor específico (a menudo utilizado para indicar un umbral o Target) y con el estilo de etiqueta aplicado, puede ofrecer pistas contextuales claras como “Target” o “Warning”, ubicadas con precisión a lo largo del arco (como se ilustra a continuación).
Para añadir una Reference Line, vaya a Add-ons → Reference line y haga clic en el botón Add .
Esto creará una nueva Reference Line con múltiples ajustes para configurar su apariencia, posición y etiqueta.
Los ajustes principales incluyen:
- Label
- Value
- Color
- Single Color
- By expression
- Style
- Solid
- Dashed
- Dotted
- Thickness
- Position
- Inside
- Outside
- Height
Además, al activar la casilla Show label se revelan más opciones de configuración para la etiqueta de la Reference Line:
- Label position
- Align
- Start
- Center
- End
- Direction
- Horizontal
- Radial
- Arc
- Font settings toggle
- Font Style
- Font Color
- Auto font size toggle
- Font size
- Font Family
Para eliminar una Reference Line, presione el botón Delete en la parte inferior del bloque de ajustes de esa Reference Line.
Reference Ranges
El Reference Range aparece como un segmento de arco coloreado a lo largo de la escala del indicador. Resalta visualmente un rango de valores y, cuando se configura con una etiqueta, añade contexto adicional como umbrales o zonas de destino. Por ejemplo, un arco amarillo etiquetado como “Reference Range Label” que abarca del 40 al 90% crea una zona de énfasis intuitiva en el indicador (como se muestra a continuación).
Para añadir un Reference Range – vaya a Add-ons → Reference Range y haga clic en el botón Add .
Esto creará un nuevo Reference Range con múltiples campos de ajuste para configurar la apariencia, posición y etiquetado del rango.
Los ajustes principales incluyen:
- Label
- Start value
- End value
- Color
- Single color
- By expression
- Stroke thickness up/down
- Stroke thickness left/right
- Stroke color
- Opacity
- Start height
- End height
- Offset
- Position
- Inside
- Outside
Al igual que con Reference Lines, puede activar la casilla Show label para configurar la etiqueta de este rango con las siguientes opciones:
- Label position
- Align
- Start
- Center
- End
- Direction
- Horizontal
- Radial
- Arc
- Font settings toggle
- Font Style
- Font Color
- Auto font size toggle
- Font size
- Font Family
Para eliminar un Reference Range, presione el botón Delete en la parte inferior de su bloque de ajustes.
Labels
Labels son elementos independientes que se pueden colocar en cualquier lugar del indicador. Son útiles para mostrar contenido estático adicional, como leyendas, KPIs, marcadores decorativos o logotipos. A diferencia de Reference Lines and Ranges, las etiquetas no están vinculadas a valores o escalas específicos: flotan libremente dentro del espacio del indicador.
Cada etiqueta se puede configurar en uno de dos tipos: Text o Image. Dependiendo del tipo seleccionado, hay diferentes opciones de configuración disponibles.
Text Type
Cuando se selecciona el tipo Text, están disponibles los siguientes ajustes:
- Label
- Text
- Number formatting
- Font style
- Font color
- Auto font size toggle
- Font size
- Font family
- Use container bounds
- Vertical position
- Horizontal position
- Display above
Image Type
Cuando se selecciona el tipo Image, están disponibles los siguientes ajustes:
- Label
- URL
- Size
- Use container bounds
- Vertical position
- Horizontal position
- Display above
Presentation
La sección Presentation define cómo se estructura visualmente el gráfico y cómo se representan sus elementos dentro del espacio disponible. Contiene ajustes para cap, frame, animaciones y adaptive mode.
Estos ajustes se pueden encontrar bajo el Properties Panel → Appearance → Presentation .
Styling
La sección Styling permite la personalización del título, subtítulo, nota al pie y color de fondo del gráfico.
Por defecto, las opciones de Styling están en modo Auto. Cambie a Custom para acceder a los siguientes ajustes:
- Title
- Subtitle
- Footnote
- Background color
Cambie los interruptores de Auto a Custom para mostrar los ajustes avanzados de cada uno.
Cap
El Cap es la forma circular que se muestra en la base del puntero. Para habilitarlo, active el interruptor Show cap . Una vez habilitado, las siguientes opciones de personalización pasan a estar disponibles:
- Fill
- Outline
El tamaño del cap se calcula automáticamente según las dimensiones del gráfico.
Frame
El Frame es un contorno decorativo que envuelve todo el gráfico. Para habilitarlo, active el interruptor Show frame . Una vez habilitado, aparecen los siguientes ajustes:
- Frame color
- Frame thickness
- Frame shape
- Basic
- Smooth
- Circle
Adaptive mode
Adaptive mode permite que el Circular Gauge funcione como un indicador compacto, minimizando los elementos visuales para mostrar solo las partes más esenciales del gráfico. Esto es útil cuando se inserta el gráfico en un espacio limitado o se utiliza como un widget de KPI minimalista.
Para habilitar el adaptive mode, vaya a Presentation → Adaptive mode y marque la casilla. Cuando está activo, el gráfico ajusta automáticamente su diseño para adaptarse al espacio disponible, preservando la visibilidad de los componentes críticos.
Si el adaptive mode está desactivado, aparece una entrada de Font size . Este ajuste actúa como un multiplicador para los tamaños de etiqueta predeterminados, lo que le permite ajustar manualmente el escalado de la fuente y mantener una apariencia consistente en diferentes tamaños de gráfico.
Colors and Legend
Esta sección le permite controlar la lógica de color y la visibilidad de la leyenda de los elementos del gráfico Circular Gauge .
Colors
Por defecto, los ajustes de color se aplican automáticamente. Para personalizar el color, cambie la opción Colors a Custom .
Una vez habilitado, las siguientes opciones pasan a estar disponibles:
- Coloring – Define la lógica de color:
- Single color
- By dimension
- By measure
- By expression
- Library colors – Cuando se activa (On), utiliza la paleta predeterminada de la aplicación. Cuando se desactiva, ofrece las siguientes opciones:
- Color scheme
- Sequential Gradient
- Sequential Classes
- Diverging Gradient
- Diverging Classes
- Reverse colors
- Fill opacity
Legend
La Legend ayuda a identificar los elementos del gráfico mostrando las etiquetas y los colores asociados. Puede habilitarla utilizando el interruptor Legend en la sección Colors and Legend .
La leyenda está disponible solo si ha añadido la Dimension .
Una vez habilitada, las siguientes opciones pasan a estar disponibles:
- Legend position
- Auto
- Right
- Bottom
- Left
- Top
- Show legend title
- Text
- Items – Cambie de Auto a Custom para configurar manualmente los elementos de la leyenda. La configuración manual de elementos permite un control total sobre las etiquetas y los colores.
Si el interruptor Legend está desactivado, todas las opciones de configuración relacionadas se ocultarán.