Exemple de CSV
| Year | Wind and solar | Coal |
|---|---|---|
| 2010 | 2.3 | 44.8 |
| 2011 | 3.0 | 42.1 |
| 2012 | 3.6 | 37.4 |
| 2013 | 4.3 | 38.9 |
| 2014 | 5.0 | 38.5 |
How to Create a Draw the Line Chart
A step by step walkthrough for building a line chart that asks readers to draw the rest of the trend, then reveals the real line with a score, in PlotSet.
Environ 7 minutesA line chart that stops partway and lets the reader draw the rest is what you will have. When they submit, the real line is revealed and their guess is scored.
Expect about seven minutes. Most of it goes on choosing where the line stops and writing the feedback.
Les données dont vous avez besoin
A first column for the x axis, such as years, then one column per line. Some columns are guessed by the reader, and others can stay fixed as context.
The x column can be text, numbers or dates, with one row per point.
Each guessed column becomes a line the reader has to draw. Fixed columns are always drawn in full.
At least one row must remain after the drawing point, or the chart becomes a plain finished line chart.
All lines share one vertical axis, so keep them on a similar scale.
Les étapes
Le parcours exact dans PlotSet, d'un modèle vierge à un graphique terminé.
- 01
Open the Draw the Line template
From the PlotSet dashboard, start a new project and choose Draw the Line Chart from the Line and Area category. It loads with a sample of US coal and wind and solar share.
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
Add your data
Import a CSV or .xlsx file, paste rows from a spreadsheet, or connect a Google Sheet. Put the x values in the first column and one line per column after it.
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. - 03
Check the column bindings
Choose which columns the reader will guess and which stay fixed. The x axis column is the label.
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. - 04
Set where drawing starts
In the Drawing tab choose what share of each line is shown before the reader takes over. Pick a point that leaves the next move uncertain.
L'onglet 'Preview' pour un graphique Draw the Line Chart. 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. - 05
Choose how the reveal plays
In the same tab, pick whether the real line wipes, fades or draws itself in, and whether guesses snap to steps.
- 06
Write the prompt and the feedback
The Prompt and Score messages tabs hold the instruction, the submit button text and four tiers of feedback, with a token for the size of the gap.
- 07
Style the lines and axes
Use the Color, Lines, X axis, Y axis and Legend tabs to set the look. The Y axis tab controls the baseline and headroom.
- 08
Publish and embed
Publish for a live chart and copy the embed code from the Share dialog. Play it through yourself once, including the reveal, before you share it.
C'est par 'Share' qu'un graphique terminé devient un lien public et un code d'intégration.
Partez du modèle Draw the Line Chart 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 Draw the Line Chart
Stop before the interesting part
Cut the visible line just before the turn, so the reader has a real decision to make.
Write feedback with a voice
Tailor the four score messages to your story rather than keeping the generic text.
Add a fixed context line
A second line that is always visible gives the reader something to reason from.
Keep keyboard mode on
It adds a slider per point, so readers without a mouse can still play.
Erreurs courantes en créant un Draw the Line Chart
There is nothing to draw
The drawing point is at or near the end of the data. Lower the share of the line that is shown.
One line is squashed flat
The lines are on very different scales and share one axis. Set a custom axis range or use similar units.
The tooltip does not show the hidden values
This is by design. Values on the hidden stretch only appear after the reveal, so hovering cannot leak the answer.
The PNG shows the wrong stage
A static export captures whatever stage the chart is in. Reveal the line before you export.
En savoir plus sur le Draw the Line Chart
Vous n'êtes pas sûr que le Draw the Line Chart soit le bon choix ? Découvrez ce que c'est, quand l'utiliser et quand l'éviter.
Draw the Line Chart : questions fréquentes
Yes. Bind several columns as guessed lines, and the reader draws each in turn.
Créez votre Draw the Line Chart maintenant
Gratuit pour commencer avec plus de 300 modèles. Aucune carte bancaire requise.