Histropedia Sheets Help

Interactive timelines from Google Sheets

Use this guide to build your timeline spreadsheet, publish it, and generate a timeline URL that works. The examples below match the features currently available in Histropedia Sheets.

If you get stuck, email [email protected].

Contents

1) Quick start

  1. Make a copy of the template spreadsheet: Copy sample spreadsheet (or create your own Google Sheet).
  2. Set sharing to Anyone with the link and access Viewer: Share -> General access -> Anyone with the link -> Viewer.
  3. Build a timeline URL using your spreadsheet ID: 
    https://js.histropedia.com/sheets/index.html?id=YOUR_SPREADSHEET_ID
  4. Open the URL and confirm it loads.
  5. Replace sample rows with your own events and refresh the timeline URL.

Tip: Renaming the first sheet tab changes the timeline title (if no separate Info Page row is provided).

2) Spreadsheet structure

The first row is your header row. Headings are case-insensitive.

Recommended event headings

Heading Required? Purpose
start year Yes Start year for the event. This is the key required field in modern format.
start month, start day No Optional finer date precision (defaults to 1 if omitted).
start precision No day, month, year, decade, century (or numeric 11..7).
end year No End year. Use present for ongoing events.
end month, end day, end precision No Optional end-date precision.
title Strongly recommended Main event title and timeline search text.
subtitle No Secondary label for event cards.
description No Short description in summary/preview panels.
rank No Higher rank events get priority visibility when zoomed out.
image No Public image URL for event card/preview.
wikipedia No Wikipedia URL for the Wikipedia content tab.
starred No Optional metadata field used by the app.
type No Row type. Default is event. See special rows below.

Legacy date format (still supported)

You can use start and end instead of the separate date component columns. In legacy format, start replaces start year, start month, start day, and start precision; end replaces end year, end month, end day, and end precision, with values like 1999, 1999-07, 1999-07-16, or BCE values like -300.

3) Date formats and precision

4) Related content tabs

Add any of these headings to create content tabs per event row:

Heading pattern What to put in cells Result
summary or summary/My Label Plain text or HTML Summary tab content. summary/My Label renames the tab.
wikipedia Wikipedia article URL Wikipedia tab loads a mobile-compatible page.
youtube Search phrase, or YouTube URLs separated by | YouTube search results, or manual video list.
url/Tab Name Embeddable web URL Creates a custom iframe tab called Tab Name.

Note: some websites block iframe embedding. If that happens, include a normal external link in your Summary content instead.

5) Filters and legend (colour code)

Create filterable/categorised properties using headers that start with filter/. 

filter/Type of work
filter/Location
filter/Movement

For each event row, put the value in that column (for multiple values use |, for example Chemist|Teacher|Politician).

You can enable these filter/ properties in two ways:

6) Type column values

Use the type column when a row is not a standard event row. If type is blank, the row is treated as a normal event.

type value Required cells What it does
configuration start year (or legacy start) must contain valid JSON Applies timeline settings from JSON. See 8) Configuration options for supported keys and examples.
info page title is recommended; subtitle, description, and image are optional Sets the timeline intro panel content. When present, this title is also used as the page title. Use infoPage.autoOpen in configuration to open it automatically on load.
background image start year (or legacy start) with one or more public image URLs separated by new lines Adds a background image slideshow behind the timeline.
time band title, start date columns, and optional end date columns Adds a styled time range band to the timeline background. Time bands support both a start date and an optional end date (including present).

Tip: for background image, put each image URL on a new line in the same cell. The first image loads first, and if multiple URLs are provided, they rotate automatically.

7) Timeline URL options

Essential

https://js.histropedia.com/sheets/index.html?id=YOUR_SPREADSHEET_ID

Common optional parameters

If you can edit the sheet, use a configuration row for these settings where possible. That lets you update behaviour without changing and redistributing the timeline URL.

Parameter Example Purpose
colorCode colorCode=Type of work|Movement Enable legend categories from filter/... columns.
filter filter=Type of work|Location Enable filter categories from filter/... columns.
density density=medium Set event density (for example low, medium, high, or all). all shows all events without hiding lower-rank items.

8) Configuration options

Add a row with type=configuration, then paste JSON into the start year cell (or the legacy start cell if your sheet uses legacy date columns). Use this to control timeline behaviour from the spreadsheet instead of URL parameters.

Example configuration JSON

{
  "colorCode": {
    "customColors": {
      "Italian Renaissance": "#00859a",
      "High Renaissance": "purple",
      "Early Renaissance": "rgb(120,75,50)"
    },
    "colors": [
      "#151f71", "#860d00", "#004e06",
      "#78006c", "#825b00", "#006c7a"
    ],
    "noValueColor": "#111"
  },
  "infoPage": {
    "autoOpen": true
  },
  "timeBand": {
    "colors": ["#2d5a88", "#3f7cae", "#5a9bc8"]
  }
}

Option descriptions

Option Type Description
colorCode.customColors Object map Assigns specific colours to named legend/filter values. Key = category value, value = CSS colour.
colorCode.colors Array of strings Fallback colour sequence used for values not listed in customColors.
colorCode.noValueColor String Colour for events that have no value for the currently selected colour-code property.
infoPage.autoOpen Boolean If true, the Info panel opens automatically when the timeline loads.
timeBand.colors Array of strings Colours applied to time bands in chronological order; colours repeat if there are more bands than colours.

9) Troubleshooting