html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

#container {

  position: absolute;

  min-width: 1000px;

  width: 100%;

  top: 40px;

  bottom: 0;

}

​

.zoom-button {

  background-color: #bad5f1;

  border: none;

  padding: 5px 10px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  font-family: "Cinzel", serif;

  margin-top: 5px;

  margin-left: 5px;

}

​

.zoom-button:hover {

  color: #fff;

  background-color: #1976d2;

}

​

.zoom-button:last-of-type {

  position: absolute;

  right: 5px;

}

​

img {

  max-width: 300px;

  max-height: 300px;

}

​

p {

  font-family: "Cinzel", serif;

  margin-top: 1px;

  margin-bottom: 1px;

}

// ES3 polyfill for structuredClone

if (typeof structuredClone !== 'function') {

  structuredClone = function(obj) { // eslint-disable-line no-undef

    function clone(obj) {

      var copy;

​

      // Handle the 3 simple types, and null or undefined

      if (obj === null || typeof obj !== 'object') return obj;

​

      // Handle Date

      if (obj instanceof Date) {

        copy = new Date();

        copy.setTime(obj.getTime());

        return copy;

      }

​

      // Handle Array

      if (obj instanceof Array) {

        copy = [];

        for (var i = 0, len = obj.length; i < len; i++) {

          copy[i] = clone(obj[i]);

        }

        return copy;

      }

​

      // Handle Object

      if (obj instanceof Object) {

        copy = {};

        for (var attr in obj) {

          if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);

        }

        return copy;

      }

​

      throw new Error('Unable to copy obj! Its type isn\'t supported.');

    }

​

    return clone(obj);

  };

}

​

// Create a chart variable here to be accessible from various places in the script

var chart;

​

// Ensure the main charting code runs after the page has loaded with all external resources

anychart.onDocumentReady(function () {

  // Create a timeline chart

  chart = anychart.timeline();

  var tooltip;

​

  // Set the minimum and maximum dates of the timeline scale

  chart.scale().minimum(Date.UTC(-1000));

  chart.scale().maximum(Date.UTC(1500));

​

  // Set the chart's data

  // loadData function is defined in

  // https://cdn.anychart.com/samples-data/timeline-charts/roman-history-timeline/data.js

  var data = loadData(); // eslint-disable-line no-undef

​

  // 1) Set the range series for periods (e.g., rulers, empires)

  for (var i = 0; i < data.periods.length; i++) {

    var period = data.periods[i];

    var range = chart.range(period.ranges);

    range.name(period.name);

    range.direction(period.direction);

    range.labels().fontFamily('Cinzel');

    // Customize the range series tooltip:

    tooltip = range.tooltip();

    // enable HTML in the tooltip

    tooltip.useHtml(true);

    // format the tooltip content

    tooltip.format(function() {

      var img = this.getData('img');

      var description = this.getData('description');

      return '<center><img src=\'' + img + '\'/></center><p style=\'max-width: 250px;\'>' + description + '</p>';

    });

    // disable the tooltip separator

    tooltip.separator(false);

    // enable HTML in the tooltip header

    tooltip.title().useHtml(true);

    // format the tooltip header

    tooltip.titleFormat(function() {

      // use the anychart.format.dateTime() method to format the dates

      var start = anychart.format.dateTime(this.start, 'y G');

      var end = anychart.format.dateTime(this.end, 'y G');

      return '<p>' + this.x + ' (' + start + ' – ' + end + ')</p>';

    });

  }

​

  // 2) Set the moment series for events (e.g., battles, establishment of states)

  for (var j = 0; j < data.events.length; j++) {

    var event = data.events[j];

    var moment = chart.moment(event.moments);

    moment.name(event.name);

    moment.direction(event.direction);

    moment.labels().fontFamily('Cinzel');

    // Configure the moment series tooltip:

    tooltip = moment.tooltip();

    // enable HTML in the tooltip

    tooltip.useHtml(true);

    // format the tooltip content

    tooltip.format(function() {

      var img = this.getData('img');

      var description = this.getData('description');

      return '<center><img src=\'' + img + '\'/></center><p style= \'max-width: 250px;\'>' + description + '</p>';

    });

    // disable the tooltip separator

    tooltip.separator(false);

    // enable HTML in the tooltip header

    tooltip.title().useHtml(true);

    // format the tooltip header

    tooltip.titleFormat(function() {

      var x = new Date(this.x);

      // use the anychart.format.dateTime() method for date formatting

      var formatted = anychart.format.dateTime(x, 'y G');

      return '<p>' + this.value + ', ' + formatted + '</p>';

    });

  }

​

  // Enable the scroller for better navigation of the timeline

  chart.scroller(true);

​

  // Add an event listener to zoom into an element when it's clicked:

  chart.listen('pointClick', function(e) {

    var start, end, gap;

    // check if the clicked element is a moment or a period

    var type = e.series.getType();

    // configure the behavior for moments

    if (type === 'moment') {

      var momentDate =  e.point.get('x');

      // zoom into the moment, showing 50 years before and after it

      start = momentDate;

      end = momentDate;

      // 50 years in milliseconds

      gap = 1577880000000;

    } else { // for periods (non-moment elements)

      // zoom into the period, showing 10% of its length before its start and after its end

      start = e.point.get('start');

      end = e.point.get('end');

      gap = (end - start) / 10;

    }

    // zoom into the element when it's clicked

    chart.zoomTo(start - gap, end + gap);

  });

​

  // Patch the zoom levels since we're working with years and centuries (see lines 1745-1775)

  chart.scale().zoomLevels(patchedZoomLevels());

​

  // Disable the selection functionality to allow click tracking for zooming

  chart.interactivity().selectionMode('none');

​

  // Call the custom locale-altering function before the chart creation

  // to tweak the locale to work with AD and BC (era designators) - see lines 1694-1743

  patchDateTimeLocale();

​

  // Customize the font of the axis labels

  chart.axis().labels().fontFamily('Cinzel');

​

  // Configure the chart's title

  chart.title({

    text: 'Roman Civilization',

    fontFamily: 'Cinzel',

    fontSize: 32

  });

​

  // Specify the chart container element by its id

  chart.container('container');

​

  // Draw the chart

  chart.draw();

​

});

