Blog · Custom Web Controls
Los 11 mejores gráficos de barras Custom Web Control para WinCC Unified y WinCC V8 (gratis)
En octubre de 2026 abrimos todos los gráficos de barras Custom Web Control del catálogo de HMIx, dieciocho candidatos si contamos las variantes agrupadas, apiladas y en cascada, miramos cada vista previa de cerca, leímos todas las fichas y nos quedamos con los once que pondríamos sin dudar en una pantalla de WinCC Unified o WinCC V8. Todos gratis, todos empaquetados como ZIP de CWC y todos con propiedades nombradas en su ficha, para que sepas qué vas a enlazar.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Gráfico de barras
- Dashboard HMI
- Widgets SCADA

Elección rápida
¿Vas con prisa? Salta directamente al gráfico de barras que necesitas.
- 01El mejor en conjuntoBar Chart with Limits
- 02El mejor para paneles estrechos y verticalesAuto Adjust Bar Chart
- 03El mejor gráfico de barras apiladasStacked Bar Chart
- 04El mejor para comparar históricosHistorical Bar Chart Viewer
- 05El mejor para un objetivo distinto en cada barraBar Chart with individual targets
- 06El mejor bullet chart para real frente a objetivoBullet bar Chart
- 07El mejor para el ritmo de producción en vivoProduction Parts Per Minute Chart
- 08El mejor para analizar defectos y paradasPareto Chart
- 09El mejor para analizar las pérdidas de OEEOEE Waterfall Chart
- 10El mejor para la salud de máquina multivariableSynchronized Bar and Radar Chart
- 11El mejor para showrooms y pantallas de visitantesFuturistic Bar Chart
Por qué merece la pena un gráfico de barras Custom Web Control
Un gráfico de barras es como piensa un jefe de turno. ¿Qué línea ha producido más? ¿Qué zona se pasa de su presupuesto de energía? ¿Qué defecto vuelve una y otra vez? Pon las respuestas una al lado de otra en forma de barras y el operador ve la excepción antes de leer un solo número. Por eso acaban en tantos dashboards de WinCC Unified.
La caja de herramientas estándar te da un objeto Barra para un único valor y controles de curvas para series temporales. Comparar muchas categorías, apilar turnos, dibujar un Pareto o una cascada OEE es donde un gráfico de barras Custom Web Control (CWC) se gana su sitio. Es una pequeña aplicación web, HTML, CSS y JavaScript empaquetados en un ZIP, que WinCC Unified (TIA Portal) y WinCC V8 ejecutan dentro de la pantalla. Expone una interfaz de propiedades como alarmThreshold o yAxisMax que enlazas a variables HMI, y puede disparar eventos, como el clic en una barra, hacia tus scripts HMI.
Qué hace que un gráfico de barras Custom Web Control merezca la descarga
Antes de la lista, la vara de medir. Esto es lo que buscamos, más o menos en el orden en que nos molesta que falte:
- Legible de un vistazo. Ejes claros, escalas sensatas y etiquetas que se leen a un metro. Un gráfico que esconde la mitad de los nombres de sus categorías es un acertijo, no una pantalla.
- Límites y objetivos. Líneas de aviso y alarma, objetivos por barra o cambios de color convierten un gráfico bonito en uno que le dice al operador cuándo actuar.
- Una interfaz documentada. Propiedades nombradas en la ficha, para que sepas qué vas a enlazar antes de abrir TIA Portal. Las fichas que solo cuentan sus propiedades pasaron a las menciones de honor.
- El gráfico adecuado para cada pregunta. Barras apiladas para repartos, agrupadas para el histórico, un Pareto para defectos, una cascada para las pérdidas de OEE: elegimos un campeón por pregunta.
- Un aspecto sereno. Fondos oscuros y planos y colores que puedas suavizar para pantallas de alto rendimiento al estilo ISA-101, reservando los colores fuertes para los límites.
Cómo los elegimos (y qué no hicimos)
En octubre de 2026 buscamos en el catálogo de HMIx todos los Custom Web Control gratuitos con barras como protagonistas: gráficos simples, apilados, agrupados, de tipo bullet, Pareto y cascada. Dejamos fuera las barras de progreso sueltas, las barras de menú y las líneas de tiempo de estado. De cada candidato miramos su vista previa real (no la portada del catálogo con el título enorme encima) y leímos su ficha para ver qué propiedades, eventos y métodos documenta. Las descargas solo sirvieron para desempatar, porque un gráfico publicado el mes pasado no ha tenido tiempo de acumularlas.
Los gráficos cuya ficha no nombra sus propiedades, o cuya vista previa muestra fallos visibles, pasaron a las menciones de honor, aunque sean populares. Descartamos otros dos: la vista previa de uno solo muestra el icono del control y la de otro sale desvaída, con la etiqueta del umbral pegada al eje. Y un aviso honesto: juzgamos vistas previas y documentación; no ejecutamos estos controles en un Runtime real. Se generaron con IA y cada ficha recuerda que hay que probarlos en tu propio proyecto de TIA Portal antes de llevarlos a producción.
Los 11 mejores gráficos de barras Custom Web Control, uno a uno
Cada entrada muestra la vista previa real, lo que nos gustó, lo que conviene saber y las propiedades que nombra su ficha, seguido de la miniatura del catálogo: haz clic en ella para abrir la ficha y descargar el gráfico gratis.
01El mejor en conjunto
Bar Chart with Limits

