Die 6 besten Trend-Chart Custom Web Controls für WinCC Unified und WinCC V8 (kostenlos)

Warum sich ein Trend-Chart Custom Web Control lohnt

Eine Zahl sagt dem Bediener, wo der Prozess steht. Ein Trend sagt ihm, wohin er läuft. Heizt der Ofen noch, oder hat er sich eingependelt? Ist der Druck vor oder nach der Ventilbewegung eingebrochen? Genau deshalb landen Trendkurven auf fast jedem Bild unter WinCC Unified, von der einzelnen Tankseite bis zur Videowand in der Leitwarte.

WinCC Unified bringt bereits ein Trend-Control für archivierte und Live-Variablen mit, und für viele Bilder ist das alles, was du brauchst. Ein Trend-Chart Custom Web Control (CWC) verdient sich seinen Platz, wenn du etwas willst, das das Standardobjekt so nicht liefert: drei unabhängige Achsen mit Signal-Seitenleiste, eine Sparkline in einer KPI-Kachel, einen Trend mitten in einem Energie-Dashboard oder Kurven, die der Bediener direkt im Diagramm verschiebt. Ein CWC ist eine kleine Webanwendung – HTML, CSS und JavaScript, verpackt als ZIP –, die WinCC Unified (TIA Portal) und WinCC V8 im Bild ausführen. Es stellt Eigenschaften wie timeRangeSeconds oder yAxisMax bereit, die du mit HMI-Variablen verbindest, und kann Ereignisse wie LimitExceeded an deine HMI-Skripte senden.

Was ein Trend-Chart Custom Web Control downloadwürdig macht

Bevor es losgeht, der Maßstab. Danach haben wir gesucht, grob sortiert danach, wie sehr es uns nervt, wenn es fehlt:

• Eine Zeitachse, der man trauen kann. Echte Zeitstempel, ein einstellbares rollierendes Zeitfenster und eine Skala, die nicht bei jedem neuen Messwert herumspringt.
• Skalierung im Griff. Automatische Skalierung für die Inbetriebnahme, feste Werte für yAxisMin und yAxisMax im Produktivbetrieb und getrennte Achsen, wenn du bar, °C und m³/h mischst.
• Grenzwerte und Ereignisse. Grenzwertlinien und ein Ereignis, wenn ein Wert sie überschreitet, machen aus einer hübschen Linie etwas, auf das der Bediener reagieren kann.
• Eine dokumentierte Schnittstelle. Eigenschaften, die im Produktblatt mit Namen genannt werden, damit du weißt, was du verbindest, bevor du TIA Portal öffnest. Produktblätter, die ihre Eigenschaften nur zählen, sind bei den lobenden Erwähnungen gelandet.
• Der richtige Trend für die Aufgabe. Ein vollwertiger Analyse-Viewer, ein Vergleich zweier Signale, eine Kachel für Übersichtsbilder, ein Dashboard und ein Sollwerteditor: Wir haben einen Champion pro Aufgabe gekürt.

Wie wir ausgewählt haben (und was wir nicht gemacht haben)

Wir haben den HMIx-Katalog im Oktober 2026 nach jedem kostenlosen Custom Web Control durchsucht, bei dem sich alles um eine Linie über der Zeit dreht: Trend-Viewer, Multi-Trend-Diagramme, Sparkline-Kacheln, Dashboards mit Trendbereich und Editoren für Sollwertkurven. Balkendiagramme haben schon ihren eigenen Artikel. Bei jedem Kandidaten haben wir uns die echte Vorschau angesehen (nicht das Katalog-Cover mit dem großen Titel obendrauf) und das Produktblatt gelesen, um zu sehen, welche Eigenschaften, Ereignisse und Methoden es dokumentiert. Downloads waren nur das Zünglein an der Waage.

Controls, deren Produktblätter ihre Eigenschaften nicht nennen oder deren Vorschauen sichtbare Fehler zeigen, sind bei den lobenden Erwähnungen gelandet, auch hübsche. Zwei flogen raus: Eine Galerievorschau ist ein leeres weißes Bild, und bei der anderen fehlt ausgerechnet die Sparkline, nach der das Control benannt ist. Und eine faire Warnung: Wir haben Vorschauen und Dokumentation bewertet; in einer laufenden Runtime haben wir diese Controls nicht betrieben. Sie wurden mit KI erstellt, und jede Produktseite erinnert dich daran, sie vor dem Produktiveinsatz in deinem eigenen Projekt in TIA Portal zu testen.

Die 6 besten Trend-Chart Custom Web Controls im Einzelnen

