Exemple de CSV
| Metric | Value |
|---|---|
| Trees planted | 1284500 |
| Volunteers | 18430 |
| Countries reached | 64 |
| Schools supported | 1207 |
How to Create a Number Ticker
A step by step walkthrough for building an animated counter in PlotSet, for one headline figure or a grid of statistics, with an embed code you can paste anywhere.
Environ 5 minutesYou will end up with a large number that counts up to its value when the page loads, with an optional prefix, suffix and caption.
Expect about five minutes. A single figure takes two, and a grid of statistics takes a little longer.
Les données dont vous avez besoin
For a single figure no data is needed. For a grid, one row per statistic with a label and a value.
The value column is read as a number.
The label column becomes the caption under each counter.
In Single mode you can type the number in the settings and leave the sheet alone.
Write numbers without thousands separators in the sheet. The ticker adds them.
Les étapes
Le parcours exact dans PlotSet, d'un modèle vierge à un graphique terminé.
- 01
Open the Number Ticker template
From the PlotSet dashboard, start a new project and search for Number Ticker. It opens with a single counter that counts up to 1000.
Chaque guide commence ici. Choisissez la catégorie, puis le modèle : c'est la même grille quel que soit le type de graphique visé. - 02
Pick a mode
In the Value tab, choose Single for one number, Template for text with numbers inside it, or From data for a counter per row.
L'onglet 'Preview' pour un graphique Number Ticker. Tous les réglages de style se trouvent dans le panneau entouré en rouge : apparence, en-tête, pied de page et les options propres à ce type de graphique, chacun dans un onglet distinct. - 03
Enter the numbers
In Single mode, type the target and the start number. In From data mode, paste rows or import a CSV or .xlsx file.
La vue données, ici sur un projet de graphique en barres. Importez un CSV, extrayez les chiffres d'une image avec 'Magic Import' ou synchronisez une Google Sheet. Le panneau est identique pour tous les types de graphique. - 04
Check the column bindings
Bind the value column to Value and the label column to Label. In Single mode with a typed value, you can skip this.
Les associations déterminent quelle colonne devient l'étiquette, laquelle fournit les valeurs et laquelle pilote la couleur. 'Auto Binding' les devine à partir de vos en-têtes : vérifiez-les plutôt que de les tenir pour acquises. - 05
Format the figure
In the Number format tab, add a prefix or suffix, set the decimals and choose the grouping, or abbreviate large numbers.
- 06
Tune the animation
In the Animation tab, set the duration and easing, and choose whether the count repeats or runs once.
- 07
Style the text
The Typography and Number color tabs set the font, the size and the colour, including a gradient or a colour that changes with progress.
- 08
Publish and embed
Publish for a live chart and copy the embed code from the Share dialog. Reload the page to watch the count run.
C'est par 'Share' qu'un graphique terminé devient un lien public et un code d'intégration.
Partez du modèle Number Ticker avec des données d'exemple déjà chargées, puis remplacez-les par les vôtres.
Ouvrir le modèlePublier, intégrer ou exporter
La dernière ligne droite est la même pour tous les types de graphique : 'Share' transforme le graphique en lien public actif et en code d'intégration, 'Export' l'enregistre sous forme de fichier statique.
Share : lien public et code d'intégration
Activer le code d'intégration et le lien public revient à publier le graphique. Le lien peut être envoyé à qui vous voulez sans risque, et le code d'intégration s'insère dans n'importe quelle page sous la forme d'une iframe qui conserve les infobulles au survol et l'interactivité. Si vous modifiez le graphique par la suite, cliquez sur 'Recreate' pour répercuter ces changements sur le lien comme sur le code.
Export : SVG, PNG ou JPG
Le bouton 'Export' génère une copie statique à la taille dont vous avez besoin. Le SVG reste net à toutes les échelles et peut encore être modifié dans un outil de design ; PNG et JPG sont les choix sûrs pour les présentations et les documents. C'est le multiplicateur d'échelle qui vous donne une image nette sur un écran retina.
Conseils de style pour un Number Ticker
Start near the target for small changes
A start number close to the target shows growth honestly. Start at zero for a figure that is new.
Keep the count short
Two to three seconds is enough for most pages.
Add a caption
A short line under the number says what it counts.
Abbreviate long figures
1.3M reads faster than 1,284,500 in a narrow embed.
Erreurs courantes en créant un Number Ticker
The number shows no thousands separator
Four digit numbers print without one. Figures of 10,000 and over get it.
The grid is empty
From data mode needs a value column. Check that it is bound and holds numbers.
The count has already finished
It runs when the chart loads. Reload the page to see it again.
The text is too small in a grid
Auto-fit shrinks the figures to the smallest cell. Reduce the columns or shorten the longest value.
En savoir plus sur le Number Ticker
Vous n'êtes pas sûr que le Number Ticker soit le bon choix ? Découvrez ce que c'est, quand l'utiliser et quand l'éviter.
Number Ticker : questions fréquentes
Yes. Set a start number higher than the target.
Créez votre Number Ticker maintenant
Gratuit pour commencer avec plus de 600 modèles. Aucune carte bancaire requise.