Si solo pudiéramos quedarnos con uno, sería este. «Power Consumption, By production zone» encabeza cinco barras en una escala de 0 a 100; una línea discontinua ámbar marca «Warning 70» y otra roja «Alarm 90». Las dos zonas que superan el aviso se han vuelto ámbar solas, y una leyenda abajo explica la regla: Normal < 70, Warning ≥ 70, Alarm ≥ 90. Una pequeña insignia kW en la esquina indica la unidad.
Su ficha documenta 13 propiedades y nombra casi todas: warningThreshold y alarmThreshold para los límites, yAxisMax para la escala, title, subtitle y unit para los textos (enlazables, para que la etiqueta siga al proceso), normalColorStart, normalColorEnd, warningColor y alarmColor para la paleta, además de showGrid y backgroundColor. Tooltips, un evento OnBarClicked y los métodos refreshChart y clearData lo completan.
Lo que nos gusta
- Límites de aviso y alarma dibujados y aplicados al color de las barras
- Leyenda que se explica sola al operador
- Interfaz rica y con buenos nombres
A tener en cuenta
- La vista previa publicada se ve desvaída, con la tarjeta gris y etiquetas tenues, y la unidad sobre el eje sale cortada: ajusta
backgroundColory compruébalo en tu proyecto - Una sola serie por gráfico: para varios valores por categoría, mira los gráficos apilado o histórico
Propiedades enlazables
- warningThreshold
- alarmThreshold
- yAxisMax
- title
- subtitle
- unit
- normalColorStart
- normalColorEnd
- warningColor
- alarmColor
- showGrid
- backgroundColor
02El mejor para paneles estrechos y verticales
Auto Adjust Bar Chart

El que encaja donde lo sueltes. Cinco barras en degradado comparan de Tank A a Tank E en una escala de 0 a 100 m³, y en la vista previa Tank B aparece resaltado con un tooltip que dice «Value: 82.1 m³». Ordenado, legible y con la unidad en cada marca del eje.
Su truco, según su ficha, es que detecta su propia relación de aspecto y cambia entre barras verticales y horizontales, así que sirve igual para un monitor ancho de sala de control que para un hueco estrecho en un Unified Comfort Panel. Lo mueven seis propiedades: data, unit, barColorStart, barColorEnd, showGrid y backgroundColor. Al tocar una barra se muestra su tooltip y salta BarClicked; clearSelection lo cierra desde tus scripts.
Lo que nos gusta
- Cambia de orientación para aprovechar el espacio
- Unidad en el eje y en el tooltip
- Solo seis propiedades
A tener en cuenta
- Sin límites ni objetivos: muestra valores y nada más
- La vista previa solo enseña la disposición vertical; prueba la horizontal en tu propia pantalla
Propiedades enlazables
- data
- unit
- barColorStart
- barColorEnd
- showGrid
- backgroundColor
03El mejor gráfico de barras apiladas
Stacked Bar Chart