Jeder Eintrag zeigt die echte Vorschau, was uns gefällt, was du wissen solltest und welche Eigenschaften das Produktblatt nennt, gefolgt vom Vorschaubild aus dem Katalog: Ein Klick darauf öffnet die Produktseite, auf der du das Trend-Chart kostenlos herunterlädst.

01Gesamtsieger

Trend Chart

Dürften wir nur eins behalten, wäre es dieses. „Process Trend Viewer“ steht oben auf einer dunklen Karte, und drei leuchtende Linien – Pressure A in Cyan, Pressure B in Grün und Flow Rate in Lila – laufen über sanft schattierten Flächen vor einer Zeitachse mit echten Zeitstempeln. Eine Legende unten benennt jedes Signal. Es wirkt modern, ohne zu schreien, und ist im Oktober 2026 das meistgeladene reine Trend-Chart im Katalog.

Laut Produktblatt läuft es auf der ECharts-Engine, und seine Schnittstelle ist kurz und bündig: Das Array lines trägt die Reihen mit Farben und Daten, timeRangeSeconds legt das gleitende Zeitfenster fest, autoScaleY oder die festen Werte yAxisMin und yAxisMax bestimmen die Skala, und showLimits blendet eine Sollwertlinie ein. chartTitle, showGrid und backgroundColor erledigen den Rest. Zwei Ereignisse machen es zu mehr als einem hübschen Bild: LimitExceeded feuert, wenn ein Wert seine Schwelle überschreitet, und PointClicked meldet den Punkt, den der Bediener angetippt hat.

Was uns gefällt

• +Mehrere Signale in einem Diagramm, sauber und gut lesbar
• +Grenzwertlinie plus Ereignis LimitExceeded für deine Skripte
• +Kurze, schnell verbundene Schnittstelle

Gut zu wissen

• –In der Vorschau passt sich die Skala an krumme Grenzen an (10,26 bis 49,12): Fixiere yAxisMin und yAxisMax für den Produktivbetrieb
• –Alle Reihen teilen sich eine Achse; kombiniere also nur Signale mit ähnlichen Bereichen

Dynamisierbare Eigenschaften

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

Trend Chart

Kostenlos · WinCC Unified & V8 · CWC (.zip)

↓Ansehen & gratis laden✦Mit KI bearbeiten

02Bester Trend mit mehreren Achsen für die Leitwarte

Real-Time Trend Chart

Das, was in dieser Liste einem vollwertigen Trend-Viewer am nächsten kommt. „Mill Area Configuration“ steht über einer Werkzeugleiste mit Manage Groups, Rename Group, Clear View, Export CSV, Light/Dark und Refresh. Links listet eine Seitenleiste die Gruppensignale, jedes mit seiner Linienstärke einer Achse 1, 2 oder 3 zugeordnet, dazu Anzeigeoptionen und die Zeiteinstellung: Real-Time (Rolling window) über die letzten 5 Minuten. Rechts teilen sich drei Signale in °C, bar und m³/h das Diagramm auf drei unabhängigen Achsen, eines davon als Treppenlinie gezeichnet.

Das Produktblatt zählt 21 verbindbare Eigenschaften. axis1, axis2 und axis3 konfigurieren die Achsen, maxPointsPerLine begrenzt den internen Puffer, timeRangeSeconds legt das rollierende Zeitfenster fest, und autoScaleY oder yAxisMin und yAxisMax regeln die Skalierung. showLimits, showGrid, backgroundColor und chartBackgroundColor vollenden die Optik. LimitExceeded feuert, wenn ein Signal seine Schwelle überschreitet, und die Methode exportToCSV speichert die Daten für die Analyse.

Was uns gefällt

• +Drei unabhängige Achsen für Signale mit unterschiedlichen Einheiten
• +Signalgruppen, rollierendes Zeitfenster und CSV-Export
• +Dunkles und helles Theme direkt aus der Werkzeugleiste

Gut zu wissen

• –Voll bepackt: Gönn ihm einen großen Bildschirm. In der Vorschau brechen einige Schaltflächenbeschriftungen um, und „+ Select“ quillt aus seiner Schaltfläche
• –Ein Signal in der Vorschau heißt „Prueba 1“ (Spanisch für „Test 1“): Benenn deine Signale um, bevor der Kunde es sieht

Dynamisierbare Eigenschaften

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

Real-Time Trend Chart

Kostenlos · WinCC Unified & V8 · CWC (.zip)

↓Ansehen & gratis laden✦Mit KI bearbeiten

03Am besten für den Vergleich zweier Signale

Trend Chart

