Faisons un petit voyage dans le passé. Vous souvenez-vous des jeux de combat auxquels vous jouiez enfant ? Comment saviez-vous que votre personnage était sur le point de mourir et qu’il était temps de sortir les grands coups ? Grâce à la barre de vie affichée en haut de l’écran.
Le jeu commence avec chaque joueur disposant d'une quantité limitée de points de vie représentée par une barre. Chaque fois qu'un personnage encaisse un coup, la barre perd des points de vie jusqu'à ce qu'elle se « vide » et que l'autre personnage remporte la victoire.
C'était probablement la première barre de progression que vous ayez connue.
Les barres de progression dans le monde de l'entreprise fonctionnent de la même façon, sauf qu'au lieu d'aller du maximum à zéro, elles vont de zéro au maximum (et sans les pertes épiques).
Un graphique de progression est extrêmement pratique pour suivre les progrès ou les changements dans le temps. Il montre comment vous ou quelqu'un d'autre vous en sortez, d'une manière rapide et facile à comprendre. Sérieusement, lequel des éléments suivants préféreriez-vous ajouter à un rapport pour votre patron quand il vous demande des informations rapides ?
À moins que votre patron vraiment déteste tous les types de graphiques, on parierait plutôt sur la première option.
Mais revenons au début.
Que sont les graphiques en barre de progression ?
Concrètement, un graphique de progression montre votre évolution dans le temps sous forme de graphique à barres. Par exemple, si vous essayez de courir un mile en moins d'un certain temps, votre graphique de progression afficherait vos temps de course sur une période de jours ou de semaines. Vous pourriez ainsi voir si vous progressez ou si vous devez travailler davantage pour atteindre votre objectif.
Mais les graphiques de progression ne servent pas uniquement aux objectifs personnels. Ils sont aussi utilisés par les entreprises pour suivre leurs performances, par les enseignants pour suivre la progression de leurs élèves, et par les chefs de projet pour suivre celle de leur équipe. Ils constituent également un excellent moyen de montrer à un client le statut de ses points de fidélité par email !
Ce qui est intéressant avec les graphiques de progression, c'est qu'ils vous aident à visualiser les données de manière très digeste. Vous pouvez rapidement voir si vous êtes sur la bonne voie pour atteindre votre objectif ou si vous devez apporter des ajustements. De plus, les graphiques de progression peuvent être une excellente source de motivation — voir votre progression dans le temps peut être vraiment encourageant !
Et maintenant, la partie AMUSANTE : comment le CRÉER ?
Comment créer un graphique en barre de progression avec Image Charts ?
En termes de design, les barres de progression ne sont rien de plus que des graphiques à barres avec des valeurs négatives marges. Et avec Image Charts, ils sont vraiment faciles à configurer. Voici comment procéder avec le plan gratuit Éditeur Image Charts:
Option pratique n° 1 : éditeur gratuit
1. Choisissez votre couleur principale
Commencez par choisir votre couleur principale (qui indique la progression) et la couleur de fond (de préférence neutre). Pour cet exemple, nous prendrons une couleur or #CFB948 comme couleur principale et un gris clair simple #E3E3E3 comme fond.
2. Configurer les paramètres
Choisissez maintenant les paramètres suivants :
- cht=bhs (graphique à barres horizontales empilées)
- chma=-10,0,0,-10 (marge gauche : -10px, marge basse : -10px)
- chd=a:65|35 (65 % de progression effectuée, 35 % restants)
- chxt= x,y (axe visible)
- chxs= 0,FFFFFF00,0,-1,_,FFFFFF00,FFFFFF00|1,FFFFFF00,0,-1,_,FFFFFF00,FFFFFF00 (pour couleur et style des étiquettes d'axe)
- chco=CFB948,E3E3E3 (définit les couleurs)
- chf= bg,s,E3E3E3 (définit les remplissages unis)
Eeeet c'est terminé ! La barre de progression obtenue ressemblera à ceci :
3. Célébrez (ou rendez ça ÉPIQUE)
D'accord, passons maintenant au niveau supérieur avec les graphiques. Et si on en créait un avec un dégradé ? Supposons que nous voulions afficher une progression d'un état défavorable vers un état favorable et l'exprimer par la couleur.
le processus serait exactement le même que ci-dessus, à un petit détail près concernant le remplissage uni. Prenons un exemple.
- Le premier remplissage d'arrière-plan bg,s,FFFFFF00, indique à notre API de générer le graphique avec un arrière-plan transparent.
- le second remplissage d'arrière-plan b0,lg,0,03A9F4,0.5,EA469E,0.1, indique que la première barre de notre graphique (b0) doit avoir un dégradé linéaire (lg) avec un angle de 0 degré (0), allant de la couleur 03A9F4 à la couleur EA469E. Découvrez tous les détails techniques sur les dégradés juste ici.
le graphique obtenu, cette merveille :
Option pratique n° 2 : sans code
D'accord, tout cela est formidable, mais que se passe-t-il si vous ne pas vous voulez créer des graphiques de progression manuellement ? Et si ce besoin était récurrent et que les refaire sans cesse vous faisait perdre du temps ?
Eh bien, nous avons une bonne nouvelle pour vous !
Image Charts s'intègre à Zapier et Make, pour créer des graphiques de progression sans code !
Voici à quoi ressemblerait votre processus dans Zapier si vous récupériez des valeurs à partir de nouveaux enregistrements dans Airtable, créiez un graphique en barre de progression, puis l'envoyiez à votre audience via SendGrid. (Remarque rapide : les intégrations Zapier et Make ne sont incluses que dans les plans payants)
Vous pouvez configurer n'importe quelle action pour déclencher la création d'un diagramme à barres (de progression)
Il suffit de :
- Choisissez le déclencheur de votre graphique en barre de progression
- Choisissez l’application Image Charts et sélectionnez le graphique à barres horizontales empilées (bhs) dans le menu déroulant.
- Indiquez les données que vous souhaitez afficher dans la barre de progression et l'apparence que vous souhaitez lui donner (veillez à mettre les marges en négatif !)
- Décidez où vous souhaitez afficher le graphique final. Vous pouvez l’envoyer dans un email transactionnel, l’intégrer au tableau de bord de votre produit, le présenter sur votre site web, ou faire tout autre chose de votre cru !
Tadaaa ! Désormais, chaque fois que l'automatisation se déclenche, un nouveau graphique en barre de progression sera créé et envoyé là où c'est nécessaire.
Et voilà ! Voici comment créer facilement des barres de progression avec Image Charts. Essayez-le et créez votre graphique gratuitement.
