Die 11 besten Balkendiagramm-Custom-Web-Controls für WinCC Unified und WinCC V8 (kostenlos)

Warum sich ein Balkendiagramm-Custom-Web-Control lohnt

Ein Balkendiagramm denkt so wie ein Schichtleiter. Welche Linie hat am meisten produziert? Welche Zone liegt über ihrem Energiebudget? Welcher Fehler taucht immer wieder auf? Stell die Antworten als Balken nebeneinander, und der Bediener sieht den Ausreißer, bevor er eine einzige Zahl gelesen hat. Genau deshalb landen Balkendiagramme auf so vielen Dashboards unter WinCC Unified.

Der Standard-Werkzeugkasten bietet ein Balkenobjekt für einen einzelnen Wert und Trend-Controls für Zeitreihen. Viele Kategorien vergleichen, Schichten stapeln, ein Pareto oder einen OEE-Wasserfall zeichnen: Da verdient sich ein Balkendiagramm-Custom-Web-Control (CWC) seinen Platz. Es 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 eine Schnittstelle mit Eigenschaften wie alarmThreshold oder yAxisMax bereit, die du mit HMI-Variablen verbindest, und kann Ereignisse an deine HMI-Skripte senden, etwa wenn ein Balken angeklickt wird.

Was ein Balkendiagramm-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:

• Auf einen Blick lesbar. Klare Achsen, sinnvolle Skalen und Beschriftungen, die man aus einem Meter Abstand lesen kann. Ein Diagramm, das die Hälfte seiner Kategorienamen versteckt, ist ein Rätsel, keine Anzeige.
• Grenzwerte und Sollwerte. Warn- und Alarmlinien, Sollwerte pro Balken oder Farbwechsel machen aus einem hübschen Diagramm eines, das dem Bediener sagt, wann er handeln muss.
• 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.
• Das richtige Diagramm für die Aufgabe. Gestapelte Balken für Anteile, gruppierte Balken für Verläufe, ein Pareto für Fehler, ein Wasserfall für OEE-Verluste: Wir haben einen Champion pro Fragestellung gekürt.
• Ruhige Optik. Dunkle, flache Hintergründe und Farben, die du für High-Performance-Bilder im Geist von ISA-101 zurücknehmen kannst, mit kräftigen Farben nur für Grenzwerte.

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 Balken im Mittelpunkt stehen: einfache, gestapelte, gruppierte, Bullet-, Pareto- und Wasserfalldiagramme. Einzelne Fortschrittsbalken, Menüleisten und Status-Zeitleisten blieben außen vor. 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, denn ein Diagramm, das letzten Monat erschienen ist, hatte schlicht noch keine Zeit, welche zu sammeln.

Diagramme, deren Produktblätter ihre Eigenschaften nicht nennen oder deren Vorschauen sichtbare Fehler zeigen, sind bei den lobenden Erwähnungen gelandet, auch beliebte. Zwei weitere flogen raus: Eine Vorschau zeigt nur das Icon des Controls, eine andere ist verwaschen und ihre Grenzwertbeschriftung klebt an der Achse. 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 11 besten Balkendiagramm-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 Diagramm kostenlos herunterlädst.

01Gesamtsieger

Bar Chart with Limits

Dürften wir nur eins behalten, wäre es dieses. „Power Consumption, by production zone“ steht über fünf Balken auf einer Skala von 0 bis 100, eine gestrichelte gelbe Linie markiert „Warning 70“ und eine gestrichelte rote „Alarm 90“. Die beiden Zonen über der Warnlinie sind von selbst gelb geworden, und eine Legende unten buchstabiert die Regel aus: Normal < 70, Warning ≥ 70, Alarm ≥ 90. Ein kleines kW-Badge in der Ecke nennt die Einheit.

Das Produktblatt dokumentiert 13 Eigenschaften und nennt fast alle mit Namen: warningThreshold und alarmThreshold für die Grenzwerte, yAxisMax für die Skala, title, subtitle und unit für die Texte (verbindbar, damit die Beschriftung dem Prozess folgen kann), normalColorStart, normalColorEnd, warningColor und alarmColor für die Palette, dazu showGrid und backgroundColor. Tooltips, ein Ereignis OnBarClicked und die Methoden refreshChart und clearData runden es ab.

Was uns gefällt