Manchmal lautet die Frage schlicht: „Folgt B dem Verlauf von A?“ Dieser Zwei-Reihen-Trend beantwortet sie: Series 1 in Blau und Series 2 in Gelb schwingen phasenversetzt auf einer „Value“-Achse von 0 bis 100, mit Zeitstempeln am unteren Rand und gefüllten Flächen, die die Schnittpunkte unübersehbar machen.

Das Produktblatt listet 13 Eigenschaften und nennt zwölf davon. curveData1 und curveData2 tragen die beiden Datenströme, labelCurve1, labelCurve2, colorCurve1 und colorCurve2 geben ihnen Namen und Farbe, und lineThickness, showGrid und backgroundColor bestimmen die Optik. Skaliert wird entweder automatisch mit autoScale oder fest mit yAxisMin und yAxisMax. Das Ereignis PointSelected feuert beim Klick auf einen Punkt, und zwei praktische Methoden runden es ab: clearChart für einen frischen Zyklus und exportAsImage, um die aktuelle Ansicht als PNG zu speichern.

Was uns gefällt

• +Wie gemacht für Soll gegen Ist oder Eingang gegen Ausgang
• +PNG-Export eingebaut
• +Namen und Farben beider Kurven verbindbar

Gut zu wissen

• –Die Vorschau setzt an jeden Messwert eine Markierung, was dichte Daten in eine Perlenkette verwandelt: Prüf, wie es bei deiner Abtastrate aussieht
• –Die überlappenden Füllungen mischen sich zu Braun und Petrol; die Beschriftungen lauten „Series 1“ und „Series 2“, bis du sie änderst

Dynamisierbare Eigenschaften

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

Trend Chart

Kostenlos · WinCC Unified & V8 · CWC (.zip)

↓Ansehen & gratis laden✦Mit KI bearbeiten

04Am besten für Energie-Dashboards (meistgeladen)

Power Monitor Dashboard

Für sich genommen kein Trend-Chart, aber erst der Trend macht dieses Dashboard aus. Unter „Analyzer Monitor, 3-Phase Power Analysis“ zeigen sechs Bogenanzeigen Spannung und Strom auf L1, L2 und L3, eine Spalte rechts enthält Wirk-, Blind- und Scheinleistung mit ihren Balken, die Anzeige für den Leistungsfaktor steht auf 0,957 und die Frequenz auf 50,01 Hz. Am unteren Rand zeichnet ein „Active Power Trend“ mit „Live“-Badge die gelbe Leistungskurve gegen eine gestrichelte weiße Grenzwertlinie.

Es ist das meistgeladene Control in diesem Artikel, mit 42 Downloads und drei Fünf-Sterne-Bewertungen im Oktober 2026. Das Produktblatt zählt 34 Eigenschaften und nennt eine Handvoll: voltageMax und currentMax für die Skalen der Anzeigen, Textbeschriftungen wie labelVoltage und labelTrend sowie backgroundColor. Es beschreibt den einstellbaren Zeitbereich des Trends, die automatisch skalierende Y-Achse und Grenzwertlinien, zwei Ereignisse, PowerLimitExceeded und PhaseImbalanceDetected, sowie eine Methode resetTrend.

Was uns gefällt

• +Kompletter Dreiphasen-Überblick mit eingebautem Trend
• +Ereignisse für Leistungsgrenze und Phasenunsymmetrie
• +Der Publikumsliebling, also das von anderen Nutzern am meisten erprobte

Gut zu wissen

• –Die Vorschau gibt den unteren Wert der Trendachse als 21.849999999999998 aus
• –Das Produktblatt nennt nur wenige seiner 34 Eigenschaften, und die Demowerte in der Vorschau sind Platzhalter (die Scheinleistung ist kleiner als die Wirkleistung dargestellt): Prüf die Liste unter Schnittstelle in TIA Portal, bevor du verbindest

Dynamisierbare Eigenschaften

• voltageMax
• currentMax
• labelVoltage
• labelTrend
• backgroundColor

Power Monitor Dashboard

Kostenlos · WinCC Unified & V8 · CWC (.zip)

↓Ansehen & gratis laden✦Mit KI bearbeiten

05Beste Sparkline-Kachel für Übersichtsbilder

KPI Sparkline Tile

Ein Trend muss nicht groß sein, um nützlich zu sein. Auf dieser Kachel steht „DISCHARGE PRESSURE“, darunter 43,6 bar in großer Schrift, ein grünes Badge mit Aufwärtspfeil und 1,2 % und eine cyanfarbene Sparkline, die in einem hellen Punkt auf dem jüngsten Wert endet. Zehn davon auf einem Übersichtsbild, und der Bediener sieht, welche Werte wegdriften, bevor er auch nur einen davon gelesen hat.