El informe de turno de toda la vida, bien hecho. Arriba, «STACKED PRODUCTION THROUGHPUT»; una leyenda distingue Shift A (índigo) de Shift B (naranja), y siete líneas de producción apilan ambos turnos en una escala de 0 a 1.500 unidades por hora. Ves el total y quién aportó qué de un solo vistazo.
Los datos viven en el array series, que fija los valores y colores de cada capa apilada, mientras xAxisLabels recibe un array JSON con las categorías. chartTitle, yAxisTitle y backgroundColor hacen el resto. Su ficha nombra además dos métodos muy prácticos: exportAsImage, que descarga la vista actual como PNG para el parte de turno, y refreshChart.
Lo que nos gusta
- Totales y aportaciones en una sola barra
- Exportación a PNG incluida
- Interfaz corta y fácil de enlazar
A tener en cuenta
- Con siete líneas, la vista previa solo rotula una de cada dos (LINE A, C, E, G): dale anchura suficiente
- Su ficha no nombra ningún evento: revisa la lista Interfaz en TIA Portal si necesitas interacción con clics
Propiedades enlazables
- series
- xAxisLabels
- chartTitle
- yAxisTitle
- backgroundColor
04El mejor para comparar históricos
Historical Bar Chart Viewer

Más que un gráfico, una pequeña herramienta de análisis. Una barra lateral contiene el rango de fechas (del 2024-02-10 00:00 al 2024-02-17 23:59 en la vista previa), cinco parámetros con casillas y un botón Apply Changes; a la derecha, ocho días de barras agrupadas comparan temperatura, presión, caudal, humedad y tensión. Los valores más alto y más bajo van escritos en vertical dentro de las barras con unas flechitas, así que los extremos saltan a la vista.
Su ficha describe siete propiedades principales: historicalData, parameters, startDate, endDate, chartTitle, yAxisLabel y backgroundColor. Cuando el operador cambia las fechas salta FilterChanged para que tu script cargue los datos nuevos; ParameterToggled avisa de las series mostradas u ocultas; y refreshChart y setTimeRange permiten que otras pantallas lo manejen.
Lo que nos gusta
- Rango de fechas y selección de series dentro del propio control
- Mínimos y máximos destacados dentro de las barras
- Eventos listos para cargar datos por script
A tener en cuenta
- No lee tus archivos por sí solo: tu script tiene que rellenar
historicalDatacuando saltaFilterChanged - Todas las series comparten eje, así que en la vista previa la tensión, en torno a 220, empequeñece a las otras cuatro: agrupa parámetros de rangos parecidos
Propiedades enlazables
- historicalData
- parameters
- startDate
- endDate
- chartTitle
- yAxisLabel
- backgroundColor
05El mejor para un objetivo distinto en cada barra
Bar Chart with individual targets

Cada línea tiene su propio objetivo, y este gráfico lo respeta. Cinco barras turquesa, de Zone A a Zone E, llevan cada una su línea gris clara de objetivo en una escala de 0 a 120: Zone A se queda corta, Zone B y Zone D superan el suyo y Zone E cae justo encima. No hace falta leyenda; la imagen se explica sola.
Su ficha nombra yAxisMax para la escala, barWidth, positiveColor, showGrid, gridColor y backgroundColor para el aspecto, y tooltipValueLabel y tooltipTargetLabel para que el tooltip hable tu idioma («Real» y «Plan», por ejemplo). Un evento BarClicked abre la puerta a ventanas de diagnóstico, y refreshChart y clearData están ahí para los scripts.
Lo que nos gusta
- Un objetivo por categoría, no una sola línea para todas
- Etiquetas del tooltip renombrables
- Aspecto limpio y tranquilo
A tener en cuenta
- Los números del eje y los nombres de las zonas son diminutos y tenues en la vista previa
- En la vista previa todas las barras mantienen el mismo color, superen o no su objetivo
Propiedades enlazables
- yAxisMax
- barWidth
- positiveColor
- tooltipValueLabel
- tooltipTargetLabel
- showGrid
- gridColor
- backgroundColor
06El mejor bullet chart para real frente a objetivo
Bullet bar Chart

