Los 6 mejores gráficos de tendencia Custom Web Control para WinCC Unified y WinCC V8 (gratis)

Por qué merece la pena un gráfico de tendencia Custom Web Control

Un número le dice al operador dónde está el proceso. Una tendencia le dice hacia dónde va. ¿El horno sigue calentando o ya se ha estabilizado? ¿La presión cayó antes o después de que se moviera la válvula? Por eso los gráficos de tendencia acaban en casi todas las pantallas de WinCC Unified, desde la página de un depósito hasta el videowall de la sala de control.

WinCC Unified ya trae un control de curvas para variables en vivo y archivadas, y en muchas pantallas es todo lo que necesitas. Un gráfico de tendencia Custom Web Control (CWC) se gana su sitio cuando quieres algo que el objeto estándar no te da tal cual: tres ejes independientes con una barra lateral de señales, un sparkline dentro de una tarjeta KPI, una tendencia integrada en un dashboard de energía o curvas que el operador puede arrastrar. Un CWC 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 propiedades como timeRangeSeconds o yAxisMax que enlazas a variables HMI, y puede disparar eventos, como LimitExceeded, hacia tus scripts HMI.

Qué hace que un gráfico de tendencia 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:

• Un eje de tiempo fiable. Marcas de tiempo reales, una ventana deslizante que puedas fijar y una escala que no baile con cada muestra nueva.
• Escalado bajo control. Escala automática para la puesta en marcha, yAxisMin y yAxisMax fijos para producción y ejes separados cuando mezclas bar, °C y m³/h.
• Límites y eventos. Las líneas de límite y un evento cuando un valor las cruza convierten una línea bonita en algo con lo que el operador puede 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.
• La tendencia adecuada para cada trabajo. Un visor de análisis completo, una comparación de dos señales, una tarjeta para pantallas generales, un dashboard y un editor de consignas: elegimos un campeón por trabajo.

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 construidos alrededor de una línea en el tiempo: visores de tendencias, gráficos multitendencia, tarjetas con sparkline, dashboards con un panel de tendencia y editores de curvas de consigna. Los gráficos de barras ya tienen su propio artículo. 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.

Los controles cuya ficha no nombra sus propiedades, o cuya vista previa muestra fallos visibles, pasaron a las menciones de honor, aunque sean vistosos. Descartamos dos: la vista previa de la galería de uno es una imagen en blanco, y en el otro no aparece el sparkline que le da nombre. 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 6 mejores gráficos de tendencia 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 de tendencia gratis.

01El mejor en general

Trend Chart

Si solo pudiéramos quedarnos con uno, sería este. «Process Trend Viewer» encabeza una tarjeta oscura, y tres líneas luminosas, Pressure A en cian, Pressure B en verde y Flow Rate en morado, recorren unas áreas suavemente sombreadas sobre un eje de tiempo con horas reales. Una leyenda abajo nombra cada señal. Se ve moderno sin gritar, y en octubre de 2026 es el gráfico de tendencia puro más descargado del catálogo.

Según su ficha funciona con el motor ECharts, y su interfaz es corta y al grano: el array lines lleva las series con sus colores y datos, timeRangeSeconds fija la ventana deslizante, autoScaleY o los fijos yAxisMin y yAxisMax deciden la escala y showLimits dibuja una línea de consigna superpuesta. chartTitle, showGrid y backgroundColor hacen el resto. Dos eventos lo hacen útil más allá de mirarlo: LimitExceeded salta cuando un valor cruza su umbral y PointClicked informa del punto que ha tocado el operador.

Lo que nos gusta

• +Varias señales en un solo gráfico, con un estilo limpio y legible
• +Línea de límite más un evento LimitExceeded para tus scripts
• +Interfaz corta y rápida de enlazar

A tener en cuenta

• –En la vista previa la escala automática termina en valores raros (de 10,26 a 49,12): fija yAxisMin y yAxisMax para producción
• –Todas las series comparten un eje, así que mezcla solo señales de rangos parecidos

Propiedades enlazables

• lines
• autoScaleY
• yAxisMin
• yAxisMax
• showLimits
• timeRangeSeconds
• chartTitle
• showGrid
• backgroundColor

Trend Chart

Gratis · WinCC Unified y V8 · CWC (.zip)

↓Ver y descargar gratis✦Editarlo con IA