Das Produktblatt zählt 8 verbindbare Eigenschaften. trendData füttert die Sparkline, deltaValue steuert das farbige Badge, title und unit beschriften es, und sparklineColor und backgroundColor legen die Palette fest. highThreshold ist der Clou: Darüber wechselt die Kachel in einen Alarmzustand mit pulsierendem rotem Rahmen. KPITileClicked öffnet die Tür zu einem Detailbild, mit triggerAlarmManual testest du die Alarmoptik, und resetTrend löscht den Verlauf.

Was uns gefällt

• +Wert, Änderung und jüngster Verlauf in einer kleinen Kachel
• +Alarmzustand mit pulsierendem Rahmen oberhalb von highThreshold
• +Klick-Ereignis für die Drill-down-Navigation

Gut zu wissen

• –Die veröffentlichte Vorschau ist eine kleine Kachel auf einer großen leeren Fläche (für diesen Artikel haben wir sie zugeschnitten)
• –Der pulsierende Alarmrahmen ist in der Vorschau nicht zu sehen; teste ihn also mit triggerAlarmManual

Dynamisierbare Eigenschaften

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

KPI Sparkline Tile

Kostenlos · WinCC Unified & V8 · CWC (.zip)

↓Ansehen & gratis laden✦Mit KI bearbeiten

06Am besten zum Bearbeiten von Sollwertkurven

Curve Scheduler

Der Exot der Liste, und ein willkommener: ein Trend, den du schreibst statt liest. „Greenhouse Climate Strategy“ zeichnet drei Sollwertkurven – Rot, Blau und Grün – über eine 24-Stunden-Achse, und ein Hinweis sagt alles: „Drag points on graph to adjust time and values. Timeline sorts automatically.“ Punkte im Diagramm ziehen, Zeit und Werte anpassen, die Zeitleiste sortiert sich selbst. Darunter listet eine Tabelle die Punkte (Morning, Day, Evening und Night um 06:00, 12:00, 18:00 und 22:00) mit Schiebereglern für Heizung in °C, Lüftung in % und Bewässerung in L/m², dazu die Schaltflächen Import, Export und Add Point.

Das Produktblatt nennt Farben und Einheiten jeder Größe (heatingColor, ventilationColor, irrigationColor, heatingUnit, ventilationUnit, irrigationUnit), die Skalengrenzen heatingMax und irrigationMax, Beschriftungen wie nameColumnLabel und importBtnLabel sowie backgroundColor. Die wichtigste ist scheduleData: Wenn der Bediener eine Kurve bearbeitet, feuert OnDataChanged, und das aktualisierte JSON geht zurück in die Variable. Das ist also eine der Eigenschaften, bei denen du Nur lesend deaktivieren musst. SetStrategyData, AddPoint und ClearAllPoints stehen für Skripte bereit.

Was uns gefällt

• +Bediener bearbeiten das Profil im Diagramm oder in der Tabelle
• +Schreibt den Zeitplan als JSON zurück, mit Ereignis
• +Passt zu Trocknung, Chargen-Aufheizung und Gewächshauszyklen

Gut zu wissen

• –Die drei Größen teilen sich eine Achse von 0 bis 100; exakte Werte liest du also in der Tabelle ab
• –Die erste und die letzte Zeitbeschriftung sind an den Rändern der Vorschau abgeschnitten

Dynamisierbare Eigenschaften

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

Curve Scheduler

Kostenlos · WinCC Unified & V8 · CWC (.zip)

↓Ansehen & gratis laden✦Mit KI bearbeiten

Lobende Erwähnungen: 4 weitere Trend-Charts, die einen Blick wert sind

Gute Controls, die es nicht in die Top Sechs geschafft haben, weil ein Geschwister-Control es geschafft hat, ihre Produktblätter die Eigenschaften nicht nennen oder ihre Vorschauen einen Fehler zeigen, den man vorher prüfen sollte. Ein Klick auf ein Vorschaubild öffnet die Produktseite.

• 

  Process Trend Monitor

  Ein Geschwister des Real-Time Trend Chart mit einklappbarer Seitenleiste, CSV-Export, den Ereignissen PointAdded und ExportTriggered und Unterstützung für dateibasierte historische Daten in lines. In der Vorschau laufen die Linien über den Plotbereich hinaus, und eine Achsenbeschriftung ist auf „38.684...“ abgeschnitten.

  Zum Produkt →