• +Warn- und Alarmgrenzen werden gezeichnet und auf die Balkenfarben angewendet
• +Selbsterklärende Legende für den Bediener
• +Umfangreiche, sauber benannte Schnittstelle

Gut zu wissen

• –Die veröffentlichte Vorschau wirkt verwaschen, mit grauer Karte und blassen Beschriftungen, und die Einheit über der Achse ist abgeschnitten: Setz backgroundColor und prüf es in deinem Projekt
• –Eine Reihe pro Diagramm: Für mehrere Werte pro Kategorie schau dir die gestapelten oder historischen Diagramme an

Dynamisierbare Eigenschaften

• warningThreshold
• alarmThreshold
• yAxisMax
• title
• subtitle
• unit
• normalColorStart
• normalColorEnd
• warningColor
• alarmColor
• showGrid
• backgroundColor

Bar Chart with Limits

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

02Am besten für schmale Panels und Hochformat

Auto Adjust Bar Chart

Das Diagramm, das überall hineinpasst, wo du es fallen lässt. Fünf Verlaufsbalken vergleichen Tank A bis Tank E auf einer Skala von 0 bis 100 m³, und in der Vorschau ist Tank B mit einem Tooltip „Value: 82.1 m³“ hervorgehoben. Ordentlich, gut lesbar und mit der Einheit an jedem Achsenteilstrich.

Sein Trick laut Produktblatt: Es erkennt sein eigenes Seitenverhältnis und wechselt zwischen senkrechten und waagerechten Balken, deshalb passt es auf einen breiten Leitwartenmonitor genauso wie in eine schmale Lücke auf einem Unified Comfort Panel. Sechs Eigenschaften steuern es: data, unit, barColorStart, barColorEnd, showGrid und backgroundColor. Ein Tippen auf einen Balken zeigt seinen Tooltip und löst BarClicked aus; clearSelection schließt ihn aus deinen Skripten.

Was uns gefällt

• +Wechselt die Ausrichtung passend zum Platz
• +Einheit an der Achse und im Tooltip
• +Nur sechs Eigenschaften

Gut zu wissen

• –Keine Grenz- oder Sollwerte: Es zeigt Werte, sonst nichts
• –Die Vorschau zeigt nur das senkrechte Layout; probier das waagerechte in deinem eigenen Bild aus

Dynamisierbare Eigenschaften

• data
• unit
• barColorStart
• barColorEnd
• showGrid
• backgroundColor

Auto Adjust Bar Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

03Bestes gestapeltes Balkendiagramm

Stacked Bar Chart

Der klassische Schichtbericht, ordentlich gemacht. Oben steht „STACKED PRODUCTION THROUGHPUT“, eine Legende unterscheidet Shift A (Indigo) von Shift B (Orange), und sieben Produktionslinien stapeln beide Schichten auf einer Skala von 0 bis 1.500 Einheiten pro Stunde. Summe und Anteil jeder Schicht siehst du mit einem einzigen Blick.

Die Daten stecken im Array series, das Werte und Farben jeder gestapelten Ebene festlegt, während xAxisLabels ein JSON-Array für die Kategorien aufnimmt. chartTitle, yAxisTitle und backgroundColor erledigen den Rest. Das Produktblatt nennt außerdem zwei praktische Methoden: exportAsImage, das die aktuelle Ansicht als PNG für den Schichtbericht herunterlädt, und refreshChart.

Was uns gefällt

• +Summe und Anteile in einem Balken
• +PNG-Export eingebaut
• +Kurze, leicht zu verbindende Schnittstelle

Gut zu wissen

• –Bei sieben Linien beschriftet die Vorschau nur jede zweite (LINE A, C, E, G): Gib ihm genug Breite
• –Das Produktblatt nennt kein Ereignis; prüf also die Liste unter Schnittstelle in TIA Portal, falls du Klick-Interaktion brauchst

Dynamisierbare Eigenschaften

• series
• xAxisLabels
• chartTitle
• yAxisTitle
• backgroundColor

Stacked Bar Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

04Am besten für historische Vergleiche

Historical Bar Chart Viewer