02La mejor tendencia multieje para salas de control

Real-Time Trend Chart

Lo más parecido a un visor de tendencias completo de esta lista. «Mill Area Configuration» encabeza una barra de herramientas con Manage Groups, Rename Group, Clear View, Export CSV, Light/Dark y Refresh. A la izquierda, una barra lateral lista las señales del grupo, cada una asignada al eje 1, 2 o 3 con su grosor de línea, más opciones de visualización y la configuración de tiempo: Real-Time (Rolling window) durante los últimos 5 minutos. A la derecha, tres señales en °C, bar y m³/h comparten gráfico sobre tres ejes independientes, una de ellas dibujada como línea escalonada.

Su ficha cuenta 21 propiedades enlazables. axis1, axis2 y axis3 configuran los ejes, maxPointsPerLine limita el búfer interno, timeRangeSeconds fija la ventana deslizante y autoScaleY o yAxisMin y yAxisMax se ocupan de la escala. showLimits, showGrid, backgroundColor y chartBackgroundColor rematan el aspecto. LimitExceeded salta cuando una señal cruza su umbral, y el método exportToCSV guarda los datos para analizarlos.

Lo que nos gusta

• +Tres ejes independientes para señales con unidades distintas
• +Grupos de señales, ventana deslizante y exportación a CSV
• +Temas oscuro y claro desde la barra de herramientas

A tener en cuenta

• –Es denso: dale una pantalla grande. En la vista previa algunos botones parten su texto en dos líneas y «+ Select» se sale de su botón
• –Una señal de la vista previa se llama «Prueba 1»: renombra tus señales antes de que lo vea el cliente

Propiedades enlazables

• axis1
• axis2
• axis3
• maxPointsPerLine
• autoScaleY
• yAxisMin
• yAxisMax
• timeRangeSeconds
• showLimits
• showGrid
• backgroundColor
• chartBackgroundColor

Real-Time Trend Chart

Gratis · WinCC Unified y V8 · CWC (.zip)

↓Ver y descargar gratis✦Editarlo con IA

03El mejor para comparar dos señales

Trend Chart

A veces la pregunta es simplemente «¿B sigue a A?». Esta tendencia de dos series la responde: Series 1 en azul y Series 2 en amarillo oscilan desfasadas sobre un eje «Value» de 0 a 100, con las horas abajo y unas áreas rellenas que dejan muy claros los cruces.

Su ficha cuenta 13 propiedades y nombra doce. curveData1 y curveData2 llevan los dos flujos de datos, labelCurve1, labelCurve2, colorCurve1 y colorCurve2 les dan nombre y color, y lineThickness, showGrid y backgroundColor ajustan el aspecto. La escala es automática con autoScale o fija con yAxisMin y yAxisMax. El evento PointSelected salta al hacer clic en un punto, y dos métodos prácticos lo completan: clearChart para empezar un ciclo nuevo y exportAsImage para guardar la vista actual como PNG.

Lo que nos gusta

• +Pensado para consigna frente a valor real o entrada frente a salida
• +Exportación a PNG incluida
• +Nombres y colores de las dos curvas enlazables

A tener en cuenta

• –La vista previa dibuja un marcador en cada muestra y los datos densos parecen un collar de cuentas: compruébalo con tu frecuencia de muestreo
• –Los rellenos superpuestos se mezclan en marrón y verde azulado, y las etiquetas dicen «Series 1» y «Series 2» hasta que las cambies

Propiedades enlazables

• curveData1
• curveData2
• labelCurve1
• labelCurve2
• colorCurve1
• colorCurve2
• lineThickness
• autoScale
• yAxisMin
• yAxisMax
• showGrid
• backgroundColor

Trend Chart

Gratis · WinCC Unified y V8 · CWC (.zip)

↓Ver y descargar gratis✦Editarlo con IA

04El mejor para dashboards de energía (el más descargado)

Power Monitor Dashboard

No es un gráfico de tendencia a secas, pero la tendencia es lo que hace grande a este dashboard. Bajo «Analyzer Monitor, 3-Phase Power Analysis», seis indicadores en arco muestran tensión y corriente en L1, L2 y L3, una columna a la derecha recoge potencia activa, reactiva y aparente con sus barras, un indicador de factor de potencia marca 0,957 y la frecuencia, 50,01 Hz. Abajo, una «Active Power Trend» con la etiqueta «Live» dibuja la línea amarilla de potencia frente a una línea de límite blanca discontinua.