El bullet chart es la respuesta del diseñador de dashboards al gauge: la misma información en una fracción del espacio. Bajo el título «Process Parameters», cuatro barras cian finas muestran los valores reales, una marca blanca brillante señala cada objetivo y unas bandas suaves rojas, ámbar y verdes insinúan los rangos de calidad. Una leyenda Actual/Target cierra la tarjeta.
Su ficha enumera nueve propiedades. El array parameters contiene los datos, title y subtitle los textos, y actualColor, targetColor y backgroundColor la paleta. actualBarWidth y targetMarkerWidth marcan la jerarquía visual entre valor y consigna, y horizontalOffset afina cómo se colocan las marcas sobre las bandas. Un evento OnParameterSelected y un método refreshChart completan la interfaz.
Lo que nos gusta
- Valor, objetivo y rangos de calidad en muy poco espacio
- Leyenda Actual/Target clara
OnParameterSelectedpara ventanas emergentes de detalle
A tener en cuenta
- En la vista previa el gráfico solo ocupa la mitad izquierda de la tarjeta y dos de las cuatro barras no tienen etiqueta
- Las bandas de fondo son muy tenues: compruébalas con el brillo real de tu pantalla
Propiedades enlazables
- parameters
- title
- subtitle
- actualColor
- targetColor
- actualBarWidth
- targetMarkerWidth
- horizontalOffset
- backgroundColor
07El mejor para el ritmo de producción en vivo
Production Parts Per Minute Chart

El único elegido de tema claro, y uno muy práctico. «Parts Count per Minute» muestra una barra azul por minuto, de 17:44 a 17:53 en la vista previa, un selector «Last 10 minutes» en la esquina y un tooltip en la última barra: 60 parts/min. El latido de tu línea en una tarjeta.
Lo alimentas muestra a muestra con productionValue y timestamp, y un búfer circular interno guarda hasta historyLength muestras. maxYAxis fija la escala, y chartTitle, yAxisLabel, barColor y backgroundColor le dan estilo; su ficha cuenta nueve propiedades. El desplegable cambia la ventana de tiempo y dispara TimeframeChanged, SampleAdded y BarClicked informan del resto, y addProductionSample y clearHistory gestionan los datos en un cambio de lote.
Lo que nos gusta
- Construye su propio histórico a partir de una sola variable
- Ventana de tiempo seleccionable por el operador
- Diseño claro y limpio, con colores que puedes cambiar
A tener en cuenta
- La tarjeta clara destaca en un tema HMI oscuro hasta que cambias
backgroundColorybarColor - El histórico vive en el búfer del control: comprueba qué conserva tras un cambio de pantalla antes de usarlo para informes
Propiedades enlazables
- productionValue
- timestamp
- historyLength
- maxYAxis
- chartTitle
- yAxisLabel
- barColor
- backgroundColor
08El mejor para analizar defectos y paradas
Pareto Chart

La regla del 80/20, lista para enlazar. Barras azules cuentan defectos en orden descendente, desde los arañazos («Scratches», 45) hasta «Others», y una línea roja con puntos sube por el porcentaje acumulado en un segundo eje hasta llegar al 100 %. Dos títulos, «Defects» y «Cumulative %», no dejan dudas sobre qué eje es cuál.
Lo mejor es que no tienes que ordenar ni sumar nada: según su ficha, el control ordena los datos y calcula los acumulados él solo. Lo configuran ocho propiedades, entre ellas barColor, lineColor, leftAxisTitle, rightAxisTitle, animationDuration, showGrid y backgroundColor. Un evento OnPointClick permite al operador profundizar en un tipo de defecto, y refresh y exportAsImage sirven para actualizar y para los informes.
Lo que nos gusta
- Ordenación y porcentaje acumulado calculados por ti
- Doble eje con títulos claros
- Exportación a imagen para las reuniones de calidad
A tener en cuenta
- Las etiquetas gris claro sobre fondo blanco se leen mal; sube su contraste o pasa a un
backgroundColoroscuro - La vista previa solo rotula tres de las cinco categorías
Propiedades enlazables
- barColor
- lineColor
- leftAxisTitle
- rightAxisTitle
- animationDuration
- showGrid
- backgroundColor
09El mejor para analizar las pérdidas de OEE
OEE Waterfall Chart

