Storyline is an open-source tool that enables anyone to build an annotated, interactive line chart. To make Storyline as flexible as possible, we've just included the chart, axis labels, and cards. Headlines, context, more specifics on the data sources and credits--we expect you'll include what you want outside of Storyline. We built the chart up top using Real Median Household Income data from FRED.
Things to know
- We’re focused on time series line charts for now. The x-axis will accept only time/date formats.
- Our mobile-first design requires you to keep it short. No more than 12 cards per story, titles limited to 54 characters, and paragraphs limited to 200 characters.
- Storyline works best with fewer than 800 data points.
Make a Storyline
Storyline JS works on any site or blog. Make your own in just a few steps.
Having trouble? Check the help section below.
-
Put your data in Google Sheets
To make a storyline, you will need to put a spreadsheet with the data for your chart on Google Sheets.
Your sheet needs to have a date/time column and a data column. (If it has more than two columns, that's no problem.) There needs to be a header row with titles for those columns.
(If your data doesn't already have a header row, add one and give your columns titles.)
-
Add your story
Your story is told through a series of cards explaining details about various points in your data. Each card has a title, text, and a date. The date comes from a column already in your data, but you'll need to add columns for the title and text.
Go to your Google spreadsheet and columns for title and text.
Find the rows for the data you want to explain, and add text and title information.
-
Configure and Publish
Publish the spreadsheet
Under the File menu, select “Publish to the Web.”
In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.
Now, copy the URL from your browser's location bar.
Configure your Storyline
Copy/paste spreadsheet URL into the box below. (Make sure you've published the spreadsheet.)
Share your Storyline
Embed
Grab the embed code and paste it on your site where you want your storyline to appear (just like a YouTube video). Link
Use this to share a direct link to your storyline. Something not quite right? Just edit the form above and click "Create Storyline" again.
Help
Need help? First, please be sure to look at our list of frequently asked questions below.
If you don't find an answer there, use our tech support web form. Please be clear with your question, include a link to your spreadsheet, and if appropriate, a link to a page which shows the issue with which you need help. We can only answer support questions in English. We try to be prompt, but please understand that we do not have a dedicated tech support staff.
Find a bug? If you are confident you have found a bug, please report it as a GitHub issue. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with the tech support system.
Frequently asked questions
-
How many data points can I use?
Storyline works best with fewer than 800 data points. -
Can I have multiple lines of data?
Right now you can only visualize one set of data. -
What languages are supported?
Most of your storyline is based on data you provide, so language support mostly isn't an issue. The only exception is with the configuration question How should the date look in your story? One choice includes the month name, and for now, those month names are only available in English. -
Why am I getting a message that says "The date/time column is invalid"?
This message comes up when StorylineJS can't find the dates in your data. Check these things:- Did you select the correct column?
- Did you specify the date format correctly?
In some cases, it will look to you like you specified the date format correctly, but Google will actually send the date to use in a different format than what you see on your screen. If the end of the error message you see looks like this:
[date string: Tue Jul 06 1971 00:00:00 GMT-0500 (CDT) format %m/%d/%Y]then that's what's happening.To fix this, highlight your whole date column. Then, from the Format menu, choose Number > Plain text. It may take a little while for the change to work. Clearing your browser cache or switching to a "private" or "incognito" browser window should help.