Es el control más descargado de este artículo, con 42 descargas y tres reseñas de cinco estrellas en octubre de 2026. Su ficha cuenta 34 propiedades y nombra unas pocas: voltageMax y currentMax para las escalas de los indicadores, etiquetas de texto como labelVoltage y labelTrend, y backgroundColor. Describe para la tendencia un rango de tiempo configurable, eje Y con escala automática y líneas de límite, dos eventos, PowerLimitExceeded y PhaseImbalanceDetected, y un método resetTrend.

Lo que nos gusta

• +Una vista trifásica completa con la tendencia incluida
• +Eventos de límite de potencia y de desequilibrio de fases
• +El favorito del público, así que el más probado por otros usuarios

A tener en cuenta

• –La vista previa escribe el valor inferior del eje de la tendencia como 21.849999999999998
• –Su ficha solo nombra unas pocas de sus 34 propiedades, y los valores de demostración de la vista previa son de relleno (la potencia aparente sale menor que la activa): revisa la lista Interfaz en TIA Portal antes de enlazar

Propiedades enlazables

• voltageMax
• currentMax
• labelVoltage
• labelTrend
• backgroundColor

Power Monitor Dashboard

Gratis · WinCC Unified y V8 · CWC (.zip)

↓Ver y descargar gratis✦Editarlo con IA

05La mejor tarjeta con sparkline para pantallas generales

KPI Sparkline Tile

Una tendencia no tiene que ser grande para ser útil. Esta tarjeta dice «DISCHARGE PRESSURE», muestra 43,6 bar en letra grande, una insignia verde con una flecha hacia arriba y 1,2 %, y debajo un sparkline cian que termina en un punto brillante sobre el último valor. Pon diez en una pantalla general y el operador verá qué valores se desvían antes de leer ninguno.

Su ficha cuenta 8 propiedades enlazables. trendData alimenta el sparkline, deltaValue controla la insignia de color, title y unit la rotulan, y sparklineColor y backgroundColor fijan la paleta. highThreshold es la lista: por encima de ese valor, la tarjeta pasa a un estado de alarma con un borde rojo que late. KPITileClicked abre la puerta a una pantalla de detalle, triggerAlarmManual te deja probar el aspecto de alarma y resetTrend borra el histórico.

Lo que nos gusta

• +Valor, variación e historia reciente en una tarjeta pequeña
• +Estado de alarma con borde pulsante por encima de highThreshold
• +Evento de clic para navegar al detalle

A tener en cuenta

• –La vista previa publicada es una tarjeta pequeña en un lienzo enorme y vacío (la hemos recortado para este artículo)
• –El borde de alarma pulsante no aparece en la vista previa: pruébalo con triggerAlarmManual

Propiedades enlazables

• trendData
• deltaValue
• highThreshold
• title
• unit
• sparklineColor
• backgroundColor

KPI Sparkline Tile

Gratis · WinCC Unified y V8 · CWC (.zip)

↓Ver y descargar gratis✦Editarlo con IA

06El mejor para editar curvas de consigna

Curve Scheduler

El raro de la lista, y bienvenido: una tendencia que se escribe en lugar de leerse. «Greenhouse Climate Strategy» dibuja tres curvas de consigna, roja, azul y verde, a lo largo de un eje de 24 horas, y una pista lo resume todo: «Drag points on graph to adjust time and values. Timeline sorts automatically.» Debajo, una tabla lista los puntos (Morning, Day, Evening y Night a las 06:00, 12:00, 18:00 y 22:00) con deslizadores de calefacción en °C, ventilación en % y riego en L/m², además de los botones Import, Export y Add Point.

Su ficha nombra los colores y unidades de cada variable (heatingColor, ventilationColor, irrigationColor, heatingUnit, ventilationUnit, irrigationUnit), los límites de escala heatingMax e irrigationMax, etiquetas como nameColumnLabel e importBtnLabel, y backgroundColor. La importante es scheduleData: cuando el operador edita una curva, salta OnDataChanged y el JSON actualizado vuelve a la variable, así que es una de las propiedades en las que debes desmarcar Solo lectura (Read only). SetStrategyData, AddPoint y ClearAllPoints están ahí para los scripts.