Eher ein kleines Analysewerkzeug als ein Diagramm. Eine Seitenleiste enthält den Zeitraum (in der Vorschau von 2024-02-10 00:00 bis 2024-02-17 23:59), fünf Parameter mit Kontrollkästchen und eine Schaltfläche Apply Changes; rechts vergleichen acht Tage gruppierter Balken Temperatur, Druck, Durchfluss, Feuchte und Spannung. Höchst- und Tiefstwerte stehen senkrecht in den Balken, mit kleinen Pfeilen, damit die Extreme sofort ins Auge springen.

Das Produktblatt beschreibt sieben Kerneigenschaften: historicalData, parameters, startDate, endDate, chartTitle, yAxisLabel und backgroundColor. Ändert der Bediener die Daten, feuert FilterChanged, damit dein Skript neue Daten holen kann; ParameterToggled meldet ein- oder ausgeblendete Reihen; und mit refreshChart und setTimeRange können andere Bilder es steuern.

Was uns gefällt

• +Zeitraum und Reihenauswahl direkt im Control
• +Min- und Max-Werte in den Balken hervorgehoben
• +Ereignisse bereit für das Nachladen von Daten per Skript

Gut zu wissen

• –Es liest deine Archive nicht von selbst: Dein Skript muss historicalData füllen, wenn FilterChanged feuert
• –Alle Reihen teilen sich eine Achse, deshalb drückt in der Vorschau die Spannung mit rund 220 die anderen vier platt: Gruppiere Parameter mit ähnlichen Bereichen

Dynamisierbare Eigenschaften

• historicalData
• parameters
• startDate
• endDate
• chartTitle
• yAxisLabel
• backgroundColor

Historical Bar Chart Viewer

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

05Am besten für einen eigenen Sollwert pro Balken

Bar Chart with individual targets

Jede Linie hat ihr eigenes Ziel, und dieses Diagramm nimmt das ernst. Fünf petrolfarbene Balken, Zone A bis Zone E, tragen jeweils ihre eigene hellgraue Sollwertlinie auf einer Skala von 0 bis 120: Zone A bleibt darunter, Zone B und Zone D übertreffen ihr Soll, und Zone E landet genau darauf. Keine Legende nötig; das Bild erklärt sich selbst.

Das Produktblatt nennt yAxisMax für die Skala, barWidth, positiveColor, showGrid, gridColor und backgroundColor für die Optik sowie tooltipValueLabel und tooltipTargetLabel, damit der Tooltip deine Sprache spricht (zum Beispiel „Ist“ und „Plan“). Ein Ereignis BarClicked öffnet die Tür zu Diagnose-Pop-ups, und refreshChart und clearData stehen für Skripte bereit.

Was uns gefällt

• +Ein Sollwert pro Kategorie statt einer Linie für alle
• +Tooltip-Beschriftungen frei benennbar
• +Saubere, ruhige Optik

Gut zu wissen

• –Achsenzahlen und Zonennamen sind in der Vorschau winzig und blass
• –In der Vorschau behält jeder Balken dieselbe Farbe, egal ob er sein Soll erreicht oder nicht

Dynamisierbare Eigenschaften

• yAxisMax
• barWidth
• positiveColor
• tooltipValueLabel
• tooltipTargetLabel
• showGrid
• gridColor
• backgroundColor

Bar Chart with individual targets

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

06Am besten für Ist gegen Soll

Bullet bar Chart

Das Bullet Chart ist die Antwort der Dashboard-Designer auf das Gauge: dieselbe Information auf einem Bruchteil der Fläche. Unter dem Titel „Process Parameters“ zeigen vier schlanke cyanfarbene Balken die Istwerte, eine helle weiße Marke den jeweiligen Sollwert, und blasse rote, gelbe und grüne Bänder dahinter deuten die Qualitätsbereiche an. Eine Actual/Target-Legende schließt die Karte ab.

Das Produktblatt listet neun Eigenschaften. Das Array parameters enthält die Datenpunkte, title und subtitle die Texte, und actualColor, targetColor und backgroundColor die Palette. actualBarWidth und targetMarkerWidth legen die visuelle Hierarchie zwischen Wert und Sollwert fest, und horizontalOffset justiert, wie die Marken über den Bändern sitzen. Ein Ereignis OnParameterSelected und eine Methode refreshChart runden die Schnittstelle ab.

Was uns gefällt

• +Wert, Sollwert und Qualitätsbereiche auf sehr wenig Platz
• +Klare Actual/Target-Legende
• +OnParameterSelected für Drill-down-Pop-ups