​

// Function to zoom into the target period when a button is clicked

function zoomTo(period) {

  switch (period) {

    case 'kingdom':

      chart.zoomTo(Date.UTC(-755), Date.UTC(-505));

      break;

    case 'republic':

      chart.zoomTo(Date.UTC(-515), Date.UTC(-20));

      break;

    case 'empire':

      chart.zoomTo(Date.UTC(-40), Date.UTC(410));

      break;

    case 'empires':

      chart.zoomTo(Date.UTC(380), Date.UTC(1460));

      break;

    default:

      console.log('Invalid period');

  }

}

​

// Function to zoom out, fitting the chart to the container

function zoomOut() {

  chart.fit();

}

​

​

/*

  There is a locale mechanism in AnyChart, which is described at https://docs.anychart.com/Common_Settings/Localization.

  A sample locale can be seen here: https://cdn.anychart.com/releases/v8/locales/en-gb.js.

  There is a block of keys that start with timeline_, which are used when the level of zoom changes.

  To show Era designators, we can edit a locale's format property.

  The era designator is also a property. In some locales, it is "AD" (Anno Domini) and "BC" (Before Christ),

  while in others, it is "BCE" (Before Common Era) and "CE" (Common Era).

*/

​

// Custom function to modify locale formats to include an era designator:

function patchDateTimeLocale() {

  // read the current output locale and create a structured clone of it

  var currentOutputLocale =  structuredClone(anychart.format.locales[anychart.format.outputLocale()]); // eslint-disable-line no-undef

  // read the format object to prepare for creating a custom version of the locale

  var dateTimeLocaleFormats = currentOutputLocale.dateTimeLocale.formats;

  // loop through all available format keys to find those related to the current scale

  for (var format in dateTimeLocaleFormats) {

    // "timeline_" is the scale we are looking for

    if (format.startsWith('timeline_')) {

      // read and loop through an array of format values to insert an era designator

      var formatValues = dateTimeLocaleFormats[format];

      for (var i = 0; i < formatValues.length; i++) {

        // formats are usually represented by strings like "yyyy" or "dd MMMM yy HH:mm.SSS"

        var formatValue = formatValues[i];

        // there are two possible configurations of year representation inside a locale string "yyyy" and "yy"

        // we need to find both versions or neither to correctly modify the locale string

        var index4Y = formatValue.search(/y{4}/g);

        var index2Y = formatValue.search(/y{2}/g);

        // if there is a string representing a "yyyy" year, modify the format to include an era designator

        if (index4Y >= 0) {

          /*

            Create a new string that includes everything before and after the index identified earlier.

            The new string will include an era designator, but ensure the indexes are adjusted correctly,

            as we want to insert the era designator after the part of the string that represents the year.

          */

          var formatValuePatched4Y = formatValue.slice(0, index4Y) + 'y G' + formatValue.slice(index4Y + 4);

          formatValues[i] = formatValuePatched4Y;

          // if there is a string representing a "yy" year, modify the format to include an era designator

        } else if (index2Y > -1) {

          var formatValuePatched2Y = formatValue.slice(0, index2Y + 1) + 'y G' + formatValue.slice(index2Y + 3);

          formatValues[i] = formatValuePatched2Y;

        }

      }

    }

  }

  // add the custom current output locale to AnyChart

  anychart.format.locales['custom'] = currentOutputLocale;

  // set the custom locale as the active locale

  anychart.format.outputLocale('custom');

}

​

// Function to patch the zoom levels on the timeline scale

function patchedZoomLevels() {

  var customZoomLevels = [

    [

      {'unit': 'month', 'count': 1},

      {'unit': 'quarter', 'count': 1},

      {'unit': 'year', 'count': 1}

    ],

    [

      {'unit': 'quarter', 'count': 1},

      {'unit': 'year', 'count': 1},

      {'unit': 'year', 'count': 10}

    ],

    [

      {'unit': 'year', 'count': 1},

      {'unit': 'year', 'count': 10},

      {'unit': 'year', 'count': 50}

    ],

    [

      {'unit': 'year', 'count': 10},

      {'unit': 'year', 'count': 50},

      {'unit': 'year', 'count': 100}

    ],

    [

      {'unit': 'year', 'count': 50},

      {'unit': 'year', 'count': 100},

      {'unit': 'year', 'count': 500}

    ]

  ];

  return customZoomLevels;

}

​

// Add event listeners for zoom buttons

var zoomButtons = document.getElementsByClassName('zoom-button');

Array.from(zoomButtons).forEach(function (button) {

  button.addEventListener('click', function() {

    var zoomLevel = this.dataset.zoomLevel;

    switch (zoomLevel) {

      case 'out':

        zoomOut();

        break;

      default:

        zoomTo(zoomLevel);

    }

  });

});