タイムライン

Timeline TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above . Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality. Knight Lab Watch this brief video for an overview of how to make a timeline. Tips & tricks Keep it short. We recommend not having more than 20 slides for a reader to click through. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline. Write each event as a part of a larger narrative. Include events that build up to major occurrences — not just the major events. Media sources TimelineJS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more! Examples Mandela: A Life of Purpose Chronology of the French Presidential Race Historic Fall at University of Missouri North Korea's Nuclear Ambitions Bulger on Trial The Decline of IRS Nonprofit Regulation Aurora, Colorado Movie Theater Shooting The Collapse of Microsoft and Nokia's Mobile Business How ISIS Spread to 10 Countries Reported Sexual Assault Cases by Texas Educators A History of Wine Around the World The Mystery of Malaysia Airlines Flight 370 Revolutionary User Interfaces A Brief History of the Banana Business The Republican Run-Up Whitney Houston: 1963-2012 Make a Timeline TimelineJS works on any site or blog. Make your own in four easy steps. Having trouble? Watch our video , or see the help section below . Create your spreadsheet Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Make a Copy" button. Drop dates, text and links to media into the appropriate columns. For more about working with our template, see Making a timeline from a Google Spreadsheet Get the Spreadsheet Template Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet. Publish to the web Under the File menu, Share submenu, select “Publish to the Web.” Don't set your Timeline Google Sheet to "anyone with the link can edit." It isn't necessary, and could lead to someone changing your timeline without your consent. In the next window, click the green "Publish" button. When asked, "Are you sure…?" click OK. Copy the URL that appears in the center of the window. Then close the window using the X in the top right corner. For some time, our advice was to ignore the URL which appears in the "publish to the web" window, but changes with Google Sheets have led us to change this advice. We now recommend using the URL from the 'Publish to the web' dialog window. Generate your timeline Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.) Google Spreadsheet URL Width Height Optional settings (show) (hide) Set language, fonts, starting slide and more. Language English العربية Afrikaans Bahasa Indonesia Bahasa Melayu Беларуская мова български език Català Čeština Dansk हिन्दी Deutsch Eesti keel ελληνικά English (24-hour time) English (Great Britain) Español Esperanto Euskara Føroyskt Français Frysk Gaeilge Galego 한국어 Hrvatski Հայերէն Íslenska Italiano עברית ქართული Latviešu valoda Lëtzebuergesch Lietuvių kalba Limba română Magyar မြန်မာ Nederlands नेपाली 日本語 Norsk (bokmål) Norsk (nynorsk) ภาษาไทย Polski Português Português (Brasil) Rumantsch Русский язык සිංහල Slovenščina Slovenčina Srpski српски Suomi Svenska Taiwanese Tagalog தமிழ் తెలుగు Türkçe Українська اُردُو Tiếng Việt فارسی 中文 Fonts Map Type Currently all Google's base maps are supported. When creating a Google map, style it the way you would like it to appear, and then paste the resulting link into your Google Spreadsheet. Default start slide Slide You can tell TimelineJS to start at a specific slide number. Initial zoom level Zoom Level The zoom level at which the timeline portion of TimelineJS will display on load. Specify a value from 0-10 (default is 2). Smaller numbers show a greater span of time. Theme default higher contrast Selecting "higher contrast" may improve readability. Misc Start at the end Begins the timeline on the last slide. Show nav on top Switches the vertical order of the timeline navigation and the media. Debug In debug mode, the JavaScript console will display logging messages. Use hash bookmarks Assigns a hash bookmark to each slide's URL, allowing deep linking to slides. (For directly linked Timelines only -- does not work for iframe embeds) Share your timeline Share Link Use this to link directly to your timeline. If you're embedding on Medium.com or other oembed-aware services, just paste this link on a line by itself where you want your timeline to appear. https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2&height=100% Embed Copy this embed code and paste it on your site where you want your timeline to appear (just like a YouTube video). <iframe src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2&height=650" width="100%" height="650" frameborder="0"></iframe> Preview Open Preview in a new window Every time a timeline is viewed, the data is loaded from Google Sheets. This means that if you need to change your timeline, you don't need to come back and do anything here, or even republish it. Just edit Google Sheets. This also means that you should never delete the Google Sheets document that configures a published timeline! Knight Lab cannot help you recover a deleted configuration spreadsheet. Preview Embed Help Need help? First, please be sure to look at our list of frequently asked questions below. If you're brand new to Timeline JS, you may also want to watch our introductory video . If you don't find an answer there, try our support forums or 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 . Technical documentation Go further with Timeline: Use our spreadsheet template Supported Media Types JSON data format reference Changing the Appearance of your Timeline Timeline Configuration Options Using TimelineJS in Javascript Frequently asked questions How do I edit my timeline? Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the 'publish to the web' step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do. What web browsers does TimelineJS work with? Our primary development and testing browser is Google Chrome. We adhere closely to web standards, so we believe that TimelineJS should work effectively in all modern web browsers. TimelineJS is known to not work with Internet Explorer versions before IE10. Some of my slides aren't showing up. Where are they? If the slides which aren't appearing are at the end of your timeline, look for a blank spreadsheet row right after the last slide which is appearing. When TimelineJS asks Google for your data, Google only sends up to the first blank row, so TimelineJS is actually showing everything that it can. Don't forget to look for hidden spreadsheet rows or rows with a very small height. What are my options for changing how my Timeline looks? First, make sure you know everything you can do in the spreadsheet configuration, like background colors and images. Also, check out the optional settings part of 'step 3' of the authoring tool. You can change the fonts, the position of the timeline navigation, and the initial zoom level. If you still want to do more, there are some configuration options available. Most of those are for fine tuning, but some of them may be helpful. There aren't enough options. I want more control over the [font size/color/etc]. Can I change things using CSS? Because there are so many details to the styling, this is not exactly simple, but, if you have some technical capacity, you can override TimelineJS's <abbr title='Cascading Style Sheets'>CSS</abbr> rules and have complete control over the look of the timeline. For details, see <a href='/docs/overriding-styles.html'>Overriding Timeline's Styles</a>. How can I categorize or group my events? Every event in a timeline can have a group property. Events with the same group are shown in the same row or adjacent rows, and the common value of their group property is used as a label at the left edge of the timeline. Groups can be set using the 'group' column in the Google Spreadsheet or the 'group' property of a JSON slide object. TimelineJS does not support any other special styling for events in the same group. The first slide in my timeline isn't the first chronologically. Why did this happen? When using the Google Spreadsheet to configure your timeline, if you put the word <code>title</code> in the <code>type</code> column, that slide will be put at the front, regardless of the values in the date columns. See the <a href='/docs/using-spreadsheets.html#title_slides'>Google Spreadsheet documentation</a> for