El dashboard más completo de la lista. «LINE-01 • PRIMARY PACKAGING» y «OEE Waterfall Analysis» encabezan la tarjeta, una insignia muestra Net OEE 79.9 % frente a un objetivo del 80.0 %, y la cascada recorre del 100 % de tiempo planificado a las pérdidas por paradas (−11,5 %), por velocidad (−7,1 %) y por defectos (−1,5 %) hasta el 79,9 % final. Debajo, tres tarjetas muestran disponibilidad 88,5 %, rendimiento 92,0 % y calidad 98,2 %, cada una con su fórmula.
Su ficha nombra targetOee para la referencia, equipmentTag y panelTitle para la cabecera, propiedades de texto como availabilityLabel y performanceFormula para las tarjetas, y backgroundColor. TargetThresholdCrossed salta cuando el OEE cruza el objetivo, FactorCardClicked abre el análisis en detalle y setFactors actualiza los tres factores de una vez, para que la imagen nunca muestre datos a medio actualizar. Es el elegido más reciente, publicado en septiembre de 2026.
Lo que nos gusta
- Muestra adónde se va la eficiencia, no solo el número final
- Tarjetas de factores con su fórmula, ideales para la reunión de turno
setFactorslo actualiza todo a la vez
A tener en cuenta
- Formato ancho: necesita un hueco grande para seguir siendo legible
- En la vista previa la barra de tiempo planificado apenas se distingue del fondo
Propiedades enlazables
- targetOee
- equipmentTag
- panelTitle
- availabilityLabel
- performanceFormula
- backgroundColor
10El mejor para la salud de máquina multivariable
Synchronized Bar and Radar Chart

Dos vistas de los mismos cinco números. A la izquierda, «Process Metrics» muestra temperatura, presión, vibración, caudal y carga como barras de cian a azul en una escala de 0 a 100, cada una con su carril oscuro detrás. A la derecha, «System Footprint» dibuja las mismas métricas como una forma de radar verde. Las barras dan la comparación exacta; el radar le da a la máquina una huella que aprendes a reconocer.
Su ficha nombra alarmThreshold, que pone en rojo barras y puntos del radar cuando los valores superan el límite, barColorStart y barColorEnd para el degradado, barChartTitle y radarChartTitle, showTooltips y backgroundColor. Todas las métricas se gestionan desde un único array estructurado. Para scripts tienes un evento OnMetricSelected y un método refreshCharts.
Lo que nos gusta
- Valores exactos y forma global lado a lado
- Un solo umbral de alarma colorea los dos gráficos
- Encaja de forma natural en pantallas de estado de motores y bombas
A tener en cuenta
- La vista previa deja mucho espacio vacío encima y debajo de ambos gráficos
- Las etiquetas de los ejes del radar son pequeñas: compruébalas en un panel
Propiedades enlazables
- alarmThreshold
- barChartTitle
- radarChartTitle
- barColorStart
- barColorEnd
- showTooltips
- backgroundColor
11El mejor para showrooms y pantallas de visitantes
Futuristic Bar Chart

No todas las pantallas son para la sala de control. «SYSTEM LOAD MONITOR» brilla en cian neón sobre una rejilla tenue, y tres barras anchas, Zone Alpha, Beta y Gamma, pasan de cian a rosa en una escala de 0 a 100 %. Es el gráfico para la pantalla grande del pasillo de visitas o para la demo de la feria.
Sus seis propiedades son sencillas: el array bars para los datos, maxValue para la escala, title, showGrid, showScanlines para un efecto CRT opcional y backgroundColor. Un evento BarClicked y un método refreshChart cubren la interacción.
Lo que nos gusta
- Aspecto llamativo que queda genial en fotos
- Solo seis propiedades
- Líneas de barrido y rejilla opcionales
A tener en cuenta
- Pensado para tres barras: no es el indicado para listas largas de categorías
- El estilo neón es lo contrario de una pantalla serena ISA-101; mantenlo lejos de la vista principal del operador
Propiedades enlazables
- bars
- maxValue
- title
- showGrid
- showScanlines
- backgroundColor
Menciones de honor: 5 gráficos de barras más que merecen un vistazo
Buenos controles que no entraron entre los once mejores, porque su ficha no nombra sus propiedades o su vista previa muestra algún fallo que conviene revisar antes. Haz clic en cualquier miniatura para abrir su ficha.

