Laten we even terug in de tijd gaan. Herinner je je de vechtspellen die je als kind speelde? Hoe wist je dat je personage bijna dood was en dat het tijd was om alle flitsende moves in te zetten? Aan de gezondheidsbalk die bovenaan werd weergegeven.
Het spel begint met elke speler met een beperkte hoeveelheid gezondheid, weergegeven door een balk. Elke keer dat een personage een klap krijgt, verliest de balk wat gezondheid totdat deze „leeg” is en het andere personage wint.
Dat was waarschijnlijk de eerste voortgangsbalk die je hebt meegemaakt.
Voortgangsbalken in het bedrijfsleven werken op dezelfde manier, alleen gaan ze niet van max naar nul, maar van nul naar max (en zonder epische verliezen).
Een voortgangsgrafiek is superhandig om voortgang of veranderingen in de tijd te volgen. Het laat op een snelle en makkelijk te begrijpen manier zien hoe u of iemand anders het doet. Eerlijk gezegd, welke van de volgende zou u liever aan een rapport voor uw baas toevoegen wanneer die om snelle inzichten vraagt?
Tenzij uw baas echt houdt niet van grafieken, wij zouden ons geld op de eerste optie zetten.
Maar laten we teruggaan naar het begin.
Wat zijn voortgangsbalkgrafieken?
In wezen toont een voortgangsdiagram uw vooruitgang in de tijd met behulp van een staafdiagram. Als u bijvoorbeeld probeert een mijl onder een bepaalde tijd te lopen, zou uw voortgangsdiagram uw looptijden over een periode van dagen of weken laten zien. Zo kunt u zien of u vooruitgang boekt of dat u harder moet werken om uw doel te bereiken.
Maar voortgangsgrafieken zijn niet alleen voor persoonlijke doelen. Ze worden ook gebruikt door bedrijven om hun prestaties bij te houden, door docenten om de voortgang van hun studenten te volgen, en door projectmanagers om de voortgang van hun team te volgen. Ze zijn ook een geweldige manier om een klant via e-mail de status van zijn loyaliteitspunten te tonen!
Het leuke aan voortgangsgrafieken is dat ze je helpen de data op een zeer verteerbare manier te visualiseren. Je kunt snel zien of je op schema ligt om je doel te bereiken of dat je bijstellingen moet maken. Bovendien kunnen voortgangsgrafieken een geweldige motivator zijn — je voortgang in de tijd zien kan echt aanmoedigend werken!
En nu naar het LEUKE deel—hoe MAAK je er een?
Hoe maakt u een voortgangsbalkdiagram in Image Charts?
In ontwerptermen zijn voortgangsbalken niets meer dan horizontale staafdiagrammen met negatieve waarden marges. En met Image Charts zijn ze heel eenvoudig in te stellen. Zo doet u dit met het gratis Image Charts-editor:
Optie 1: gratis editor
1. Kies je hoofdkleur
Kies eerst uw hoofdkleur (die de voortgang toont) en de achtergrondkleur (bij voorkeur een neutrale). Voor dit voorbeeld nemen we een goudkleur #CFB948 als hoofdkleur en een eenvoudig lichtgrijs #E3E3E3 als achtergrond.
2. Instellingen configureren
Kies nu de volgende instellingen:
- cht=bhs (horizontale gestapelde staafdiagram)
- chma=-10,0,0,-10 (linkermarge: -10px, ondermarge: -10px)
- chd=a:65|35 (65% voortgang voltooid, 35% resterend)
- chxt= x,y (zichtbare as)
- chxs= 0,FFFFFF00,0,-1,_,FFFFFF00,FFFFFF00|1,FFFFFF00,0,-1,_,FFFFFF00,FFFFFF00 (voor kleur en stijl van aslabels)
- chco=CFB948,E3E3E3 (stelt de kleuren in)
- chf= bg,s,E3E3E3 (stelt de effen vullingen in)
Eeeen klaar! De resulterende voortgangsbalk ziet er zo uit:
3. Vier het (of maak het EPISCH)
Oké, laten we het grafiekenplezier nu opvoeren. Wat dacht je ervan om er een te maken met een gradiënt? Stel dat we een voortgang van een slechte naar een goede toestand willen weergeven en dit met kleur willen uitdrukken.
het proces zou precies hetzelfde zijn als hierboven, op één klein detail na bij de effen vulling. Laten we een voorbeeld nemen.
- De eerste achtergrondvulling bg,s,FFFFFF00, vertelt onze API om de grafiek met een transparante achtergrondkleur weer te geven.
- de tweede achtergrondvulling b0,lg,0,03A9F4,0.5,EA469E,0.1, geeft aan dat de eerste balk van onze grafiek (b0) een lineair kleurverloop (lg) moet hebben met een hoek van 0 graden (0), van kleur 03A9F4 naar kleur EA469E. Lees alle technische details over gradiënten hier.
de resulterende grafiek, dit pareltje:
Optie 2: no-code
Oké, dit is allemaal geweldig, maar wat als je niet wil je voortgangsgrafieken handmatig maken? Wat als je een terugkerende behoefte hebt en het steeds opnieuw maken gewoon tijdverspilling is?
Nou, we hebben goed nieuws voor je!
Image Charts integreert met Zapier en Make, zodat u voortgangsgrafieken kunt maken zonder code!
Zo zou uw proces er in Zapier uitzien als u waarden uit nieuwe records in Airtable haalt, een voortgangsbalkdiagram maakt en dit via SendGrid naar uw publiek verstuurt. (Korte opmerking: Zapier- en Make-integraties zijn alleen inbegrepen in betaalde abonnementen)
U kunt elke actie instellen om het maken van een (voortgangs)staafdiagram te activeren
Simpelweg:
- Kies de trigger voor uw voortgangsbalkgrafiek
- Kies de Image Charts-app en selecteer horizontaal gestapeld staafdiagram (bhs) in de vervolgkeuzelijst.
- Geef aan welke gegevens je wilt tonen in de voortgangsbalk en hoe je wilt dat deze eruitziet (zorg ervoor dat je de marges negatief instelt!)
- Bepaal waar u de uiteindelijke grafiek wilt weergeven. U kunt hem in een transactionele e-mail verzenden, opnemen in het productdashboard, tonen op de website, of iets volledig eigens bedenken!
Tadaa! Vanaf nu wordt er telkens wanneer de automatisering wordt geactiveerd een nieuwe voortgangsbalkgrafiek gemaakt en verzonden waar nodig.
En daar heeft u het! Zo maakt u eenvoudig voortgangsbalken met Image Charts. Probeer het uit en maak uw grafiek gratis.