Gut zu wissen

• –In der Vorschau füllt das Diagramm nur die linke Hälfte der Karte, und zwei der vier Balken haben keine Beschriftung
• –Die Hintergrundbänder sind sehr blass: Prüf sie bei der echten Helligkeit deines Bildschirms

Dynamisierbare Eigenschaften

• parameters
• title
• subtitle
• actualColor
• targetColor
• actualBarWidth
• targetMarkerWidth
• horizontalOffset
• backgroundColor

Bullet bar Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

07Am besten für die Live-Produktionsrate

Production Parts Per Minute Chart

Der einzige Favorit im hellen Design, und ein sehr praktischer. „Parts Count per Minute“ zeigt einen blauen Balken pro Minute, in der Vorschau von 17:44 bis 17:53, eine Auswahl „Last 10 minutes“ in der Ecke und einen Tooltip am jüngsten Balken: „60 parts/min“. Der Herzschlag deiner Linie, auf einer Karte.

Du fütterst es Wert für Wert über productionValue und timestamp, und ein interner Ringpuffer hält bis zu historyLength Werte. maxYAxis fixiert die Skala, und chartTitle, yAxisLabel, barColor und backgroundColor gestalten es; das Produktblatt zählt neun Eigenschaften. Das Dropdown ändert das Zeitfenster und löst TimeframeChanged aus, SampleAdded und BarClicked melden den Rest, und addProductionSample und clearHistory verwalten die Daten beim Chargenwechsel.

Was uns gefällt

• +Baut aus einer einzigen Variable seinen eigenen rollierenden Verlauf auf
• +Zeitfenster vom Bediener wählbar
• +Sauberes helles Design mit änderbaren Farben

Gut zu wissen

• –Die helle Karte sticht auf einem dunklen HMI-Theme heraus, bis du backgroundColor und barColor änderst
• –Der Verlauf lebt im Puffer des Controls: Prüf, was nach einem Bildwechsel davon übrig bleibt, bevor du ihn für Berichte nutzt

Dynamisierbare Eigenschaften

• productionValue
• timestamp
• historyLength
• maxYAxis
• chartTitle
• yAxisLabel
• barColor
• backgroundColor

Production Parts Per Minute Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

08Am besten für Fehler- und Stillstandsanalysen

Pareto Chart

Die 80/20-Regel, fertig zum Verbinden. Blaue Balken zählen Fehler in absteigender Reihenfolge, von Kratzern mit 45 bis hinunter zu „Others“, und eine rote Linie mit Punkten klettert auf einer zweiten Achse den kumulierten Prozentsatz hinauf, bis sie 100 % erreicht. Zwei Titel, „Defects“ und „Cumulative %“, lassen keinen Zweifel, welche Achse welche ist.

Das Schöne: Du musst nichts sortieren oder aufsummieren. Laut Produktblatt sortiert das Control die Daten und berechnet die kumulierten Summen selbst. Acht Eigenschaften formen es, darunter barColor, lineColor, leftAxisTitle, rightAxisTitle, animationDuration, showGrid und backgroundColor. Mit einem Ereignis OnPointClick kann der Bediener in eine Fehlerart hineinzoomen, und refresh und exportAsImage stehen für Aktualisierungen und Berichte bereit.

Was uns gefällt

• +Sortierung und kumulierter Prozentsatz werden für dich berechnet
• +Zwei Achsen mit klaren Titeln
• +Bildexport für Qualitätsbesprechungen

Gut zu wissen

• –Die hellgrauen Beschriftungen auf weißem Hintergrund sind blass; erhöh ihren Kontrast oder wechsle auf einen dunklen backgroundColor
• –Die Vorschau beschriftet nur drei der fünf Kategorien

Dynamisierbare Eigenschaften

• barColor
• lineColor
• leftAxisTitle
• rightAxisTitle
• animationDuration
• showGrid
• backgroundColor

Pareto Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

09Am besten für die OEE-Verlustanalyse

OEE Waterfall Chart

Das vollständigste Dashboard der Liste. „LINE-01 • PRIMARY PACKAGING“ und „OEE Waterfall Analysis“ stehen über der Karte, ein Badge zeigt eine Net OEE von 79,9 % bei einem Ziel von 80,0 %, und der Wasserfall geht von 100 % geplanter Zeit über Stillstandsverlust (−11,5 %), Geschwindigkeitsverlust (−7,1 %) und Qualitätsverlust (−1,5 %) bis zu den finalen 79,9 %. Darunter zeigen drei Karten Verfügbarkeit 88,5 %, Leistung 92,0 % und Qualität 98,2 %, jeweils mit ihrer Formel.

