{"id":15335,"date":"2022-08-04T13:12:28","date_gmt":"2022-08-04T13:12:28","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15335"},"modified":"2022-08-13T11:13:43","modified_gmt":"2022-08-13T11:13:43","slug":"timeline-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/08\/04\/timeline-chart\/","title":{"rendered":"How to Make Timeline Chart (in JavaScript)"},"content":{"rendered":"

\"Timeline<\/a>A timeline chart is an excellent way to represent important events and periods in chronological order. Now, let me teach you how to easily create an elegant interactive visualization like that using JavaScript!<\/p>\n

To make this tutorial both helpful and entertaining, I decided to take real data. Join me as I visualize the life of Elon Musk in a JS timeline chart step by step, focusing on the most important events in his career as an entrepreneur and investor.<\/p>\n

<\/p>\n

Timeline Chart Preview<\/h2>\n

Take a look at the beautiful JavaScript timeline chart that I will be creating along the tutorial, and keep reading to find out how!<\/p>\n

\"A<\/p>\n

4 Steps to Build Basic JS Timeline Chart<\/h2>\n

Creating an interactive JavaScript-based timeline chart, even a basic one, may seem to be a daunting task. But right now, you\u2019ll see how to do it with ease.<\/p>\n

In this tutorial, the process of building a JS timeline chart is split into four steps: creating a web page, adding scripts, setting data, and configuring the visualization.<\/p>\n

A stunning basic timeline chart will be arranged in just a few lines of easy-to-comprehend code. Then I will show you how it can be customized (also without much complexity). Follow me!<\/p>\n

1. Creating a web page<\/h3>\n

First, I make a simple web page with an HTML block element. That\u2019s where my JavaScript-based timeline chart will appear.<\/p>\n

I provide this element with an ID and set its height and weight as 100% so that the visualization takes the entire page.<\/p>\n

<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Timeline Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
2. Adding scripts<\/h3>\n
Second, I add all scripts I am going to build a timeline chart with to the <head><\/code> section of the HTML page.<\/p>\n
In this tutorial, I will be using AnyChart JS Charts<\/a>, a robust JavaScript charting library with vast out-of-the-box capabilities that make it easy to quickly visualize data in dozens of chart types<\/a> including timelines.<\/p>\n
Here, I need the Core and Timeline modules<\/a>.<\/p>\n
<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Timeline Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-timeline.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the JS code for the timeline chart will go here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
3. Setting data<\/h3>\n
Third, I set the data I want to visualize in a JS timeline chart.<\/p>\n
There will be two series of different types, range and moment. Each will be added through a separate function.<\/p>\n
The range series is for periods. Each data point has a name along with start and end dates.<\/p>\n
function rangeData() {\r\n  return [\r\n    {\r\n      name: \"Childhood and Education\",\r\n      start: \"1971\/06\/28\",\r\n      end: \"1995\/09\/01\"\r\n    },\r\n    {\r\n      name: \"Entrepreneur Journey\",\r\n      start: \"1983\/06\/28\",\r\n      end: \"2002\/03\/13\"\r\n    },\r\n    {\r\n      name: \"Making of Tycoon\",\r\n      start: \"2002\/03\/14\",\r\n      end: \"2010\/06\/28\"\r\n    },\r\n    {\r\n      name: \"Rise of Tycoon\",\r\n      start: \"2010\/06\/29\",\r\n      end: \"2030\/01\/01\"\r\n    }\r\n  ];\r\n}<\/code><\/pre>\n
The moment series is for individual events. Each data point has a date and text.<\/p>\n
function momentData() {\r\n  return [\r\n    [\"1971\/06\/28\", \"Elon Musk was born in South Africa\"],\r\n    [\"1981\/06\/28\", \"Began to learn computer programming on his own\"],\r\n    [\"1983\/06\/28\", \"Sold the code of his game Blastar for $500\"],\r\n    [\"1990\/09\/01\", \"Entered Queen's University in Kingston, Ontario\"],\r\n    [\"1992\/09\/01\", \"Transferred to the University of Pennsylvania\"],\r\n    [\"1995\/06\/01\", \"Received bachelor's degrees in physics and economics\"],\r\n    [\"1995\/09\/01\", \"Started a Ph.D. at Stanford (dropped out in 2 days\"],\r\n    [\"1995\/11\/06\", \"Founded Zip2 with his brother\"],\r\n    [\"1999\/02\/01\", \"Sold Zip2 to Compaq for $307M\"],\r\n    [\"1999\/03\/01\", \"Co-founded X.com\"],\r\n    [\"2000\/03\/01\", \"Merged X.com with Confinity to form PayPal\"],\r\n    [\"2001\/01\/01\", \"Started conceptualizing Mars Oasis\"],\r\n    [\"2002\/03\/14\", \"Founded SpaceX & became its CEO\"],\r\n    [\"2002\/10\/03\", \"Received $175.8M from PayPal's sale to eBay for $1.5B\"],\r\n    [\"2004\/02\/01\", \"Invested $6.5M in Tesla and joined its board as chairman\"],\r\n    [\"2006\/01\/01\", \"SpaceX started to get NASA contracts\"],\r\n    [\"2008\/10\/01\", \"Became CEO at Tesla\"],\r\n    [\"2010\/06\/29\", \"Tesla's first IPO\"],\r\n    [\"2015\/12\/11\", \"Co-founded OpenAI\"],\r\n    [\"2016\/07\/01\", \"Co-founded Neuralink\"],\r\n    [\"2018\/02\/21\", \"Resigned his board seat at OpenAI\"],\r\n    [\"2021\/11\/06\", \"Started selling his Tesla stock (10% for $16.4B by year end)\"],\r\n    [\"2022\/04\/13\", \"Made an offer to buy Twitter\"],\r\n    [\"2022\/07\/08\", \"Withdrew his $44B bid to buy Twitter\"]\r\n  ];\r\n}<\/code><\/pre>\n
Alright! We\u2019ve got a page, scripts, and data ready. Now, it\u2019s time to add some JavaScript charting code to complete the intended interactive timeline chart visualization!<\/p>\n
4. Configuring the visualization<\/h3>\n
To start with, we add the data from the previous step. Then we use a function to ensure that our subsequent code configuring the timeline chart is executed when the web page is already loaded.<\/p>\n
<script>\r\n \r\n  \/\/ set the range series data\r\n  function rangeData() {\r\n    return [\r\n      {\r\n        name: \"Childhood and Education\",\r\n        start: \"1971\/06\/28\",\r\n        end: \"1995\/09\/01\"\r\n      },\r\n      {\r\n        name: \"Entrepreneur Journey\",\r\n        start: \"1983\/06\/28\",\r\n        end: \"2002\/03\/13\"\r\n      },\r\n      {\r\n        name: \"Making of Tycoon\",\r\n        start: \"2002\/03\/14\",\r\n        end: \"2010\/06\/28\"\r\n      },\r\n      {\r\n        name: \"Rise of Tycoon\",\r\n        start: \"2010\/06\/29\",\r\n        end: \"2030\/01\/01\"\r\n      }\r\n    ];\r\n  }\r\n \r\n  \/\/ set the moment series data\r\n  function momentData() {\r\n    return [\r\n      [\"1971\/06\/28\", \"Elon Musk was born in South Africa\"],\r\n      [\"1981\/06\/28\", \"Began to learn computer programming on his own\"],\r\n      [\"1983\/06\/28\", \"Sold the code of his game Blastar for $500\"],\r\n      [\"1990\/09\/01\", \"Entered Queen's University in Kingston, Ontario\"],\r\n      [\"1992\/09\/01\", \"Transferred to the University of Pennsylvania\"],\r\n      [\"1995\/06\/01\", \"Received bachelor's degrees in physics and economics\"],\r\n      [\"1995\/09\/01\", \"Started a Ph.D. at Stanford (dropped out in 2 days\"],\r\n      [\"1995\/11\/06\", \"Founded Zip2 with his brother\"],\r\n      [\"1999\/02\/01\", \"Sold Zip2 to Compaq for $307M\"],\r\n      [\"1999\/03\/01\", \"Co-founded X.com\"],\r\n      [\"2000\/03\/01\", \"Merged X.com with Confinity to form PayPal\"],\r\n      [\"2001\/01\/01\", \"Started conceptualizing Mars Oasis\"],\r\n      [\"2002\/03\/14\", \"Founded SpaceX & became its CEO\"],\r\n      [\"2002\/10\/03\", \"Received $175.8M from PayPal's sale to eBay for $1.5B\"],\r\n      [\"2004\/02\/01\", \"Invested $6.5M in Tesla and joined its board as chairman\"],\r\n      [\"2006\/01\/01\", \"SpaceX started to get NASA contracts\"],\r\n      [\"2008\/10\/01\", \"Became CEO at Tesla\"],\r\n      [\"2010\/06\/29\", \"Tesla's first IPO\"],\r\n      [\"2015\/12\/11\", \"Co-founded OpenAI\"],\r\n      [\"2016\/07\/01\", \"Co-founded Neuralink\"],\r\n      [\"2018\/02\/21\", \"Resigned his board seat at OpenAI\"],\r\n      [\"2021\/11\/06\", \"Started selling his Tesla stock (10% for $16.4B by year end)\"],\r\n      [\"2022\/04\/13\", \"Made an offer to buy Twitter\"],\r\n      [\"2022\/07\/08\", \"Withdrew his $44B bid to buy Twitter\"]\r\n    ];\r\n  }\r\n \r\n  anychart.onDocumentReady(function() {\r\n    \/\/ The (following) timeline charting code lands here.\r\n  });\r\n \r\n<\/script><\/code><\/pre>\n
Then, within the anychart.onDocumentReady()<\/code> function, I create a timeline chart instance using the timeline()<\/code> function, set both series, and make the range series labels display the name<\/code> attribute.<\/p>\n
\/\/ create a timeline chart\r\nlet chart = anychart.timeline();\r\n\r\n\/\/ create a range series\r\nlet rangeSeries = chart.range(rangeData());\r\n\r\n\/\/ create a moment series\r\nlet momentSeries = chart.moment(momentData());\r\n  \r\n\/\/ configure the range series label settings\r\nrangeSeries.labels().format(\"{%name}\");<\/code><\/pre>\n
Also right there, I add a few more lines to entitle the timeline chart, define a container for it, and finally, command to draw the resulting graphic.<\/p>\n
\/\/ set the chart title\r\nchart.title(\"Timeline of Elon Musk\");\r\n\r\n\/\/ set the chart container id\r\nchart.container(\"container\");\r\n\r\n\/\/ draw the chart\r\nchart.draw();<\/code><\/pre>\n
Result: Basic JS Timeline Chart<\/h2>\n
There you go! A cool interactive JavaScript timeline chart visualization is ready. And it has been far from difficult to build one, hasn\u2019t it?<\/p>\n