• 

  Trend Viewer with Crosshair

  Ein hochformatiger Viewer mit Live-Uhr, drei Wert-Chips (86,8 °C, 5,58 bar, 73 L/min) und einem lila Trend mit gestrichelter Sollwertlinie. Das Produktblatt beschreibt Fadenkreuz-Inspektion und Zoom-Steuerung, nennt seine 10 Eigenschaften aber nicht.

  Zum Produkt →
• 

  Neon line chart

  Drei Neon-Kurven – Lila, Cyan und ein gestricheltes Orange – auf einer Achse von 0 bis 70 mit Live-Zeitstempeln. Das Produktblatt erwähnt Datenpufferung, einstellbare Zeitbereiche und Grenzwertüberwachung und zählt 9 Eigenschaften, 1 Ereignis und 2 Methoden, ohne sie zu nennen.

  Zum Produkt →
• 

  KPI Card with line chart

  Ein Wert über einem Hintergrundtrend mit maxPoints, decimalPlaces und einem Wechsel von themeColor zu alertColor, wenn ThresholdExceeded feuert. In der Vorschau überlappt die Beschriftung die Linie, und der Trend füllt nur einen Teil der Karte.

  Zum Produkt →

So verwendest du ein Trend-Chart Custom Web Control in WinCC Unified (und WinCC V8)

Die Kurzfassung für alle, die ihr Diagramm schon gewählt haben. Unsere Anleitung zu Custom Web Controls erklärt jeden Schritt mit Schemazeichnungen und Screenshots.

1. 1

   Das ZIP herunterladen

   Öffne die Produktseite, melde dich mit deinem kostenlosen Konto an und lade das Diagramm herunter. Das heruntergeladene ZIP enthält die Dokumentation und darin das Control-Paket namens {GUID}.zip: Genau diese innere Datei brauchst du.

2. 2

   In dein Projekt in TIA Portal kopieren

   Kopiere die Datei {GUID}.zip, weiterhin gepackt, in deinen Projektordner unter UserFiles\CustomControls (leg beide Ordner an, falls sie noch nicht existieren). Nicht entpacken.

3. 3

   Meine Controls aktualisieren und ins Bild ziehen

   Öffne in TIA Portal die Task Card Werkzeuge, klappe die Palette Meine Controls auf und klicke auf Aktualisieren. Das Diagramm erscheint in der Liste: Zieh es ins Bild und gib ihm genug Platz für Achsen und Legende.

4. 4

   Die Eigenschaften verbinden und testen

   Wähle das Control aus und öffne im Inspektorfenster Eigenschaften → Eigenschaften → Schnittstelle. Die meisten dieser Diagramme nehmen ihre Reihen als Array oder JSON-String entgegen (lines, curveData1, trendData …). Fang deshalb mit einer internen Variablen an, füge ein EA-Feld oder ein kleines Testskript hinzu, das ein paar Werte schreibt, und starte Runtime. Wenn sich die Linien wie erwartet bewegen, wechselst du auf die echten SPS-Variablen.

5. 5

   Unter WinCC V8

   Jeder Favorit in diesem Artikel ist auf seiner Produktseite als kompatibel mit WinCC V8 gekennzeichnet. Das Paket ist dasselbe; für Import und Projektierung von Custom Web Controls in dieser Umgebung folgst du der Dokumentation von WinCC V8.

Profi-Tipp: Diese Diagramme führen ihren eigenen Verlauf in einem Puffer (timeRangeSeconds, maxPointsPerLine, maxPoints …). Sie zeigen also, was seit dem Öffnen des Bilds passiert ist, nicht, was in deinem Archiv steht. Braucht der Bediener vergangene Schichten, füll die Daten per Skript aus deiner Archivierung, oder nutz die Diagramme für Live-Ansichten neben dem Standard-Trend-Control. Und fixiere die Skala auf den echten Bereich deines Prozesses: Eine Achse, die sich bei jedem Messwert neu skaliert, macht langsames Driften unsichtbar.

Häufige Fragen

Unser Fazit

Wenn du nur eins herunterlädst, dann das Trend Chart (586): saubere Linien, Grenzwerte mit Ereignis und eine Schnittstelle, die du in Minuten verbunden hast. Für die Leitwarte mit gemischten Einheiten das Real-Time Trend Chart mit seinen drei Achsen; für Soll gegen Ist das Trend Chart (681) mit zwei Reihen; für Übersichtsbilder die KPI Sparkline Tile; für Energie das Power Monitor Dashboard; und wenn der Bediener das Profil selbst zeichnen muss, den Curve Scheduler.

Und falls dein Prozess einen Trend braucht, den keins davon zeichnet (das tut er immer), denk daran: Der Generator, der sie gebaut hat, ist nur einen Klick entfernt.