Das Produktblatt nennt targetOee als Vergleichswert, equipmentTag und panelTitle für die Kopfzeile, Texteigenschaften wie availabilityLabel und performanceFormula für die Karten sowie backgroundColor. TargetThresholdCrossed feuert, wenn die OEE über das Ziel hinweg driftet, FactorCardClicked öffnet eine Detailanalyse, und setFactors aktualisiert alle drei Faktoren auf einen Schlag, damit das Bild nie halb aktualisierte Daten zeigt. Es ist der jüngste Favorit, veröffentlicht im September 2026.

Was uns gefällt

• +Zeigt, wo die Effizienz verloren geht, nicht nur die Endzahl
• +Faktorkarten mit Formeln, ideal für Schichtbesprechungen
• +setFactors aktualisiert alles auf einmal

Gut zu wissen

• –Breites Layout: Es braucht eine große Fläche, um lesbar zu bleiben
• –Der Balken für die geplante Zeit ist in der Vorschau kaum dunkler als der Hintergrund

Dynamisierbare Eigenschaften

• targetOee
• equipmentTag
• panelTitle
• availabilityLabel
• performanceFormula
• backgroundColor

OEE Waterfall Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

10Am besten für den Maschinenzustand mit mehreren Größen

Synchronized Bar and Radar Chart

Zwei Ansichten derselben fünf Zahlen. Links zeigt „Process Metrics“ Temperatur, Druck, Vibration, Durchfluss und Last als Balken von Cyan nach Blau auf einer Skala von 0 bis 100, jeweils mit einer dunklen Spur dahinter. Rechts zeichnet „System Footprint“ dieselben Größen als grüne Netzform. Die Balken liefern exakte Vergleiche; das Netzdiagramm gibt der Maschine einen Fingerabdruck, den man wiedererkennen lernt.

Das Produktblatt nennt alarmThreshold, das Balken und Netzpunkte rot färbt, wenn Werte die Grenze überschreiten, barColorStart und barColorEnd für den Farbverlauf, barChartTitle und radarChartTitle, showTooltips und backgroundColor. Alle Größen werden über ein einziges strukturiertes Array verwaltet. Ein Ereignis OnMetricSelected und eine Methode refreshCharts stehen für Skripte bereit.

Was uns gefällt

• +Exakte Werte und Gesamtbild nebeneinander
• +Eine Alarmschwelle färbt beide Diagramme
• +Passt wie angegossen in Zustandsbilder für Motoren und Pumpen

Gut zu wissen

• –Die Vorschau lässt über und unter beiden Diagrammen viel leeren Raum
• –Die Achsenbeschriftungen des Netzdiagramms sind klein: Prüf sie auf einem Panel

Dynamisierbare Eigenschaften

• alarmThreshold
• barChartTitle
• radarChartTitle
• barColorStart
• barColorEnd
• showTooltips
• backgroundColor

Synchronized Bar and Radar Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

11Am besten für Showroom und Besucherbildschirme

Futuristic Bar Chart

Nicht jedes Bild ist für die Leitwarte gedacht. „SYSTEM LOAD MONITOR“ leuchtet in Neon-Cyan über einem dezenten Raster, und drei breite Balken – Zone Alpha, Beta und Gamma – laufen auf einer Skala von 0 bis 100 % von Cyan nach Pink. Das ist das Diagramm für den großen Bildschirm im Besuchergang oder die Messedemo.

Seine sechs Eigenschaften sind simpel: das Array bars für die Daten, maxValue für die Skala, title, showGrid, showScanlines für einen optionalen Röhrenmonitor-Effekt und backgroundColor. Ein Ereignis BarClicked und eine Methode refreshChart decken die Interaktion ab.

Was uns gefällt

• +Auffällige Optik, die auf Fotos gut aussieht
• +Nur sechs Eigenschaften
• +Scanlines und Raster optional

Gut zu wissen

• –Auf drei Balken ausgelegt: nicht das richtige für lange Kategorielisten
• –Der Neon-Stil ist das Gegenteil eines ruhigen ISA-101-Bilds; halt ihn aus der Hauptansicht des Bedieners heraus

