Machen wir einen kleinen Ausflug in die Vergangenheit. Erinnern Sie sich an die Kampfspiele aus Ihrer Kindheit? Woran haben Sie erkannt, dass Ihre Figur kurz vor dem Tod stand und es Zeit war, alle spektakulären Moves einzusetzen? An der Lebensleiste, die oben angezeigt wurde.
Das Spiel beginnt mit jedem Spieler mit einer begrenzten Menge an Lebenspunkten, dargestellt durch einen Balken. Jedes Mal, wenn eine Figur einen Treffer einsteckt, verliert der Balken an Lebenspunkten, bis er sich „leert” und die andere Figur gewinnt.
Das war wahrscheinlich der erste Fortschrittsbalken, den Sie je erlebt haben.
Fortschrittsbalken in der Geschäftswelt funktionieren nach demselben Prinzip, nur dass sie nicht von maximal auf null, sondern von null auf maximal gehen (und ganz ohne epische Verluste).
Ein Fortschrittsdiagramm ist überaus praktisch, um Fortschritte oder Veränderungen im Laufe der Zeit zu verfolgen. Es zeigt auf schnelle und leicht verständliche Weise, wie Sie oder jemand anderes vorankommen. Ganz ehrlich, welches der folgenden würden Sie lieber einem Bericht für Ihren Chef hinzufügen, wenn er um schnelle Erkenntnisse bittet?
Es sei denn, Ihr Chef wirklich jegliche Art von Diagrammen hasst, würden wir auf die erste Option wetten.
Aber kommen wir zurück zum Anfang.
Was sind Fortschrittsbalken-Diagramme?
Grundsätzlich zeigt ein Fortschrittsdiagramm Ihren Fortschritt im Zeitverlauf anhand eines Balkendiagramms. Wenn Sie beispielsweise versuchen, eine Meile unter einer bestimmten Zeit zu laufen, würde Ihr Fortschrittsdiagramm Ihre Laufzeiten über einen Zeitraum von Tagen oder Wochen anzeigen. So können Sie sehen, ob Sie sich verbessern oder ob Sie härter arbeiten müssen, um Ihr Ziel zu erreichen.
Fortschrittsdiagramme dienen jedoch nicht nur persönlichen Zielen. Sie werden auch von Unternehmen zur Leistungsverfolgung, von Lehrkräften zur Verfolgung des Fortschritts ihrer Schüler und von Projektmanagern zur Verfolgung des Fortschritts ihres Teams genutzt. Außerdem eignen sie sich hervorragend, um einem Kunden per E-Mail den Status seiner Treuepunkte anzuzeigen!
Das Tolle an Fortschrittsdiagrammen ist, dass sie Ihnen helfen, die Daten auf sehr leicht verständliche Weise zu visualisieren. Sie sehen schnell, ob Sie auf Kurs sind, um Ihr Ziel zu erreichen, oder ob Sie Anpassungen vornehmen müssen. Außerdem können Fortschrittsdiagramme eine großartige Motivation sein – den eigenen Fortschritt im Zeitverlauf zu sehen, kann wirklich ermutigend sein!
Und jetzt zum SPASSIGEN Teil – wie ERSTELLT man eins?
Wie erstellen Sie ein Fortschrittsbalkendiagramm in Image Charts?
Design-technisch sind Fortschrittsbalken nichts anderes als horizontale Balkendiagramme mit negativen Werten Ränder. Und mit Image Charts sind sie wirklich einfach einzurichten. So geht's mit dem kostenlosen Image Charts-Editor:
Option 1: Kostenloser Editor
1. Wählen Sie Ihre Hauptfarbe
Wählen Sie zunächst Ihre Hauptfarbe (die den Fortschritt anzeigt) und die Hintergrundfarbe (vorzugsweise eine neutrale). Für dieses Beispiel verwenden wir ein Gold #CFB948 als Hauptfarbe und ein einfaches Hellgrau #E3E3E3 als Hintergrund.
2. Einstellungen konfigurieren
Wählen Sie nun die folgenden Einstellungen:
- cht=bhs (horizontales gestapeltes Balkendiagramm)
- chma=-10,0,0,-10 (linker Rand: -10px, unterer Rand: -10px)
- chd=a:65|35 (65 % Fortschritt abgeschlossen, 35 % verbleibend)
- chxt= x,y (sichtbare Achse)
- chxs= 0,FFFFFF00,0,-1,_,FFFFFF00,FFFFFF00|1,FFFFFF00,0,-1,_,FFFFFF00,FFFFFF00 (für Farbe und Stil der Achsenbeschriftungen)
- chco=CFB948,E3E3E3 (legt die Farben fest)
- chf= bg,s,E3E3E3 (legt die einfarbigen Füllungen fest)
Uuund fertig! Die daraus resultierende Fortschrittsleiste sieht so aus:
3. Feiern Sie es (oder machen Sie es EPISCH)
Okay, jetzt steigern wir den Spaß mit Charts. Wie wäre es, wenn wir einen erstellen mit einem Verlauf? Nehmen wir an, wir möchten einen Fortschritt von einem schlechten zu einem guten Zustand darstellen und dies mit Farbe ausdrücken.
der Prozess wäre genau derselbe wie oben, mit Ausnahme eines kleinen Details bei der Vollfüllung. Nehmen wir ein Beispiel.
- Die erste Hintergrundfüllung bg,s,FFFFFF00, teilt unserer API mit, das Diagramm mit einer transparenten Hintergrundfarbe darzustellen.
- die zweite Hintergrundfüllung b0,lg,0,03A9F4,0.5,EA469E,0.1, bedeutet, dass der erste Balken unseres Diagramms (b0) einen linearen Farbverlauf (lg) mit einem Winkel von 0 Grad (0) haben muss, der von Farbe 03A9F4 zu Farbe EA469E verläuft. Alle technischen Details finden Sie unter Verläufe direkt hier.
das entstandene Diagramm, dieses Schmuckstück:
Option 2: No-Code
Okay, das ist alles großartig, aber was, wenn Sie nicht möchten Sie Fortschrittsdiagramme manuell erstellen? Was, wenn Sie einen wiederkehrenden Bedarf haben und das ständige Neuerstellen einfach Zeitverschwendung ist?
Nun, wir haben gute Nachrichten für Sie!
Image Charts lässt sich mit Zapier und Make integrieren, sodass Sie Fortschrittsdiagramme ganz ohne Code erstellen können!
So würde Ihr Prozess in Zapier aussehen, wenn Sie Werte aus neuen Datensätzen in Airtable auswählen, ein Fortschrittsbalkendiagramm erstellen und es über SendGrid an Ihr Publikum senden. (Kurzer Hinweis: Zapier- und Make-Integrationen sind nur in kostenpflichtigen Plänen enthalten)
Sie können jede beliebige Aktion so einrichten, dass sie das Erstellen eines (Fortschritts-)Balkendiagramms auslöst
Ganz einfach:
- Wählen Sie den Trigger für Ihr Fortschrittsbalken-Diagramm
- Wählen Sie die Image Charts-App und wählen Sie im Dropdown-Menü das horizontale gestapelte Balkendiagramm (bhs) aus.
- Geben Sie an, welche Daten Sie im Fortschrittsbalken anzeigen möchten und wie er aussehen soll (achten Sie darauf, die Ränder negativ zu setzen!)
- Entscheiden Sie, wo Sie das fertige Diagramm anzeigen möchten. Sie können es in einer transaktionalen E-Mail versenden, in das Produkt-Dashboard einbetten, auf der Website präsentieren oder etwas ganz Eigenes damit anstellen!
Tada! Ab jetzt wird bei jeder Auslösung der Automatisierung ein neues Fortschrittsbalkendiagramm erstellt und dorthin gesendet, wo es benötigt wird.
Und da haben Sie es! So erstellen Sie ganz einfach Fortschrittsbalken mit Image Charts. Probieren Sie es aus und erstellen Sie Ihr Diagramm kostenlos.
