{"id":18155,"date":"2024-10-03T21:59:21","date_gmt":"2024-10-03T21:59:21","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=18155"},"modified":"2024-10-10T14:14:18","modified_gmt":"2024-10-10T14:14:18","slug":"roman-timeline-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/","title":{"rendered":"Creating Timeline Chart of Roman History Using JavaScript"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png\" alt=\"A laptop with an interactive timeline chart of Roman history, from the Roman Empire to the Byzantine Empire, created using JavaScript in this tutorial\" width=\"100%\" class=\"alignnone size-full wp-image-18198\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png 1200w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-300x172.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-768x439.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-1024x585.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>Ever caught yourself <a href=\"https:\/\/www.forbes.com\/sites\/conormurray\/2023\/09\/18\/how-often-do-men-think-about-the-roman-empire-a-lot-according-to-new-tiktok-trend\/\" target=\"_blank\" rel=\"nofollow\">thinking about the Roman Empire<\/a> more often than you\u2019d like to admit? You\u2019re not alone, and we\u2019ve got just the thing for you! With the recent <a href=\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/elevated-javascript-charting\" target=\"_blank\">AnyChart JS Charts 8.13.0<\/a> release, we\u2019ve enhanced our <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart\" target=\"_blank\" rel=\"nofollow\">timeline chart<\/a> for better support of historical data visualization. We\u2019d love to showcase this improvement in action.<\/p>\n<p>We\u2019ve added a <strong><em><a href=\"https:\/\/playground.anychart.com\/fX2uGiPK\" target=\"_blank\" rel=\"nofollow\">Roman History Timeline<\/a><\/em><\/strong> to our gallery of <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Timeline_Chart\/\" target=\"_blank\">timeline chart examples<\/a>, and we now invite you to discover how it was developed from scratch. In this in-depth <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\" target=\"_blank\">JavaScript charting tutorial<\/a>, we\u2019ll cover everything from A to Z, meticulously guiding you through each step \u2014 from setting up the HTML environment to adding detailed data and customizing the visualization to make the chart both informative and engaging. The final result is an interactive timeline that you can proudly call <a href=\"https:\/\/www.wikihow.com\/My-Roman-Empire-Meaning\" target=\"_blank\" rel=\"nofollow\">your own Roman Empire<\/a>.<\/p>\n<p>So, whether you\u2019re a history enthusiast caught up in the recent meme trend or a developer eager to expand your data visualization skills, follow along and learn how to create compelling historical timeline charts using JavaScript!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#introduction\">Introduction<\/a><\/li>\n<li><a href=\"#setting-up-environment\">Step 1: Setting Up Environment<\/a>\n<ul>\n<li><a href=\"#create-basic-html-document\">1.1. Create Basic HTML Document<\/a><\/li>\n<li><a href=\"#create-container-for-chart\">1.2. Create Container for Chart<\/a><\/li>\n<li><a href=\"#include-all-necessary-resources\">1.3. Include All Necessary Resources<\/a><\/li>\n<li><a href=\"#complete-html-setup\">1.4. Complete HTML Setup<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#adding-data\">Step 2: Adding Data<\/a>\n<ul>\n<li><a href=\"#define-periods-ranges\">2.1. Define Periods (Ranges)<\/a><\/li>\n<li><a href=\"#define-events-moments\">2.2. Define Events (Moments)<\/a><\/li>\n<li><a href=\"#complete-data-loading-function\">2.3. Complete Data Loading Function<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#creating-timeline-chart\">Step 3: Creating Timeline Chart<\/a>\n<ul>\n<li><a href=\"#prepare-ground\">3.1. Prepare Ground<\/a><\/li>\n<li><a href=\"#set-up-chart\">3.2. Set Up Chart<\/a><\/li>\n<li><a href=\"#set-data-to-chart\">3.3. Set Data to Chart<\/a>\n<ul>\n<li><a href=\"#load-data\">3.3.1. Load Data<\/a><\/li>\n<li><a href=\"#set-seres-for-periods-ranges\">3.3.2. Set Series for Periods (Ranges)<\/a><\/li>\n<li><a href=\"#set-series-for-events\">3.3.3. Set Series for Events (Moments)<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#customize-tooltips\">3.4. Customize Tooltips<\/a>\n<ul>\n<li><a href=\"#configure-period-tooltips\">3.4.1. Configure Period Tooltips<\/a><\/li>\n<li><a href=\"#configure-event-tooltips\">3.4.2. Configure Event Tooltips<\/a><\/li>\n<li><a href=\"#complete-tooltip-customization\">3.4.3. Complete Tooltip Customization<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#enhance-navigation\">3.5. Enhance Navigation<\/a>\n<ul>\n<li><a href=\"#add-scrollbar\">3.5.1. Add Scrollbar<\/a><\/li>\n<li><a href=\"#set-up-zoom-interactivity\">3.5.2. Set Up Zoom Interactivity<\/a><\/li>\n<li><a href=\"#add-zoom-control-buttons\">3.5.3. Add Zoom Control Buttons<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#add-era-designators\">3.6. Add Era Designators<\/a><\/li>\n<li><a href=\"#set-font-for-axis-labels\">3.7. Set Font for Axis Labels<\/a><\/li>\n<li><a href=\"#set-chart-title\">3.8. Set Chart Title<\/a><\/li>\n<li><a href=\"#set-container-and-draw-chart\">3.9. Set Container and Draw Chart<\/a><\/li>\n<li><a href=\"#complete-javascript-timeline-code\">3.10. Complete JavaScript Timeline Code<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#css-styling\">Step 4: CSS Styling<\/a>\n<ul>\n<li><a href=\"#style-html-body-container\">4.1. Style HTML, Body, Container<\/a><\/li>\n<li><a href=\"#style-zoom-control-buttons\">4.2. Style Zoom Control Buttons<\/a><\/li>\n<li><a href=\"#style-tooltips\">4.3. Style Tooltips<\/a><\/li>\n<li><a href=\"#complete-css-code\">4.4. Complete CSS Code<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#result-timeline-chart-of-roman-history\">Result: Timeline Chart of Roman History<\/a><\/li>\n<li><a href=\"#wrapping-up\">Wrapping Up<\/a><\/li>\n<\/ul>\n<h2 id=\"introduction\" style=\"padding-top: 80px; margin-top: -80px;\">Introduction<\/h2>\n<p>Visualizing historical data can be challenging, especially when dealing with extensive timelines and precise dates. With the latest improvements in the <a href=\"https:\/\/www.anychart.com\" target=\"_blank\">AnyChart JavaScript charting library<\/a>, creating detailed and accurate timeline charts is more accessible than ever.<\/p>\n<p>In this tutorial, we\u2019ll build an interactive JS <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/timeline-chart\/\" target=\"_blank\">timeline<\/a>\u00a0for a web page, which illustrates significant periods and events in Roman history, complete with custom tooltips and convenient navigation. Take a glance below to see how the final result will look, and let\u2019s begin!<\/p>\n<p><a href=\"https:\/\/playground.anychart.com\/fX2uGiPK\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" class=\"alignnone size-full wp-image-18150\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline.png\" alt=\"A preview of the interactive timeline chart of Roman history built along this JavaScript timeline charting tutorial\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline.png 2048w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline-300x188.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline-768x480.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline-1024x640.png 1024w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<h2 id=\"setting-up-environment\" style=\"padding-top: 80px; margin-top: -80px;\">Step 1: Setting Up Environment<\/h2>\n<p>To <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Quick_Start\" target=\"_blank\" rel=\"nofollow\">get started<\/a> with building\u00a0our timeline, we need to set up a basic HTML structure for our webpage. This includes setting up the document, creating a container to display the chart, and\u00a0linking the necessary resources.<\/p>\n<h3 id=\"create-basic-html-document\" style=\"padding-top: 80px; margin-top: -80px;\">1.1. Create Basic HTML Document<\/h3>\n<p>First, we need to create a basic HTML document that defines the structure of the page. This is the foundation of any webpage.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Roman Civilization Timeline with All Data&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3 id=\"create-container-for-chart\" style=\"padding-top: 80px; margin-top: -80px;\">1.2. Create Container for Chart<\/h3>\n<p>Next, we need a container where the timeline chart will be displayed. This can be a simple <code>&lt;div&gt;<\/code>\u00a0element with a specific ID, placed in the <code>&lt;body&gt;<\/code> section:<\/p>\n<pre><code class=\"html\">&lt;div id=\"container\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>This element will\u00a0act as the placeholder for our chart. We will reference it in\u00a0the JavaScript code to generate\u00a0the visualization.<\/p>\n<h3 id=\"include-all-necessary-resources\" style=\"padding-top: 80px; margin-top: -80px;\">1.3. Include All Necessary Resources<\/h3>\n<p>Now, it\u2019s time to include the necessary resources for our web project.<\/p>\n<p>Let\u2019s use a custom web font. For example, <a href=\"https:\/\/fonts.google.com\/specimen\/Cinzel\" target=\"_blank\" rel=\"nofollow\">Cinzel from Google Fonts<\/a>. Simply include the relevant links in the <code>&lt;head&gt;<\/code> section:<\/p>\n<pre><code class=\"html\">&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"&gt;\r\n&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin&gt;\r\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400..900&amp;family=Nunito:ital,wght@0,200..1000;1,200..1000&amp;display=swap\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>We also need to connect the AnyChart JavaScript library to bring in\u00a0the charting functionality. Link the\u00a0required\u00a0<a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Modules\" target=\"_blank\" rel=\"nofollow\">modules<\/a>\u00a0similarly\u00a0in the <code>&lt;head&gt;<\/code> section:<\/p>\n<pre><code class=\"html\">&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-timeline.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-ui.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>These <code class=\"html\">&lt;script&gt;<\/code> tags include the core charting library, the dedicated timeline chart module, and the UI module to customize the user interface.<\/p>\n<p>Now, we are ready to place the JavaScript timeline charting code within the <code>&lt;script&gt;<\/code> tag in the <code>&lt;body&gt;<\/code> section:<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  \/\/ The place for the JavaScript charting code\r\n&lt;\/script&gt;<\/code><\/pre>\n<h3 id=\"complete-html-setup\" style=\"padding-top: 80px; margin-top: -80px;\">1.4. Complete HTML Setup<\/h3>\n<p>At this point, here\u2019s what the complete HTML structure looks like:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Roman Empire Timeline&lt;\/title&gt;\r\n    &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"&gt;\r\n    &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin&gt;\r\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400..900&amp;family=Nunito:ital,wght@0,200..1000;1,200..1000&amp;display=swap\" rel=\"stylesheet\"&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-timeline.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-ui.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      \/\/ The place for the JavaScript charting code\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2 id=\"adding-data\" style=\"padding-top: 80px; margin-top: -80px;\">Step 2. Adding Data<\/h2>\n<p>Now that we\u2019ve set up the structure, it\u2019s time to add <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#data\" target=\"_blank\" rel=\"nofollow\">data<\/a> that will populate our timeline. There are multiple ways to do this. Here, within the JavaScript code of the chart, we\u2019ll create a function called <code>loadData()<\/code> to add all the data as objects:<\/p>\n<pre><code class=\"javascript\">function loadData(){\r\n  \/\/ The data comes here\u2026\r\n};<\/code><\/pre>\n<p>The data to be visualized\u00a0consists of two main types:<\/p>\n<ul>\n<li><strong>Periods:<\/strong>\u00a0Time <strong>ranges<\/strong>\u00a0representing significant durations, like reigns of emperors or historical eras.<\/li>\n<li><strong>Events:<\/strong>\u00a0Specific historical <strong>moments<\/strong>, such as battles or important occurrences.<\/li>\n<\/ul>\n<p>Let\u2019s proceed by adding the data for each type.<\/p>\n<h3 id=\"define-periods-ranges\" style=\"padding-top: 80px; margin-top: -80px;\">2.1. Define Periods (Ranges)<\/h3>\n<p>Periods are represented as time ranges. Each one has:<\/p>\n<ul>\n<li><code>name<\/code>: The label or title, such as \u201cLegendary\u201d or \u201cEmperors.\u201d<\/li>\n<li><code>direction<\/code>: Defines the orientation on the timeline as either pointing &#8220;up&#8221; (<code>up<\/code>) or &#8220;down&#8221; (<code>down<\/code>).<\/li>\n<li><code>ranges<\/code>: An array of specific data ranges, each with a name or title (<code>name<\/code>) to identify the period, start (<code>start<\/code>) and end (<code>end<\/code>) dates that mark the time span, and additional attributes like images (<code>img<\/code>) and descriptions (<code>description<\/code>).<\/li>\n<\/ul>\n<p>For example, here\u2019s the code defining the period of \u201cLegendary\u201d kings:<\/p>\n<pre><code class=\"javascript\">var periods = [{}];\r\nperiods[0] = {};\r\nperiods[0].name = \"Legendary\";\r\nperiods[0].direction = \"up\";\r\nperiods[0].ranges = [\r\n  {\r\n    name: \"Romulus\", \r\n    start: new Date(Date.UTC(-753, 0, 0)), \r\n    end: new Date(Date.UTC(-717, 0, 0)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/95\/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg\/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg\",\r\n    description: \"The legendary founder and first king of Rome, who established the city's foundations.\"\r\n  },\r\n  \/\/ Other kings follow\r\n];<\/code><\/pre>\n<p>Add more periods in a similar manner:<\/p>\n<pre><code class=\"javascript\">\/\/ 1) Add periods (ranges):\r\nvar periods = [{}];\r\n  \r\n\/\/ legendaries' years of life\r\nperiods[0] = {};\r\nperiods[0].name = \"Legendary\";\r\nperiods[0].direction = \"up\";\r\nperiods[0].ranges = [\r\n  {\r\n    name: \"Romulus\", \r\n    start: new Date(Date.UTC(-753, 0, 0)), \r\n    end: new Date(Date.UTC(-717, 0, 0)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/95\/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg\/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg\",\r\n    description: \"The legendary founder and first king of Rome, who established the city's foundations.\"\r\n  },\r\n\r\n  \/\/ Other legendary kings follow\r\n\r\n];\r\n\r\n\/\/ consuls' years of rule\r\nperiods[1] = {};  \r\nperiods[1].name = \"Consuls\";\r\nperiods[1].direction = \"up\";\r\nperiods[1].ranges = [\r\n  {\r\n    name: \"Consulate\", \r\n    start: new Date(Date.UTC(-509, 0, 0)), \r\n    end: new Date(Date.UTC(-27, 0, 16)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/98\/Roman_SPQR_banner.svg\/150px-Roman_SPQR_banner.svg.png\",\r\n    description: \"Consuls were elected annually, and the position was often shared by two individuals, making it difficult to track the exact reign periods for all consuls over the centuries.\"\r\n  }\r\n];\r\n\r\n\/\/ emperors' years of life\r\nperiods[2] = {};    \r\nperiods[2].name = \"Emperors\";\r\nperiods[2].direction = \"up\";\r\nperiods[2].ranges = [\r\n  {\r\n    name: \"Augustus\",\r\n    start: new Date(Date.UTC(-27, 0, 16)),\r\n    end: new Date(\"0014-08-19\"),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/5\/5e\/Augustus_of_Prima_Porta_%28inv._2290%29.jpg\/250px-Augustus_of_Prima_Porta_%28inv._2290%29.jpg\",\r\n    description: \"First Roman emperor, marking the transition from the Roman Republic to the Empire.\"\r\n  },\r\n\r\n  \/\/ Other emperors follow\r\n\r\n];\r\n\r\n\/\/ historical states' years of existence\r\nperiods[3] = {};\r\nperiods[3].name = \"Historical states\";\r\nperiods[3].direction = \"down\";\r\nperiods[3].ranges = [\r\n  {\r\n    x: \"Roman Kingdom\", \r\n    start: new Date(Date.UTC(-753)), \r\n    end: new Date(Date.UTC(-509)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/0a\/Platner_-_Ancient_Rome_city_growth.jpg\/375px-Platner_-_Ancient_Rome_city_growth.jpg\",\r\n    description: \"The Roman Kingdom is the earliest period of Roman history, traditionally dated from the founding of Rome in 753 BC to the overthrow of the last king in 509 BC, marking the transition from a monarchy to a republic.\"\r\n  },\r\n\r\n  \/\/ Other states follow\r\n\r\n];<\/code><\/pre>\n<h3 id=\"define-events-moments\" style=\"padding-top: 80px; margin-top: -80px;\">2.2. Define Events (Moments)<\/h3>\n<p>Events are individual moments that don&#8217;t span long periods but occur on specific dates. Each one has:<\/p>\n<ul>\n<li><code>name<\/code>: The event\u2019s title (e.g., &#8220;Sack of Rome by Gauls&#8221;).<\/li>\n<li><code>direction<\/code>: Orientation on the timeline (<code>up<\/code> or <code>down<\/code>).<\/li>\n<li><code>moments<\/code>: An array of events that include names (<code>y<\/code>), dates (<code>x<\/code>), and additional attributes like images (<code>img<\/code>) and descriptions (<code>description<\/code>).<\/li>\n<\/ul>\n<p>For example, here&#8217;s how to define wars and battles:<\/p>\n<pre><code class=\"javascript\">var events = [];\r\nevents[0] = {};  \r\nevents[0].name = \"Wars and Battles\";\r\nevents[0].direction = \"up\";\r\nevents[0].moments = [\r\n  {\r\n    y: \"Sack of Rome by Gauls\", \r\n    x: new Date(Date.UTC(-390, 0, 0)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/8\/88\/La_Bataille_de_l%27allia_-_G.Surand.jpg\",\r\n    description: \"Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation.\"\r\n  },\r\n  \/\/ Other wars and battles follow\r\n];<\/code><\/pre>\n<p>Add more events similarly:<\/p>\n<pre><code class=\"javascript\">\/\/ 2) Add moments (events):\r\nvar events = [];\r\n\r\n\/\/ wars and battles\r\nevents[0] = {};  \r\nevents[0].name = \"Wars and Battles\";\r\nevents[0].direction = \"up\";\r\nevents[0].moments = [\r\n  {\r\n    y: \"Sack of Rome by Gauls\", \r\n    x: new Date(Date.UTC(-390, 0, 0)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/8\/88\/La_Bataille_de_l%27allia_-_G.Surand.jpg\",\r\n    description: \"Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation.\"\r\n  },\r\n  \/\/ Other wars and battles follow\r\n];\r\n\r\n\/\/ establishments\r\nevents[1] = {};  \r\nevents[1].name = \"Establishments\";\r\nevents[1].direction = \"down\";\r\nevents[1].moments = [\r\n  {\r\n    y: \"Establishment of Rome\", \r\n    x: new Date(Date.UTC(-753, 0, 0)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/e\/ea\/Kapitolinische_W\u00f6lfin_Museum_Capitolini.jpg\/330px-Kapitolinische_W\u00f6lfin_Museum_Capitolini.jpg\",\r\n    description: \"Rome was founded, according to legend, by Romulus and Remus.\"\r\n  },\r\n\r\n  \/\/ Other establishments follow\r\n\r\n];\r\n\r\n\/\/ disasters\r\nevents[2] = {};  \r\nevents[2].name = \"Disasters\";\r\nevents[2].direction = \"down\";\r\nevents[2].moments = [\r\n  {\r\n    y: \"Assassination of Julius Caesar\", \r\n    x: new Date(Date.UTC(-44, 0, 0)),\r\n    img: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/e\/eb\/Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg\/375px-Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg\",\r\n    description: \"Caesar was killed by Roman senators to stop his increasing power.\"\r\n  },\r\n\r\n\/\/ Other disasters follow\r\n\r\n];<\/code><\/pre>\n<h3 id=\"complete-data-loading-function\" style=\"padding-top: 80px; margin-top: -80px;\">2.3. Complete Data Loading Function<\/h3>\n<p>Once all periods and events are defined, the <code>loadData()<\/code> function can be finalized, ensuring it returns both periods and events to populate the timeline chart:<\/p>\n<pre><code class=\"javascript\">\/\/ Function to add data for the timeline chart:\r\nfunction loadData(){\r\n\r\n  \/\/ 1) Add periods (ranges)\r\n  \/\/ \u2026\r\n\r\n  \/\/ 2) Add events (moments)\r\n  \/\/ \u2026\r\n\r\n  return {\"periods\": periods, \"events\": events}\r\n  \r\n};<\/code><\/pre>\n<p>This <code>loadData()<\/code> function is crucial, as it prepares the dataset that will feed into the chart graphically representing the periods and events of Roman history.<\/p>\n<p>With this step complete, we\u2019re now ready to configure the timeline visualization of this data.<\/p>\n<h2 id=\"creating-timeline-chart\" style=\"padding-top: 80px; margin-top: -80px;\">Step 3. Creating Timeline Chart<\/h2>\n<p>Now, let\u2019s initialize and generate the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart\" target=\"_blank\" rel=\"nofollow\">timeline chart<\/a> with the data we\u2019ve added.<\/p>\n<h3 id=\"prepare-ground\" style=\"padding-top: 80px; margin-top: -80px;\">3.1. Prepare Ground<\/h3>\n<p>As\u00a0previously mentioned, all the JavaScript code responsible for chart creation should be inside the <code>&lt;script&gt;<\/code> tag within the <code>&lt;body&gt;<\/code> section of the HTML document.<\/p>\n<p>Additionally, to ensure all the main charting code\u00a0runs only after the entire page has fully loaded with all external resources, wrap it within the <code>anychart.onDocumentReady()<\/code> function. This prevents errors related to accessing elements before they exist.<\/p>\n<p>Here\u2019s the basic structure:<\/p>\n<pre><code class=\"html\">&lt;body&gt;\r\n  &lt;script&gt;\r\n    anychart.onDocumentReady(function () {\r\n      \/\/ The place for the main JavaScript Timeline Chart code\r\n    });\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;<\/code><\/pre>\n<p>Then, declare a chart variable. In a typical case, it could be done within the <code>anychart.onDocumentReady()<\/code> function. However, since we will need to access it from other functions as well, we will declare it outside the function. The rest of the JavaScript code will be placed inside <code>anychart.onDocumentReady()<\/code>, unless specified otherwise.<\/p>\n<pre><code class=\"html\">&lt;body&gt;\r\n  &lt;script&gt;\r\n    \/\/ Create a chart variable here to be accessible from various places in the script\r\n    var chart;\r\n    \/\/ Ensure the main charting code runs after the page has loaded with all external resources\r\n    anychart.onDocumentReady(function () {\r\n      \/\/ Main JavaScript Timeline Chart code goes here\r\n    });\r\n    \/\/ Other functions go here\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;<\/code><\/pre>\n<h3 id=\"set-up-chart\" style=\"padding-top: 80px; margin-top: -80px;\">3.2. Set Up Chart<\/h3>\n<p>Now, we need to set up the timeline chart. To create this type of data visualization, use the <code>anychart.timeline()<\/code> method.\u00a0This\u00a0initializes the chart object, which will be later configured with data and styling options.<\/p>\n<pre><code class=\"javascript\">chart = anychart.timeline();<\/code><\/pre>\n<p>To make sure the chart displays data within the right time frame, set the minimum and maximum dates for the timeline&#8217;s <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#scale\" target=\"_blank\" rel=\"nofollow\">scale<\/a>. This helps display all periods and events properly, from early Roman history to later stages.<\/p>\n<pre><code class=\"javascript\">chart.scale().minimum(Date.UTC(-1000));\r\nchart.scale().maximum(Date.UTC(1500));<\/code><\/pre>\n<p>These two lines define the visible range of the timeline from 1000 BC to 1500 AD.<\/p>\n<h3 id=\"set-data-to-chart\" style=\"padding-top: 80px; margin-top: -80px;\">3.3. Set Data to Chart<\/h3>\n<p>It\u2019s time to populate the timeline with the data we\u2019ve structured in the <code>loadData()<\/code> function in Step 2. Recall that this data includes periods (ranges) and events (moments).<\/p>\n<h4 id=\"load-data\" style=\"padding-top: 80px; margin-top: -80px;\">3.3.1. Load Data<\/h4>\n<p>First, retrieve the structured data by calling <code>loadData()<\/code>:<\/p>\n<pre><code class=\"javascript\">var data = loadData();<\/code><\/pre>\n<p>Now, we\u2019ll set up the data series.<\/p>\n<h4 id=\"set-seres-for-periods-ranges\" style=\"padding-top: 80px; margin-top: -80px;\">3.3.2. Set Series for Periods (Ranges)<\/h4>\n<p>To display the periods, i.e. a <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#range_series\" target=\"_blank\" rel=\"nofollow\">range series<\/a>, use the <code>range()<\/code> method. The data for periods is in the <code>periods<\/code> array, and we will loop through it to set each period in the chart.<\/p>\n<p>Here\u2019s how to loop through the periods and bind them to the chart:<\/p>\n<pre><code class=\"javascript\">\/\/ 1) Set the range series for periods (e.g., rulers, empires)\r\nfor (let i = 0; i &lt; data.periods.length; i++) {\r\n  var period = data.periods[i];\r\n  var range = chart.range(period.ranges);\r\n  range.name(period.name);\r\n  range.direction(period.direction);    \r\n  range.labels().fontFamily(\"Cinzel\");\r\n};<\/code><\/pre>\n<h4 id=\"set-series-for-events\" style=\"padding-top: 80px; margin-top: -80px;\">3.3.3. Set Series for Events (Moments)<\/h4>\n<p>For events, use the <code>moment()<\/code> method. Similarly, we\u2019ll loop through the <code>events<\/code> array and create a <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#moment_series\" target=\"_blank\" rel=\"nofollow\">moment series<\/a> for each set of events.<\/p>\n<pre><code class=\"javascript\">\/\/ 2) Set the moment series for events (e.g., battles, establishment of states)\r\nfor (let i = 0; i &lt; data.events.length; i++) {\r\n  var event = data.events[i];\r\n  var moment = chart.moment(event.moments);\r\n  moment.name(event.name);\r\n  moment.direction(event.direction);\r\n  moment.labels().fontFamily(\"Cinzel\");\r\n};<\/code><\/pre>\n<h3 id=\"customize-tooltips\" style=\"padding-top: 80px; margin-top: -80px;\">3.4. Customize Tooltips<\/h3>\n<p><a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#labels_and_tooltips\" target=\"_blank\" rel=\"nofollow\">Tooltips <\/a>enhance user experience by providing additional details when users hover over periods and events in the timeline. Both the period (range) and event (moment) series support rich HTML content, allowing you to display descriptions, images, and other information in a user-friendly format.<\/p>\n<p>Let\u2019s customize the tooltips.<\/p>\n<h4 id=\"configure-period-tooltips\" style=\"padding-top: 80px; margin-top: -80px;\">3.4.1. Configure Period Tooltips<\/h4>\n<p>For example, here\u2019s how you can customize the tooltip for the range series (periods).<\/p>\n<p>First, create a tooltip variable:<\/p>\n<pre><code class=\"javascript\">var tooltip = range.tooltip();<\/code><\/pre>\n<p>Second, enable HTML content in the tooltip:<\/p>\n<pre><code class=\"javascript\">tooltip.useHtml(true);<\/code><\/pre>\n<p>Third, format the tooltip to include all the information that needs to be displayed, in the desired way:<\/p>\n<pre><code class=\"javascript\">tooltip.format(function(){\r\n  var img = this.getData(\"img\");\r\n  var description = this.getData(\"description\");\r\n  return \"&lt;center&gt;&lt;img src='\" + img + \"'\/&gt;&lt;\/center&gt;&lt;p style='max-width: 250px;'&gt;\" + description + \"&lt;\/p&gt;\";\r\n});<\/code><\/pre>\n<p>Fourth, if you don\u2019t want to have the line separating the tooltip header from the tooltip content, simply remove it:<\/p>\n<pre><code class=\"javascript\">tooltip.separator(false);<\/code><\/pre>\n<p>Finally, it\u2019s possible to customize the tooltip header separately:<\/p>\n<pre><code class=\"javascript\">\/\/ enable HTML in the tooltip header\r\ntooltip.title().useHtml(true);\r\n\/\/ format the tooltip header\r\ntooltip.titleFormat(function(){\r\n  \/\/ use the anychart.format.dateTime() method to format the dates      \r\n  var start = anychart.format.dateTime(this.start, \"y G\");\r\n  var end = anychart.format.dateTime( this.end, \"y G\");\r\n  return \"&lt;p&gt;\" + this.x + \" (\" + start + \" \u2013 \" + end + \")&lt;\/p&gt;\";\r\n});<\/code><\/pre>\n<p>Here\u2019s how the entire tooltip customization code looks in this case:<\/p>\n<pre><code class=\"javascript\">\/\/ create a variable\r\nvar tooltip = range.tooltip();\r\n\/\/ enable HTML in the tooltip\r\ntooltip.useHtml(true);\r\n\/\/ format the tooltip content\r\ntooltip.format(function(){\r\n  var img = this.getData(\"img\");\r\n  var description = this.getData(\"description\");\r\n  return \"&lt;center&gt;&lt;img src='\" + img + \"'\/&gt;&lt;\/center&gt;&lt;p style='max-width: 250px;'&gt;\" + description + \"&lt;\/p&gt;\";\r\n});\r\n\/\/ disable the tooltip separator\r\ntooltip.separator(false);\r\n\/\/ enable HTML in the tooltip header\r\ntooltip.title().useHtml(true);\r\n\/\/ format the tooltip header\r\ntooltip.titleFormat(function(){\r\n  \/\/ use the anychart.format.dateTime() method to format the dates      \r\n  var start = anychart.format.dateTime(this.start, \"y G\");\r\n  var end = anychart.format.dateTime( this.end, \"y G\");\r\n  return \"&lt;p&gt;\" + this.x + \" (\" + start + \" \u2013 \" + end + \")&lt;\/p&gt;\";\r\n});<\/code><\/pre>\n<h4 id=\"configure-event-tooltips\" style=\"padding-top: 80px; margin-top: -80px;\">3.4.2. Configure Event Tooltips<\/h4>\n<p>Similarly, customization can be applied to the tooltip of the moment series (events):<\/p>\n<pre><code class=\"javascript\">\/\/ create a variable\r\nvar tooltip = moment.tooltip();\r\n\/\/ enable HTML in the tooltip\r\ntooltip.useHtml(true);\r\n\/\/ format the tooltip content\r\ntooltip.format(function(){\r\n  var img = this.getData(\"img\");\r\n  var description = this.getData(\"description\");\r\n  return \"&lt;center&gt;&lt;img src='\" + img + \"'\/&gt;&lt;\/center&gt;&lt;p style= 'max-width: 250px;'&gt;\" + description + \"&lt;\/p&gt;\";\r\n});\r\n\/\/ disable the tooltip separator\r\ntooltip.separator(false);\r\n\/\/ enable HTML in the tooltip header\r\ntooltip.title().useHtml(true);\r\n\/\/ format the tooltip header\r\ntooltip.titleFormat(function(){\r\n  var x = new Date(this.x);\r\n  \/\/ use the anychart.format.dateTime() method for date formatting\r\n  var formatted = anychart.format.dateTime(x, \"y G\");\r\n  return \"&lt;p&gt;\" + this.value + \", \" + formatted + \"&lt;\/p&gt;\";\r\n});<\/code><\/pre>\n<h4 id=\"complete-tooltip-customization\" style=\"padding-top: 80px; margin-top: -80px;\">3.4.3. Complete Tooltip Customization<\/h4>\n<p>Finally, let\u2019s combine everything within the series configuration functions to ensure proper functionality in the current setting.<\/p>\n<pre><code class=\"javascript\">\/\/ 1) Set the range series for periods (e.g., rulers, empires)\r\nfor (let i = 0; i &lt; data.periods.length; i++) {\r\n  var period = data.periods[i];\r\n  var range = chart.range(period.ranges);\r\n  range.name(period.name);\r\n  range.direction(period.direction);    \r\n  range.labels().fontFamily(\"Cinzel\");\r\n  \/\/ Customize the range series tooltip:\r\n  var tooltip = range.tooltip();\r\n  \/\/ enable HTML in the tooltip\r\n  tooltip.useHtml(true);\r\n  \/\/ format the tooltip content\r\n  tooltip.format(function(){\r\n    var img = this.getData(\"img\");\r\n    var description = this.getData(\"description\");\r\n    return \"&lt;center&gt;&lt;img src='\" + img + \"'\/&gt;&lt;\/center&gt;&lt;p style='max-width: 250px;'&gt;\" + description + \"&lt;\/p&gt;\";\r\n  });\r\n  \/\/ disable the tooltip separator\r\n  tooltip.separator(false);\r\n  \/\/ enable HTML in the tooltip header\r\n  tooltip.title().useHtml(true);\r\n  \/\/ format the tooltip header\r\n  tooltip.titleFormat(function(){\r\n    \/\/ use the anychart.format.dateTime() method to format the dates      \r\n    var start = anychart.format.dateTime(this.start, \"y G\");\r\n    var end = anychart.format.dateTime( this.end, \"y G\");\r\n    return \"&lt;p&gt;\" + this.x + \" (\" + start + \" \u2013 \" + end + \")&lt;\/p&gt;\";\r\n  });\r\n};\r\n\r\n\/\/ 2) Set the moment series for events (e.g., battles, establishment of states)\r\nfor (let i = 0; i &lt; data.events.length; i++) {\r\n  var event = data.events[i];\r\n  var moment = chart.moment(event.moments);\r\n  moment.name(event.name);\r\n  moment.direction(event.direction);\r\n  moment.labels().fontFamily(\"Cinzel\");\r\n  \/\/ Configure the moment series tooltip:\r\n  var tooltip = moment.tooltip();\r\n  \/\/ enable HTML in the tooltip\r\n  tooltip.useHtml(true);\r\n  \/\/ format the tooltip content\r\n  tooltip.format(function(){\r\n    var img = this.getData(\"img\");\r\n    var description = this.getData(\"description\");\r\n    return \"&lt;center&gt;&lt;img src='\" + img + \"'\/&gt;&lt;\/center&gt;&lt;p style= 'max-width: 250px;'&gt;\" + description + \"&lt;\/p&gt;\";\r\n  });\r\n  \/\/ disable the tooltip separator\r\n  tooltip.separator(false);\r\n  \/\/ enable HTML in the tooltip header\r\n  tooltip.title().useHtml(true);\r\n  \/\/ format the tooltip header\r\n  tooltip.titleFormat(function(){\r\n    var x = new Date(this.x);\r\n    \/\/ use the anychart.format.dateTime() method for date formatting\r\n    var formatted = anychart.format.dateTime(x, \"y G\");\r\n    return \"&lt;p&gt;\" + this.value + \", \" + formatted + \"&lt;\/p&gt;\";\r\n  });\r\n};<\/code><\/pre>\n<h3 id=\"enhance-navigation\" style=\"padding-top: 80px; margin-top: -80px;\">3.5. Enhance Navigation<\/h3>\n<p><a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#navigation\" target=\"_blank\" rel=\"nofollow\">Navigation<\/a> plays a critical role in timeline charts, especially when working with\u00a0extensive historical datasets.<\/p>\n<p>By default, you can use the mouse to navigate timeline charts: move along the timeline by dragging, and zoom in and out using the mouse wheel. To enrich this behavior and make the visualization even more navigable, let\u2019s add a scrollbar element (scroller), zoom-on-click\u00a0functionality\u00a0(to zoom in on a moment or range), and zoom control buttons (to easily focus on specific eras in the timeline of Roman history).<\/p>\n<h4 id=\"add-scrollbar\" style=\"padding-top: 80px; margin-top: -80px;\">3.5.1. Add Scrollbar<\/h4>\n<p>Adding a <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#scroller\" target=\"_blank\" rel=\"nofollow\">scrollbar<\/a> allows users to navigate through the timeline easily. It can be enabled with a single line of code:<\/p>\n<pre><code class=\"javascript\">chart.scroller(true);<\/code><\/pre>\n<p>The scroller will appear below the timeline.<\/p>\n<h4 id=\"set-up-zoom-interactivity\" style=\"padding-top: 80px; margin-top: -80px;\">3.5.2. Set Up Zoom Interactivity<\/h4>\n<p>To make the timeline more interactive, let\u2019s add an <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Event_Listeners\" target=\"_blank\" rel=\"nofollow\">event listener<\/a> that zooms into a specific period or event when clicked. Here\u2019s how.<\/p>\n<p>First, add an event listener that triggers when a point (either a period or event) is clicked:<\/p>\n<pre><code class=\"javascript\">chart.listen(\"pointClick\", function(e){\r\n  \/\/ Configure the chart listener here\r\n};<\/code><\/pre>\n<p>Second,\u00a0declare variables that will define the area for zooming:<\/p>\n<pre><code class=\"javascript\">var start, end, gap;<\/code><\/pre>\n<p>Third, determine if the clicked element is a moment or a period:<\/p>\n<pre><code class=\"javascript\">var type = e.series.getType();<\/code><\/pre>\n<p>Fourth, configure the behavior for moments. We\u2019ll zoom in on them with a 50-year margin before and after:<\/p>\n<pre><code class=\"javascript\">if (type == \"moment\") {\r\n  var momentDate =  e.point.get(\"x\");\r\n  start = momentDate;\r\n  end = momentDate;\r\n  \/\/ 50 years in milliseconds\r\n  gap = 1577880000000;\r\n}<\/code><\/pre>\n<p>Fifth, specify the desired behavior for non-moment elements, i.e. periods. We\u2019ll zoom into them with a 10% margin before and after.<\/p>\n<pre><code class=\"javascript\">else {\r\n  start = e.point.get(\"start\");\r\n  end = e.point.get(\"end\");\r\n  gap = (end - start)\/10;\r\n}<\/code><\/pre>\n<p>Now that all prerequisites have been set up, use the <code>zoomTo()<\/code> method to finalize the configuration of the zooming functionality within the event listener.<\/p>\n<pre><code class=\"javascript\">chart.zoomTo(start - gap, end + gap);<\/code><\/pre>\n<p>Check out the entire code that configures this zoom interactivity within the event listener:<\/p>\n<pre><code class=\"javascript\">\/\/ Add an event listener to zoom into an element when it's clicked:\r\nchart.listen(\"pointClick\", function(e){\r\n  var start, end, gap;\r\n  \/\/ check if the clicked element is a moment or a period\r\n  var type = e.series.getType();\r\n  \/\/ configure the behavior for moments\r\n  if (type == \"moment\") {\r\n    var momentDate =  e.point.get(\"x\");\r\n    \/\/ zoom into the moment, showing 50 years before and after it\r\n    start = momentDate;\r\n    end = momentDate;\r\n    \/\/ 50 years in milliseconds\r\n    gap = 1577880000000;\r\n  } else { \/\/ for periods (non-moment elements)\r\n    \/\/ zoom into the period, showing 10% of its length before its start and after its end\r\n    start = e.point.get(\"start\");\r\n    end = e.point.get(\"end\");\r\n    gap = (end - start)\/10;\r\n  };\r\n  \/\/ zoom into the element when it's clicked\r\n  chart.zoomTo(start - gap, end + gap);    \r\n});<\/code><\/pre>\n<p>Importantly, since we&#8217;re working with years and centuries (without the need for quarters, months, and so on), we should patch the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#zoom_levels\" target=\"_blank\" rel=\"nofollow\">zoom levels<\/a> on the timeline scale. Configure this using a new function placed outside of <code>anychart.onDocumentReady()<\/code>.<\/p>\n<pre><code class=\"javascript\">\/\/ Function to patch the zoom levels on the timeline scale\r\nfunction patchedZoomLevels(){\r\n  var customZoomLevels = [\r\n    [\r\n      {\"unit\": \"month\", \"count\": 1},\r\n      {\"unit\": \"quarter\", \"count\": 1},\r\n      {\"unit\": \"year\", \"count\": 1}\r\n    ],\r\n    [\r\n      {\"unit\": \"quarter\", \"count\": 1},\r\n      {\"unit\": \"year\", \"count\": 1},\r\n      {\"unit\": \"year\", \"count\": 10}\r\n    ],\r\n    [\r\n      {\"unit\": \"year\", \"count\": 1},\r\n      {\"unit\": \"year\", \"count\": 10},\r\n      {\"unit\": \"year\", \"count\": 50}\r\n    ],\r\n    [\r\n      {\"unit\": \"year\", \"count\": 10},\r\n      {\"unit\": \"year\", \"count\": 50},\r\n      {\"unit\": \"year\", \"count\": 100}\r\n    ],\r\n    [\r\n      {\"unit\": \"year\", \"count\": 50},\r\n      {\"unit\": \"year\", \"count\": 100},\r\n      {\"unit\": \"year\", \"count\": 500}\r\n    ]    \r\n  ];\r\n  return customZoomLevels;  \r\n};<\/code><\/pre>\n<p>Once the custom zoom levels are defined, call this function inside the <code>anychart.onDocumentReady()<\/code> block. This ensures the zoom levels are patched before the chart is drawn.<\/p>\n<pre><code class=\"javascript\">chart.scale().zoomLevels(patchedZoomLevels());<\/code><\/pre>\n<p>One more important thing: don\u2019t forget to disable the selection functionality to ensure click tracking works correctly for zooming.<\/p>\n<pre><code class=\"javascript\">chart.interactivity().selectionMode(\"none\");<\/code><\/pre>\n<h4 id=\"add-zoom-control-buttons\" style=\"padding-top: 80px; margin-top: -80px;\">3.5.3. Add Zoom Control Buttons<\/h4>\n<p>Next, let\u2019s add buttons to facilitate zooming into key periods of Roman history: the Kingdom, Republic, Empire, and Two Empires.<\/p>\n<p>First, set up the period buttons in the <code>&lt;body&gt;<\/code> section of the HTML page.<\/p>\n<pre><code class=\"html\">&lt;button id=\"period-button\" onclick=\"zoomTo('kingdom')\"&gt;Roman Kingdom&lt;\/button&gt;\r\n&lt;button id=\"period-button\" onclick=\"zoomTo('republic')\"&gt;Roman Republic&lt;\/button&gt;\r\n&lt;button id=\"period-button\" onclick=\"zoomTo('empire')\"&gt;Roman Empire&lt;\/button&gt;\r\n&lt;button id=\"period-button\" onclick=\"zoomTo('empires')\"&gt;Two Empires&lt;\/button&gt;<\/code><\/pre>\n<p>Then, write JavaScript to make the period buttons functional, using <code>zoomTo(period)<\/code>\u00a0to implement zooming into the target periods when buttons are clicked.<\/p>\n<pre><code class=\"javascript\">function zoomTo(period) {\r\n  switch (period) {\r\n    case \"kingdom\":\r\n      chart.zoomTo(Date.UTC(-755), Date.UTC(-505));\r\n      break\r\n    case \"republic\":\r\n      chart.zoomTo(Date.UTC(-515), Date.UTC(-20));\r\n      break\r\n    case \"empire\":\r\n      chart.zoomTo(Date.UTC(-40), Date.UTC(410));\r\n      break\r\n    case \"empires\":\r\n      chart.zoomTo(Date.UTC(380), Date.UTC(1460));\r\n      break\r\n  } \r\n};<\/code><\/pre>\n<p>Let\u2019s also add a button to reset the zoom level to fit the entire timeline within the chart, using <code>zoomOut()<\/code> with the <code>chart.fit()<\/code> method.<\/p>\n<pre><code class=\"html\">&lt;button id=\"zoom-out\" onclick=\"zoomOut()\"&gt;Zoom out&lt;\/button&gt;<\/code><\/pre>\n<pre><code class=\"javascript\">function zoomOut() {\r\n  chart.fit();  \r\n};<\/code><\/pre>\n<h3 id=\"add-era-designators\" style=\"padding-top: 80px; margin-top: -80px;\">3.6. Add Era Designators<\/h3>\n<p>In this step, we\u2019ll introduce era designators into our timeline chart. They will be appended to the years to indicate the era.<\/p>\n<p>AnyChart uses <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Localization\" target=\"_blank\" rel=\"nofollow\">locales<\/a> to manage date and time formats, including era designations such as \u201cBC\u201d (Before Christ) and \u201cAD\u201d (Anno Domini) or \u201cBCE\u201d (Before Common Era) and \u201cCE\u201d (Common Era), depending on the locale. You can <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Localization#tuning_a_locale\" target=\"_blank\" rel=\"nofollow\">modify the locale\u2019s format properties<\/a> to include era designators through a custom function placed outside the <code>anychart.onDocumentReady()<\/code> function.<\/p>\n<pre><code class=\"javascript\">function patchDateTimeLocale(){\r\n  \/\/ read the current output locale and create a structured clone of it\r\n  var currentOutputLocale =  structuredClone(anychart.format.locales[anychart.format.outputLocale()]);\r\n  \/\/ read the formats object to prepare for creating a custom version of the locale\r\n  var dateTimeLocaleFormats = currentOutputLocale.dateTimeLocale.formats;\r\n  \/\/ loop through all available format keys to find those related to the current scale\r\n  for (var format in dateTimeLocaleFormats){\r\n    \/\/ \"timeline_\" is the scale we are looking for\r\n    if (format.startsWith(\"timeline_\")){\r\n      \/\/ read and loop through an array of format values to insert an era designator\r\n      var formatValues = dateTimeLocaleFormats[format];\r\n      for (var i = 0; i &lt; formatValues.length; i++) {\r\n        \/\/ formats are usually represented by strings like \"yyyy\" or \"dd MMMM yy HH:mm.SSS\"\r\n        var formatValue = formatValues[i];\r\n        \/\/ there are two possible configurations of year representation inside a locale string \"yyyy\" and \"yy\"\r\n        \/\/ we need to find both versions or neither to correctly modify the locale string\r\n        var index4Y = formatValue.search(\/y{4}\/g)\r\n        var index2Y = formatValue.search(\/y{2}\/g)\r\n        \/\/ if there is a string representing a \"yyyy\" year, modify the format to include an era designator\r\n        if (index4Y &gt;= 0) {\r\n          \/*\r\n          Create a new string that includes everything before and after the index identified earlier.\r\n          The new string will include an era designator, but ensure the indexes are adjusted correctly,\r\n          as we want to insert the era designator after the part of the string that represents the year.\r\n          *\/\r\n          var formatValuePatched1 = formatValue.slice(0, index4Y) + \"y G\" + formatValue.slice(index4Y + 4);\r\n          formatValues[i] = formatValuePatched1;\r\n        \/\/ if there is a string representing a \"yy\" year, modify the format to include an era designator\r\n        } else if (index2Y &gt; -1) {\r\n          var formatValuePatched2 = formatValue.slice(0, index2Y + 1) + \"y G\" + formatValue.slice(index2Y + 3)\r\n          formatValues[i] = formatValuePatched2\r\n        }\r\n      }\r\n    }\r\n  }\r\n  \/\/ add the custom current output locale to AnyChart\r\n  anychart.format.locales[\"custom\"] = currentOutputLocale;\r\n  \/\/ set the custom locale as the active locale\r\n  anychart.format.outputLocale(\"custom\");\r\n};<\/code><\/pre>\n<p>Once the\u00a0locale\u00a0patching function is set, call it in the <code>anychart.onDocumentReady()<\/code> block. Make sure to put it before rendering the chart, so the timeline properly displays the era designators.<\/p>\n<pre><code class=\"javascript\">patchDateTimeLocale();<\/code><\/pre>\n<h3 id=\"set-font-for-axis-labels\" style=\"padding-top: 80px; margin-top: -80px;\">3.7. Set Font for Axis Labels<\/h3>\n<p>We\u2019ve already applied the Cinzel font to series <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#labels_and_tooltips\" target=\"_blank\" rel=\"nofollow\">labels and tooltips<\/a>. To maintain consistent typography throughout the timeline, we&#8217;ll also set the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart#axis\" target=\"_blank\" rel=\"nofollow\">axis<\/a> label font to match the overall design. Here\u2019s how to set it:<\/p>\n<pre><code class=\"javascript\">chart.axis().labels().fontFamily(\"Cinzel\");<\/code><\/pre>\n<h3 id=\"set-chart-title\" style=\"padding-top: 80px; margin-top: -80px;\">3.8. Set Chart Title<\/h3>\n<p>A <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Title\" target=\"_blank\" rel=\"nofollow\">title<\/a> helps users immediately understand what the chart represents. We can easily add a title using the <code>chart.title()<\/code> method:<\/p>\n<pre><code class=\"javascript\">chart.title({\r\n  text: \"Roman Civilization\",\r\n  fontFamily: \"Cinzel\",\r\n  fontSize: 32\r\n});<\/code><\/pre>\n<h3 id=\"set-container-and-draw-chart\" style=\"padding-top: 80px; margin-top: -80px;\">3.9. Set Container and Draw Chart<\/h3>\n<p>To display the chart, we need to link it to a container and then render it.<\/p>\n<p>The container is the <code>&lt;div&gt;<\/code> element with <code>id=\"container\"<\/code> that we created in the HTML.<\/p>\n<pre><code class=\"javascript\">chart.container(\"container\");<\/code><\/pre>\n<p>Finally, draw the chart.<\/p>\n<pre><code class=\"javascript\">chart.draw();<\/code><\/pre>\n<p>This command renders the entire timeline chart in the specified container on the page.<\/p>\n<h3 id=\"complete-javascript-timeline-code\" style=\"padding-top: 80px; margin-top: -80px;\">3.10. Complete JavaScript Timeline Code<\/h3>\n<p>Feel free to view the complete JavaScript code for the timeline chart on <a href=\"https:\/\/playground.anychart.com\/fX2uGiPK\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>. There, you can also download the entire project as an HTML file or ZIP archive.<\/p>\n<h2 id=\"css-styling\" style=\"padding-top: 80px; margin-top: -80px;\">Step 4. CSS Styling<\/h2>\n<p>Before viewing the final result, remember that CSS is essential for ensuring our page appears exactly how we want it. Let\u2019s apply CSS to style the entire web timeline visualization, making the project look clean, organized, and visually appealing.<\/p>\n<h3 id=\"style-html-body-container\" style=\"padding-top: 80px; margin-top: -80px;\">4.1. Style HTML, Body, Container<\/h3>\n<p>The following CSS ensures that the webpage and the chart container take up the full screen while maintaining a consistent layout. The container is positioned absolutely to cover the available space, ensuring the chart adjusts to fit the window properly.<\/p>\n<pre><code class=\"css\">html, body {\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#container {\r\n  position: absolute;\r\n  min-width: 1000px;\r\n  width: 100%;\r\n  top: 40px;\r\n  bottom: 0;\r\n}<\/code><\/pre>\n<h3 id=\"style-zoom-control-buttons\" style=\"padding-top: 80px; margin-top: -80px;\">4.2. Style Zoom Control Buttons<\/h3>\n<p>The following CSS styles the zoom control buttons, which are used to zoom in (and out) on specific periods of Roman history. The buttons are styled to look consistent with the Roman theme, using the \u201cCinzel\u201d font and a modern blue shade for hover effects.<\/p>\n<pre><code class=\"css\">#period-button, #zoom-out {\r\n  background-color: #bad5f1;\r\n  border: none;\r\n  padding: 5px 10px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  font-family: \"Cinzel\", serif;\r\n  margin-top: 5px;\r\n  margin-left: 5px;\r\n}\r\n\r\n#period-button:hover, #zoom-out:hover {\r\n  color: #fff;\r\n  background-color: #1976d2;\r\n}\r\n\r\n#zoom-out {\r\n  position: absolute;\r\n  right: 5px;\r\n}<\/code><\/pre>\n<h3 id=\"style-tooltips\" style=\"padding-top: 80px; margin-top: -80px;\">4.3. Style Tooltips<\/h3>\n<p>To make the tooltip content, including images and text, more visually appealing and legible, we apply styles to the images and paragraphs that appear inside the tooltips.<\/p>\n<pre><code class=\"css\">img {\r\n  max-width: 300px;\r\n  max-height: 300px;\r\n}\r\n\r\np {\r\n  font-family: \"Cinzel\", serif;\r\n  margin-top: 1px;\r\n  margin-bottom: 1px;\r\n}<\/code><\/pre>\n<h3 id=\"complete-css-code\" style=\"padding-top: 80px; margin-top: -80px;\">4.4. Complete CSS Code<\/h3>\n<p>Here\u2019s the complete CSS code that styles the container, buttons, and tooltip content.<\/p>\n<pre><code class=\"css\">html, body {\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#container {\r\n  position: absolute;\r\n  min-width: 1000px;\r\n  width: 100%;\r\n  top: 40px;\r\n  bottom: 0;\r\n}\r\n\r\n#period-button, #zoom-out {\r\n  background-color: #bad5f1;\r\n  border: none;\r\n  padding: 5px 10px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  font-family: \"Cinzel\", serif;\r\n  margin-top: 5px;\r\n  margin-left: 5px;\r\n}\r\n\r\n#period-button:hover, #zoom-out:hover {\r\n  color: #fff;\r\n  background-color: #1976d2;\r\n}\r\n\r\n#zoom-out {\r\n  position: absolute;\r\n  right: 5px;\r\n}\r\n\r\nimg {\r\n  max-width: 300px;\r\n  max-height: 300px;\r\n}\r\n\r\np {\r\n  font-family: \"Cinzel\", serif;\r\n  margin-top: 1px;\r\n  margin-bottom: 1px;\r\n}<\/code><\/pre>\n<h2 id=\"result-timeline-chart-of-roman-history\" style=\"padding-top: 80px; margin-top: -80px;\">Result: Timeline Chart of Roman History<\/h2>\n<p>After following all the steps, including setting up the environment, adding data, configuring the chart, and applying styling, we now have a fully functional, interactive Timeline Chart of Roman Civilization with zoom control, custom tooltips, and a visually consistent design. The timeline displays historical periods and events with detailed information, providing an immersive experience.<\/p>\n<p><a href=\"https:\/\/playground.anychart.com\/fX2uGiPK\" target=\"_blank\" rel=\"nofollow\">Check it out on AnyChart Playground<\/a> with the full source code, where you can also\u00a0tweak the settings, modify the data, and experiment with new features.<\/p>\n<p><a href=\"https:\/\/playground.anychart.com\/fX2uGiPK\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" class=\"alignnone size-full wp-image-18150\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline.png\" alt=\"Final JavaScript Timeline Chart of Roman Civilization History\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline.png 2048w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline-300x188.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline-768x480.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/09\/Roman-History-Timeline-1024x640.png 1024w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>Congratulations! We\u2019ve successfully created a detailed, interactive timeline chart of Roman history using JavaScript. We\u2019ve walked through everything from setting up the HTML structure, data, tooltips, zoom controls, and more. Hopefully, the steps were clear, and you\u2019re now ready to build your own timeline visualizations.<\/p>\n<p>Explore more examples in\u00a0our\u00a0<a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Timeline_Chart\/\" target=\"_blank\">timeline chart gallery<\/a> and dive into the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Timeline_Chart\" target=\"_blank\" rel=\"nofollow\">timeline chart documentation<\/a> to discover\u00a0other customization options and possibilities.<\/p>\n<p><strong>Happy JavaScript timeline charting!<\/strong><\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Ever caught yourself thinking about the Roman Empire more often than you\u2019d like to admit? You\u2019re not alone, and we\u2019ve got just the thing for you! With the recent AnyChart JS Charts 8.13.0 release, we\u2019ve enhanced our timeline chart for better support of historical data visualization. We\u2019d love to showcase this improvement in action. We\u2019ve [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,263,23,13,279,4],"tags":[3928,3951,3952,3944,53,3940,3840,3935,3173,260,265,3946,3953,1758,3149,284,3967,3959,3960,3942,3934,3956,282,471,266,620,1292,880,806,1759,3352,509,3710,3700,3969,195,294,257,2220,2838,54,1389,1760,2757,256,3377,1111,744,844,165,313,1370,3510,3864,133,774,775,3955,3963,3620,3614,3879,1498,3930,805,95,3855,3943,3938,3865,1889,3950,3949,2013,2014,32,55,3927,3403,167,146,3926,433,152,2949,3859,3405,3749,151,36,3925,907,141,249,3111,81,3931,57,3838,3939,1238,142,96,99,3404,3936,3947,3586,58,65,56,3929,101,3526,3109,2511,3429,3948,3965,957,218,3892,3937,3932,3630,3941,609,3099,960,959,3945,3414,3966,3875,3961,3962,3933,3957,3958,172,3430,807,808,832,954,3815,837,1524,610,3100,293,899,2816,1763,804,3407,3954,1184,996,1181,1182,3964,3968],"class_list":["post-18155","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-big-data","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-advanced-charting-with-javascript","tag-ancient-history","tag-ancient-rome","tag-ancient-rome-visualization","tag-anychart","tag-anychart-8-13-0","tag-anychart-api","tag-anychart-tutorial","tag-app-development","tag-best-data-visualization-examples","tag-big-data","tag-building-timeline-charts","tag-byzantine-empire","tag-chart-design","tag-chart-development","tag-chart-examples","tag-chart-navigation","tag-chart-tooltip","tag-chart-tooltips","tag-charting-library","tag-creating-timeline-charts","tag-css","tag-data","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-chart","tag-data-charting","tag-data-charts","tag-data-design","tag-data-graphic","tag-data-graphics","tag-data-insights","tag-data-literacy","tag-data-loading","tag-data-over-time","tag-data-science","tag-data-stories","tag-data-visual","tag-data-visualisation","tag-data-visualization","tag-data-visualization-best-pracices","tag-data-visualization-design","tag-data-visualization-development","tag-data-visualization-examples","tag-data-visualization-guide","tag-data-visualization-practice","tag-data-visualization-techniques","tag-data-visualization-tutorial","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-data-driven-stories","tag-data-driven-storytelling","tag-dataviz","tag-dataviz-examples","tag-dataviz-projects","tag-eastern-roman-empire","tag-era-designator","tag-event-listeners","tag-event-markers","tag-events-visualization","tag-example","tag-front-end-charting-guide","tag-front-end-development","tag-graphics-library","tag-historical-data-visualization","tag-historical-events-visualization","tag-historical-timeline","tag-historical-timelines","tag-history","tag-history-of-rome","tag-how-often-do-you-think-about-the-roman-empire","tag-html","tag-html-charts","tag-html5","tag-html5-charts","tag-html5-charts-tutorial","tag-html5-timeline","tag-interactive-charts","tag-interactive-data-visualization","tag-interactive-data-visualization-tutorial","tag-interactive-graphics","tag-interactive-infographic","tag-interactive-infographics","tag-interactive-timeline","tag-interactive-timeline-chart","tag-interactive-visualization","tag-interactive-visualizations","tag-javascript","tag-javascript-chart-customization","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-features","tag-javascript-charting-library","tag-javascript-charting-tutorial","tag-javascript-charts","tag-javascript-data-display","tag-javascript-data-visualization","tag-javascript-graph","tag-javascript-graphics","tag-javascript-graphics-library","tag-javascript-library","tag-javascript-timeline","tag-javascript-timeline-chart","tag-javascript-visualization-tutorial","tag-js","tag-js-chart","tag-js-charting","tag-js-charts","tag-js-data-visualizations","tag-js-graphics","tag-js-library","tag-js-library-update","tag-js-timeline","tag-memes","tag-my-roman-empire","tag-navigation","tag-network-graph","tag-range-chart","tag-research-driven-storytelling","tag-roman-empire","tag-roman-history","tag-software-development","tag-step-by-step-tutorial","tag-storytelling","tag-storytelling-examples","tag-timeline","tag-timeline-chart","tag-timeline-chart-tutorial","tag-timeline-graph","tag-timeline-navigation","tag-timeline-of-events","tag-timeline-tooltip","tag-timeline-tooltips","tag-timeline-visualization","tag-tooltip","tag-tooltips","tag-tutorial","tag-viral-memes","tag-visual-analysis","tag-visual-analytics","tag-visual-data","tag-visual-data-analytics","tag-visual-data-insights","tag-visual-stories","tag-visual-story","tag-visual-storytelling","tag-visual-storytelling-examples","tag-visualization","tag-visualizations","tag-web-design","tag-web-developers","tag-web-development","tag-website-development","tag-western-roman-empire","tag-wikidata-data","tag-wikipedia","tag-wikipedia-data","tag-wikipedia-data-visualization","tag-zoom-controls","tag-zoom-levels","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Timeline Chart of Your Own Roman Empire with JavaScript<\/title>\n<meta name=\"description\" content=\"Learn to build an interactive timeline chart of Roman history in JavaScript with this detailed tutorial, from setup to adding data &amp; advanced customization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Timeline of Roman History Using JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn to build an interactive Roman History Timeline chart in JavaScript with this detailed tutorial, from setup to adding data &amp; advanced customization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-03T21:59:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-10T14:14:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-og.png\" \/>\n<meta name=\"author\" content=\"AnyChart Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Create Timeline of Roman History in JS\" \/>\n<meta name=\"twitter:description\" content=\"Learn to build an interactive Roman History Timeline chart in JavaScript with this detailed tutorial, from setup to adding data &amp; advanced customization.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-og.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"AnyChart Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\"},\"author\":{\"name\":\"AnyChart Team\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\"},\"headline\":\"Creating Timeline Chart of Roman History Using JavaScript\",\"datePublished\":\"2024-10-03T21:59:21+00:00\",\"dateModified\":\"2024-10-10T14:14:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\"},\"wordCount\":2503,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png\",\"keywords\":[\"advanced charting with JavaScript\",\"ancient history\",\"Ancient Rome\",\"ancient Rome visualization\",\"AnyChart\",\"AnyChart 8.13.0\",\"AnyChart API\",\"AnyChart tutorial\",\"app development\",\"best data visualization examples\",\"big data\",\"building timeline charts\",\"Byzantine Empire\",\"chart design\",\"chart development\",\"chart examples\",\"chart navigation\",\"chart tooltip\",\"chart tooltips\",\"charting library\",\"creating timeline charts\",\"CSS\",\"data\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"data chart\",\"data charting\",\"data charts\",\"data design\",\"data graphic\",\"data graphics\",\"data insights\",\"data literacy\",\"data loading\",\"data over time\",\"data science\",\"data stories\",\"data visual\",\"data visualisation\",\"Data Visualization\",\"data visualization best practices\",\"data visualization design\",\"data visualization development\",\"data visualization examples\",\"data visualization guide\",\"data visualization practice\",\"data visualization techniques\",\"data visualization tutorial\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"data-driven stories\",\"data-driven storytelling\",\"dataviz\",\"dataviz examples\",\"dataviz projects\",\"Eastern Roman Empire\",\"era designator\",\"event listeners\",\"event markers\",\"events visualization\",\"example\",\"front-end charting guide\",\"front-end development\",\"graphics library\",\"historical data visualization\",\"historical events visualization\",\"historical timeline\",\"historical timelines\",\"history\",\"History of Rome\",\"How often do you think about the Roman empire?\",\"HTML\",\"HTML charts\",\"HTML5\",\"html5 charts\",\"HTML5 charts tutorial\",\"html5 timeline\",\"interactive charts\",\"interactive data visualization\",\"interactive data visualization tutorial\",\"interactive graphics\",\"interactive infographic\",\"interactive infographics\",\"interactive timeline\",\"interactive timeline chart\",\"interactive visualization\",\"interactive visualizations\",\"JavaScript\",\"JavaScript chart customization\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting features\",\"JavaScript charting library\",\"JavaScript charting tutorial\",\"javascript charts\",\"JavaScript data display\",\"JavaScript data visualization\",\"javascript graph\",\"javascript graphics\",\"JavaScript graphics library\",\"JavaScript library\",\"javascript timeline\",\"JavaScript timeline chart\",\"JavaScript visualization tutorial\",\"js\",\"js chart\",\"js charting\",\"js charts\",\"js data visualizations\",\"JS graphics\",\"js library\",\"JS library update\",\"js timeline\",\"memes\",\"My Roman Empire\",\"navigation\",\"network graph\",\"range chart\",\"research-driven storytelling\",\"Roman Empire\",\"Roman history\",\"software development\",\"step-by-step tutorial\",\"storytelling\",\"storytelling examples\",\"timeline\",\"timeline chart\",\"timeline chart tutorial\",\"timeline graph\",\"timeline navigation\",\"timeline of events\",\"timeline tooltip\",\"timeline tooltips\",\"timeline visualization\",\"tooltip\",\"tooltips\",\"tutorial\",\"viral memes\",\"visual analysis\",\"visual analytics\",\"visual data\",\"visual data analytics\",\"visual data insights\",\"visual stories\",\"visual story\",\"visual storytelling\",\"visual storytelling examples\",\"visualization\",\"visualizations\",\"web design\",\"web developers\",\"web development\",\"website development\",\"Western Roman Empire\",\"Wikidata data\",\"wikipedia\",\"Wikipedia data\",\"Wikipedia data visualization\",\"zoom controls\",\"zoom levels\"],\"articleSection\":[\"AnyChart Charting Component\",\"Big Data\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\",\"name\":\"Create Timeline Chart of Your Own Roman Empire with JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png\",\"datePublished\":\"2024-10-03T21:59:21+00:00\",\"dateModified\":\"2024-10-10T14:14:18+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\"},\"description\":\"Learn to build an interactive timeline chart of Roman history in JavaScript with this detailed tutorial, from setup to adding data & advanced customization.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png\",\"width\":1200,\"height\":686},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Timeline Chart of Roman History Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\",\"name\":\"AnyChart Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g\",\"caption\":\"AnyChart Team\"},\"sameAs\":[\"https:\/\/www.anychart.com\"],\"url\":\"https:\/\/www.anychart.com\/blog\/author\/andrey-khachaturov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Timeline Chart of Your Own Roman Empire with JavaScript","description":"Learn to build an interactive timeline chart of Roman history in JavaScript with this detailed tutorial, from setup to adding data & advanced customization.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create Timeline of Roman History Using JavaScript","og_description":"Learn to build an interactive Roman History Timeline chart in JavaScript with this detailed tutorial, from setup to adding data & advanced customization.","og_url":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2024-10-03T21:59:21+00:00","article_modified_time":"2024-10-10T14:14:18+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-og.png","type":"","width":"","height":""}],"author":"AnyChart Team","twitter_card":"summary_large_image","twitter_title":"Create Timeline of Roman History in JS","twitter_description":"Learn to build an interactive Roman History Timeline chart in JavaScript with this detailed tutorial, from setup to adding data & advanced customization.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial-og.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"AnyChart Team","Est. reading time":"26 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/"},"author":{"name":"AnyChart Team","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b"},"headline":"Creating Timeline Chart of Roman History Using JavaScript","datePublished":"2024-10-03T21:59:21+00:00","dateModified":"2024-10-10T14:14:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/"},"wordCount":2503,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png","keywords":["advanced charting with JavaScript","ancient history","Ancient Rome","ancient Rome visualization","AnyChart","AnyChart 8.13.0","AnyChart API","AnyChart tutorial","app development","best data visualization examples","big data","building timeline charts","Byzantine Empire","chart design","chart development","chart examples","chart navigation","chart tooltip","chart tooltips","charting library","creating timeline charts","CSS","data","data analysis","data analytics","data analytics examples","data chart","data charting","data charts","data design","data graphic","data graphics","data insights","data literacy","data loading","data over time","data science","data stories","data visual","data visualisation","Data Visualization","data visualization best practices","data visualization design","data visualization development","data visualization examples","data visualization guide","data visualization practice","data visualization techniques","data visualization tutorial","data visualizations","data visuals","data viz examples","data-driven stories","data-driven storytelling","dataviz","dataviz examples","dataviz projects","Eastern Roman Empire","era designator","event listeners","event markers","events visualization","example","front-end charting guide","front-end development","graphics library","historical data visualization","historical events visualization","historical timeline","historical timelines","history","History of Rome","How often do you think about the Roman empire?","HTML","HTML charts","HTML5","html5 charts","HTML5 charts tutorial","html5 timeline","interactive charts","interactive data visualization","interactive data visualization tutorial","interactive graphics","interactive infographic","interactive infographics","interactive timeline","interactive timeline chart","interactive visualization","interactive visualizations","JavaScript","JavaScript chart customization","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting features","JavaScript charting library","JavaScript charting tutorial","javascript charts","JavaScript data display","JavaScript data visualization","javascript graph","javascript graphics","JavaScript graphics library","JavaScript library","javascript timeline","JavaScript timeline chart","JavaScript visualization tutorial","js","js chart","js charting","js charts","js data visualizations","JS graphics","js library","JS library update","js timeline","memes","My Roman Empire","navigation","network graph","range chart","research-driven storytelling","Roman Empire","Roman history","software development","step-by-step tutorial","storytelling","storytelling examples","timeline","timeline chart","timeline chart tutorial","timeline graph","timeline navigation","timeline of events","timeline tooltip","timeline tooltips","timeline visualization","tooltip","tooltips","tutorial","viral memes","visual analysis","visual analytics","visual data","visual data analytics","visual data insights","visual stories","visual story","visual storytelling","visual storytelling examples","visualization","visualizations","web design","web developers","web development","website development","Western Roman Empire","Wikidata data","wikipedia","Wikipedia data","Wikipedia data visualization","zoom controls","zoom levels"],"articleSection":["AnyChart Charting Component","Big Data","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/","url":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/","name":"Create Timeline Chart of Your Own Roman Empire with JavaScript","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png","datePublished":"2024-10-03T21:59:21+00:00","dateModified":"2024-10-10T14:14:18+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b"},"description":"Learn to build an interactive timeline chart of Roman history in JavaScript with this detailed tutorial, from setup to adding data & advanced customization.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2024\/10\/roman-timeline-js-tutorial.png","width":1200,"height":686},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2024\/10\/03\/roman-timeline-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Timeline Chart of Roman History Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b","name":"AnyChart Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g","caption":"AnyChart Team"},"sameAs":["https:\/\/www.anychart.com"],"url":"https:\/\/www.anychart.com\/blog\/author\/andrey-khachaturov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/18155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=18155"}],"version-history":[{"count":51,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/18155\/revisions"}],"predecessor-version":[{"id":18288,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/18155\/revisions\/18288"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=18155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=18155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=18155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}