Dynamisierbare Eigenschaften

• bars
• maxValue
• title
• showGrid
• showScanlines
• backgroundColor

Futuristic Bar Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

Lobende Erwähnungen: 5 weitere Balkendiagramme, die einen Blick wert sind

Gute Controls, die es nicht in die Top Elf geschafft haben, weil 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.

• 

  Modern Bar Chart

  Im Oktober 2026 das meistgeladene Balkendiagramm im Katalog: zwölf Monatsbalken mit Wertbeschriftungen und einem Verlauf von Indigo nach Petrol. Die Vorschau ist auf Spanisch („Rendimiento Operativo“, ENE bis DIC), die Balken ragen unten über die Karte hinaus, und das Produktblatt zählt zehn Eigenschaften, zwei Ereignisse und zwei Methoden, ohne sie zu nennen.

  Zum Produkt →
• 

  Grouped Bars Charts

  Ein naher Verwandter des Historical Bar Chart Viewer mit Schnellwahl 7 Days, 30 Days und All, Parameterkarten mit Einheiten und Werten in den Balken. Dreizehn Eigenschaften; nimm es, wenn dir Schnellbereiche lieber sind als eingetippte Daten.

  Zum Produkt →
• 

  Grouped Bar Chart

  Gruppierte Balken mit durchsuchbarer Parameter-Seitenleiste, Schaltflächen Select All und Clear All und einem Zeitraum. Laut Produktblatt zehn Eigenschaften; die Vorschau ist spärlich, mit drei Gruppen dünner Balken.

  Zum Produkt →
• 

  Bar Chart with limit

  Neon-Verlaufsbalken, die oberhalb von alarmThreshold rot werden, mit optionalem Leuchteffekt und 16 Eigenschaften. In der Vorschau ist keine Grenzwertlinie zu sehen, obwohl das Produktblatt showThresholdLine aufführt: lohnt einen Check.

  Zum Produkt →
• 

  Monthly Energy Bar Chart

  Berechnet den Monatsverbrauch aus kumulierten SPS-Zählern und färbt die Balken, die consumptionSetpoint überschreiten. Eine tolle Idee; die Vorschau hat sehr blasse Beschriftungen auf Weiß und einen obersten Achsenwert, der als 1,650.0000000000002 ausgegeben wird.

  Zum Produkt →

So verwendest du ein Balkendiagramm-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 seine Beschriftungen.

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 Daten als Array oder JSON-String entgegen (data, series, bars …). Verbinde die Eigenschaft deshalb zuerst mit einer internen String-Variablen, füge ein EA-Feld oder ein Testskript hinzu, das ein paar Werte schreibt, und starte Runtime. Wenn sich die Balken richtig verhalten, wechselst du auf die echten SPS-Daten.

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: Ein Diagramm zeigt Daten nur an, also lass beim Verbinden seiner Eigenschaften Nur lesend aktiviert. Deaktiviere es nur für eine Eigenschaft, die das Control selbst in eine Variable zurückschreiben muss, wie die Produktblätter erinnern. Und fixiere die Skala (yAxisMax, maxValue, maxYAxis …) auf den echten Bereich deines Prozesses: Eine Skala, die bei jeder Aktualisierung springt, macht Balken unvergleichbar.

Häufige Fragen

Unser Fazit

Wenn du nur eins herunterlädst, dann das Bar Chart with Limits: Warn- und Alarmlinien, die die Balken von selbst einfärben, und eine Legende, die der Bediener versteht. Für einen Sollwert pro Kategorie das Bar Chart with individual targets oder das kompakte Bullet bar Chart; für Schichten das Stacked Bar Chart; für Verläufe den Historical Bar Chart Viewer; für die laufende Produktion das Production Parts Per Minute Chart; für Qualität das Pareto Chart; für Effizienz das OEE Waterfall Chart. Der Maschinenzustand geht an das Synchronized Bar and Radar Chart, schmale Panels an das Auto Adjust Bar Chart und der Besucherbildschirm an das Futuristic Bar Chart.

Und falls deine Anlage eine Frage stellt, die keins davon beantwortet (das tut sie immer), denk daran: Der Generator, der sie gebaut hat, ist nur einen Klick entfernt.