Modern Bar Chart
El gráfico de barras más descargado del catálogo en octubre de 2026: doce barras mensuales con etiquetas de valor y degradado de índigo a turquesa. Su vista previa está en español («Rendimiento Operativo», de ENE a DIC), las barras se salen por debajo de la tarjeta y su ficha cuenta diez propiedades, dos eventos y dos métodos sin nombrarlos.
Ver producto
Grouped Bars Charts
Un primo cercano del Historical Bar Chart Viewer con botones rápidos 7 Days, 30 Days y All, tarjetas de parámetros con unidades y valores dentro de las barras. Trece propiedades; elígelo si prefieres rangos rápidos a escribir fechas.
Ver producto
Grouped Bar Chart
Barras agrupadas con una barra lateral de parámetros con buscador, botones Select All y Clear All y rango de fechas. Diez propiedades según su ficha; la vista previa es escueta, con tres grupos de barras finas.
Ver producto
Bar Chart with limit
Barras con degradado neón que se vuelven rojas por encima de
Ver productoalarmThreshold, con brillo opcional y 16 propiedades. En la vista previa no se ve ninguna línea de umbral, aunque su ficha incluyeshowThresholdLine: merece la pena comprobarlo.
Monthly Energy Bar Chart
Calcula el consumo mensual a partir de los totalizadores acumulados del PLC y colorea las barras que superan
Ver productoconsumptionSetpoint. Gran idea; la vista previa tiene etiquetas muy tenues sobre blanco y un valor superior del eje impreso como 1,650.0000000000002.
¿No encuentras tu gráfico de barras? Créalo (o modifica uno) con IA, gratis
Una confesión: todos los gráficos de barras de este artículo se crearon con el generador IA de HMIx. Por eso podemos decirlo sin ponernos colorados: si ninguno responde exactamente a la pregunta que se hace tu planta, puedes generar el tuyo en minutos.
Describe el gráfico con palabras normales (por ejemplo, «gráfico de barras horizontal de energía por departamento en kWh, paleta gris ISA-101, una línea de objetivo por barra y la barra en ámbar si supera su objetivo») y el generador te guía paso a paso: el diseño, las propiedades, eventos y métodos que usarás en WinCC, una simulación para probar valores y el paquete Custom Web Control final para WinCC Unified y WinCC V8. La misma herramienta crea también SVG dinámicos cuando te basta con un dibujo ligero.
- Modifica cualquier gráfico de esta lista: en su ficha, el botón «Editar en el generador IA» lo abre directamente en el generador, listo para que pidas cambios como «usa un fondo oscuro», «muestra el valor encima de cada barra» o «añade una línea de objetivo». Los enlaces «Editarlo con IA» de este artículo hacen lo mismo.
- Gratis para probar: puedes empezar sin cuenta, con una pequeña asignación diaria de créditos, y el plan Community es gratuito.
- El resultado es tuyo: descarga el paquete y añádelo a tu proyecto de TIA Portal como cualquier otro gráfico de esta página.
Cómo usar un gráfico de barras Custom Web Control en WinCC Unified (y WinCC V8)
La versión corta, para cuando ya has elegido tu gráfico. Nuestra guía de Custom Web Controls cubre cada paso con esquemas y capturas.
Descarga el ZIP
Abre la ficha, inicia sesión con tu cuenta gratuita y descarga el gráfico. El ZIP descargado contiene la documentación y, dentro, el paquete del control llamado
{GUID}.zip: ese archivo interior es el que necesitas.Cópialo en tu proyecto de TIA Portal
Copia el archivo
{GUID}.zip, sin descomprimir, en la carpeta de tu proyecto dentro deUserFiles\CustomControls(crea ambas carpetas si no existen). No lo extraigas.Actualiza Controles propios y arrástralo
En TIA Portal, abre la task card Herramientas, despliega la paleta Controles propios (My controls) y pulsa Actualizar. El gráfico aparece en la lista: arrástralo a tu pantalla y dale sitio suficiente para sus etiquetas.
Enlaza y prueba las propiedades
Selecciona el control y abre ventana de inspección → Propiedades → Propiedades → Interfaz. La mayoría de estos gráficos reciben sus datos como array o cadena JSON (
data,series,bars…), así que empieza enlazándolo a una variable interna de tipo cadena, añade un campo E/S o un script de prueba que escriba unos valores y arranca el Runtime. Cuando las barras se porten bien, pasa a los datos reales del PLC.En WinCC V8
Todos los elegidos de este artículo están etiquetados como compatibles con WinCC V8 en su ficha. El paquete es el mismo; sigue la documentación de WinCC V8 para importar y configurar Custom Web Controls en ese entorno.
Consejo de experto: un gráfico solo muestra datos, así que deja activada la opción Solo lectura (Read only) al enlazar sus propiedades. Desactívala únicamente en una propiedad que el propio control tenga que escribir en una variable, como recuerdan las fichas. Y fija la escala (yAxisMax, maxValue, maxYAxis…) al rango real de tu proceso: una escala que salta con cada actualización hace imposible comparar barras.
Preguntas frecuentes
¿De verdad son gratis estos gráficos de barras Custom Web Control?
Sí. Todos los gráficos de barras de este artículo están publicados como productos gratuitos en HMIx. Solo necesitas una cuenta gratuita para descargarlos.
¿WinCC Unified trae un gráfico de barras de serie?
WinCC Unified incluye un objeto Barra para un único valor y controles de curvas para valores en el tiempo. Para comparar categorías, apilar series, hacer un análisis de Pareto o una cascada OEE, un gráfico de barras Custom Web Control como los de este artículo es la forma práctica de tenerlo en pantalla.
¿Funcionan en los Unified Comfort Panels de WinCC y en WinCC V8?
Sus fichas indican compatibilidad con WinCC Unified, incluidos los Unified Comfort Panels, y con WinCC V8. Como con cualquier control generado con IA, prueba su comportamiento en tu propio proyecto y en tu dispositivo de destino antes de pasar a producción.
¿Cómo envío varios valores de variables del PLC a un gráfico de barras?
La mayoría de estos gráficos reciben sus datos en una propiedad de tipo array o cadena JSON, como data, series o bars. Construye esa cadena a partir de tus variables en un script o enlázala a una variable de tipo cadena, y comprueba el formato exacto en la documentación incluida en la descarga. La excepción es el Production Parts Per Minute Chart: recibe un valor cada vez y construye su propio histórico.
¿Dónde copio el ZIP en mi proyecto de TIA Portal?
Copia el archivo interior {GUID}.zip, sin descomprimirlo, en UserFiles\CustomControls de la carpeta de tu proyecto. Después pulsa Actualizar en Controles propios, dentro de la task card Herramientas, y arrastra el control a tu pantalla.
¿Puedo modificar uno de estos gráficos de barras?
Por supuesto. Puedes editar tú mismo el HTML, el CSS y el JavaScript del control, o pulsar «Editar en el generador IA» en la ficha y pedir los cambios con palabras normales. La segunda opción suele ser más rápida, porque el generador se encarga de la interfaz y del empaquetado.
Nuestro veredicto
Si solo descargas uno, que sea el Bar Chart with Limits: líneas de aviso y alarma que colorean las barras solas y una leyenda que el operador entiende. Para un objetivo por categoría, el Bar Chart with individual targets o el compacto Bullet bar Chart; para turnos, el Stacked Bar Chart; para históricos, el Historical Bar Chart Viewer; para la producción en vivo, el Production Parts Per Minute Chart; para calidad, el Pareto Chart; para eficiencia, el OEE Waterfall Chart. La salud de máquina es para el Synchronized Bar and Radar Chart, los paneles estrechos para el Auto Adjust Bar Chart y la pantalla de visitantes para el Futuristic Bar Chart.
Y si tu planta se hace una pregunta que ninguno responde (siempre pasa), recuerda que el generador que los creó está a un solo clic.