[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-247229-105":3,"detail-sidebar-cat-1-en-105":81,"doc-detail-247229-en":126},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":74,"head_meta":76,"extra_data":78,"updated_unix":80},105,"en","creating-timelines-with-timeline-js-getting-started","Creating Timelines with Timeline JS - Getting Started","","Guide to creating interactive, narrative-driven timelines using Timeline JS, developed by KnightLab at Northwestern University. Covers the purpose of TimelineJS for engaging public audiences, then walks through getting started via the “Make a Timeline” workflow. Explains how to use the required Google Spreadsheet template, preserve all header columns, and enter event data. Details how date fields and optional end dates control timeline ranges, plus annotation headline and text columns to manage on-screen storytelling.",{"@graph":14,"@context":73},[15,34,56],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/template/","Template",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/template/presentations/","Presentations",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/creating-timelines-with-timeline-js-getting-started/247229/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/creating-timelines-with-timeline-js-getting-started/247229.png","ImageObject",442,249,{"name":42,"@type":43},"Connor ","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-27","2026-09-12",true,{"@type":52,"interactionType":53,"userInteractionCount":55},"InteractionCounter",{"@type":54},"ViewAction",15,{"@type":57,"mainEntity":58},"FAQPage",[59,65,69],{"name":60,"@type":61,"acceptedAnswer":62},"What is Timeline JS and why is it used for timelines?","Question",{"text":63,"@type":64},"Timeline JS is a narrative-driven tool created to engage public audiences with visualizations. It is widely used by journalists and media outlets for presenting information clearly.","Answer",{"name":66,"@type":61,"acceptedAnswer":67},"How do I begin creating a timeline in Timeline JS?",{"text":68,"@type":64},"Click “Make a Timeline” to start the four-stage process. Then begin step 1 by choosing “Get the Spreadsheet Template” and download it to your Google Drive after signing in.",{"name":70,"@type":61,"acceptedAnswer":71},"What must be kept in the Google Spreadsheet to ensure the timeline renders correctly?",{"text":72,"@type":64},"The top row headings must remain present and unchanged. Do not delete columns or modify the attributes in that header row; fill only the columns relevant to your events and leave others blank.","https://schema.org",{"og:url":32,"og:type":75,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":77,"canonical":32},"index,follow",{"doc_id":79,"site_id":7},247229,1791721902,{"code":4,"msg":82,"data":83},"success",[84,88,93,98,102,107,112,117,122],{"id":85,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":86,"slug":87},11,90,"presentations",{"id":89,"doc_module":22,"doc_module_name":25,"category_name":90,"show_sort_weight":91,"slug":92},12,"Resumes",80,"resumes",{"id":94,"doc_module":22,"doc_module_name":25,"category_name":95,"show_sort_weight":96,"slug":97},14,"Invoices",70,"invoices",{"id":55,"doc_module":22,"doc_module_name":25,"category_name":99,"show_sort_weight":100,"slug":101},"Posters",60,"posters",{"id":103,"doc_module":22,"doc_module_name":25,"category_name":104,"show_sort_weight":105,"slug":106},16,"Social Media",50,"social-media",{"id":108,"doc_module":22,"doc_module_name":25,"category_name":109,"show_sort_weight":110,"slug":111},17,"Forms",40,"forms",{"id":113,"doc_module":22,"doc_module_name":25,"category_name":114,"show_sort_weight":115,"slug":116},18,"Letters",30,"letters",{"id":118,"doc_module":22,"doc_module_name":25,"category_name":119,"show_sort_weight":120,"slug":121},21,"Paper Templates",5,"papers-templates",{"id":123,"doc_module":22,"doc_module_name":25,"category_name":124,"show_sort_weight":4,"slug":125},158,"General","general-158",{"code":4,"msg":82,"data":127},{"doc_id":79,"user_id":128,"nickname":42,"user_avatar":129,"doc_module":22,"category_id":85,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":55,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":118,"language":135,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":136,"faqs":137,"seo_title":138,"seo_description":12,"update_tm":139,"read_time":140},687207022233,"https://ap-avatar.wpscdn.com/davatar_155a257f0dc6eb9ab79c44ca47cae57d","CREATING TIMELINES WITH TIMELINE JS  \nDr Alana Jayne Piper  \nTimeline JS  \n• Developed at NorthWestern University by their KnightLab team, which has developed a range of successful open-source tools  \n• TimelineJS was developed for use by journalists and media outlets, making it very userfriendly  \n• TimelineJS was also created to be narrative-driven, and focused on engaging public audiences with its visualisations  \nHere’s some I prepared earlier  \nI used Timeline JS for my research project site to create a timeline of crime films produced in Australia-[https://criminalcharacters.com/prisons-and-punishment/map-of-australian](https://criminalcharacters.com/prisons-and-punishment/map-of-australian)prisons/  \nGetting started with TimelineJS  \n• Go to Timeline JS-[https://timeline.knightlab.com/](https://timeline.knightlab.com/ -an)[ -an](https://timeline.knightlab.com/ -an) overview of tips, some further examples and instructions are all available here  \n• If you have a question that is not covered in this tutorial, the site provides a range of help documentation including an FAQ section, a 2-minute instructional video and chat forums.  \n• Click ‘Make a Timeline’ to get started  \nGoogle Spreadsheet  \n• Clicking ‘Make a Timeline’ will take you to the four-stage process for TimelineJS  \n• Start with step 1 by clicking ‘Get the Spreadsheet Template’  \n• Clicking this will prompt you to log into your Google Account, or create one if you don’t already have one. From here you will be able to download a copy of Timeline’s Google Spreadsheet template into your Google Drive.  \nGoogle Spreadsheet  \nThe top row of the spreadsheet has all the headings that are used to render the timeline. It is important that you do not delete any of the columns because all the headings have tobe present for the timeline to render. (You also should not change any of the attributes in the top row.) However, you do not need to input data for each column if that column is not relevant for you – just leave the column blank and it will not affect your final timeline.  \nGoogle Spreadsheet  \nThe Timeline spreadsheet has sample information in the rows below the top row to show you the types of information that can go into each column. Once you have looked over this example information you can delete or clear them to begin adding your own data. Each row in your timeline will represent a separate event.  \nDate columns  \nThe first four columns are for putting in the date or start date of your event. Depending on how precisely your event is dated you can fill out just the year, or day, month and year, or even add the time of day to the date.  \nDate columns  \nThe next four columns offer you the option of adding an end date for your event, if it is the type of even with a clear starting and end point, such as a war. If your event does not have such an end point, you can simply leave blank. The column after these four is the‘Display Date’ column – again you do not have to use this, but you can if you want to change the default way the date is displayed on the timeline to another format, e.g.  \ndd/mmm/yyyy, mmm/ dd/yyyy etc.  \nAnnotation Columns  \nThe next two columns will create the annotation that will appear about your event. The headline column creates a large, bold headline for the event, so it is best to keep it something short and simple. The text column then lets you create an annotation about the event. If you like the annotation can be quite lengthy – in this case the timeline will just auto-generate a scroll bar that will let the viewer scroll down the annotation to read it. However, you may want to self-limit your annotations in order to ensure viewers are kept engaged through a pacey narrative structure.","cbCairAn1B4uijOi","https://ap.wps.com/l/cbCairAn1B4uijOi","pdf",6365158,"English","# Creating Timelines with Timeline JS\n## Getting started with TimelineJS\n## Google Spreadsheet setup\n## Date columns\n## Annotation columns","[{\"question\":\"What is Timeline JS and why is it used for timelines?\",\"answer\":\"Timeline JS is a narrative-driven tool created to engage public audiences with visualizations. It is widely used by journalists and media outlets for presenting information clearly.\"},{\"question\":\"How do I begin creating a timeline in Timeline JS?\",\"answer\":\"Click “Make a Timeline” to start the four-stage process. Then begin step 1 by choosing “Get the Spreadsheet Template” and download it to your Google Drive after signing in.\"},{\"question\":\"What must be kept in the Google Spreadsheet to ensure the timeline renders correctly?\",\"answer\":\"The top row headings must remain present and unchanged. Do not delete columns or modify the attributes in that header row; fill only the columns relevant to your events and leave others blank.\"}]","Creating Timelines with Timeline JS - Getting Started | PDF",1789240860,7]