Lo que nos gusta

• +El operador edita el perfil en el gráfico o en la tabla
• +Devuelve el programa como JSON con un evento
• +Encaja en secado, calentamiento por lotes y ciclos de invernadero

A tener en cuenta

• –Las tres variables comparten un eje de 0 a 100, así que lee los valores exactos en la tabla
• –La primera y la última hora del eje salen cortadas en los bordes de la vista previa

Propiedades enlazables

• scheduleData
• heatingColor
• ventilationColor
• irrigationColor
• heatingUnit
• ventilationUnit
• irrigationUnit
• heatingMax
• irrigationMax
• nameColumnLabel
• importBtnLabel
• backgroundColor

Curve Scheduler

Gratis · WinCC Unified y V8 · CWC (.zip)

↓Ver y descargar gratis✦Editarlo con IA

Menciones de honor: 4 gráficos de tendencia más que merecen un vistazo

Buenos controles que no entraron entre los seis mejores, porque un hermano suyo sí entró, porque su ficha no nombra sus propiedades o porque su vista previa muestra algún fallo que conviene revisar antes. Haz clic en cualquier miniatura para abrir su ficha.

• 

  Process Trend Monitor

  Hermano del Real-Time Trend Chart, con barra lateral plegable, exportación a CSV, eventos PointAdded y ExportTriggered y soporte de datos históricos desde fichero en lines. En la vista previa las líneas se salen del área del gráfico y una etiqueta del eje queda cortada en «38.684...».

  Ver producto →
• 

  Trend Viewer with Crosshair

  Un visor vertical con reloj en vivo, tres chips de valor (86,8 °C, 5,58 bar, 73 L/min) y una tendencia morada con línea de consigna discontinua. Su ficha describe la inspección con cruceta y los controles de zoom, pero no nombra sus 10 propiedades.

  Ver producto →
• 

  Neon line chart

  Tres trazas neón, morada, cian y naranja discontinua, sobre un eje de 0 a 70 con horas en vivo. Su ficha menciona búfer de datos, rangos de tiempo configurables y vigilancia de límites, y cuenta 9 propiedades, 1 evento y 2 métodos sin nombrarlos.

  Ver producto →
• 

  KPI Card with line chart

  Un valor sobre una tendencia de fondo con maxPoints, decimalPlaces y un cambio de themeColor a alertColor cuando salta ThresholdExceeded. En la vista previa la etiqueta se monta sobre la línea y la tendencia solo ocupa parte de la tarjeta.

  Ver producto →

Cómo usar un gráfico de tendencia 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.

1. 1

   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.

2. 2

   Cópialo en tu proyecto de TIA Portal

   Copia el archivo {GUID}.zip, sin descomprimir, en la carpeta de tu proyecto dentro de UserFiles\CustomControls (crea ambas carpetas si no existen). No lo extraigas.

3. 3

   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 ejes y su leyenda.

4. 4

   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 series como array o cadena JSON (lines, curveData1, trendData…), así que empieza con una variable interna, añade un campo E/S o un pequeño script de prueba que escriba unos valores y arranca el Runtime. Cuando las líneas se muevan como esperas, pasa a las variables reales del PLC.

5. 5

   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: estos gráficos guardan su propio histórico en un búfer (timeRangeSeconds, maxPointsPerLine, maxPoints…), así que muestran lo ocurrido desde que se abrió la pantalla, no lo que contiene tu archivo. Si el operador necesita turnos pasados, carga los datos de tu archivado con un script o úsalos para vistas en vivo junto al control de curvas estándar. Y fija la escala al rango real de tu proceso: un eje que se reescala con cada muestra hace invisibles las derivas lentas.

Preguntas frecuentes

Nuestro veredicto

Si solo descargas uno, que sea el Trend Chart (586): líneas limpias, límites con evento y una interfaz que tendrás enlazada en minutos. Para una sala de control con unidades mezcladas, el Real-Time Trend Chart y sus tres ejes; para consigna frente a valor real, el Trend Chart de dos series (681); para pantallas generales, el KPI Sparkline Tile; para energía, el Power Monitor Dashboard; y cuando el operador tiene que dibujar el perfil, el Curve Scheduler.

Y si tu proceso necesita una tendencia que ninguno dibuja (siempre pasa), recuerda que el generador que los creó está a un solo clic.