Timeline Chart in Javascript

Tom Van Vleck

Here is a script that I wrote to display time line charts for multicians.org. I use it on history.html, b2.html, and phx.html. Its output looks like this:

Creating a Timeline Chart

Copy the JavaScript file timelinecanvas.js to a directory like "js" in your web space.

Load the JavaScript File

Insert a line in the HEAD section of your page like so:

<script src="js/timelinecanvas.js"></script>

Define the CANVAS

To create a chart, insert a declaration of an HTML canvas element, which contains an IMG tag that will be displayed if JavaScript is off or does not support graphics.

<!-- see https://multicians.org/timeline-js.html -->
<canvas id="canvas2" width="550" height="200" title="Multics History Timeline" class="tline">
<div class="tline" style="width: 577px;"><img src="mulimg/m-timeline.png"
  width="577" height="115" border="0" alt="Multics timeline 1965-2014" title=""></div>
</canvas>

Specify the Timeline Elements

Then, insert an invisible table with the parameters for the timeline. Make the table invisible by setting its display property to none.

<table id="mydata2" class="datatable">
  <tr><th>TYPE</th><th>YEAR</th><th>LSTYLE</th><th>HEIGHT</th><th>TEXT</th><th>TSTYLE</th></tr>
  <!-- back, fyear, color, lyear, text, textstyle -->
  <tr><td>back</td><td>1961</td><td>#dddddd</td><td>1966</td><td>7094</td><td></td></tr>
  <tr><td>back</td><td>1966</td><td>#ddddff</td><td>1973</td><td>GE 645</td><td></td></tr>
  <tr><td>back</td><td>1973</td><td>#ffdddd</td><td>1978</td><td>H 6180</td><td></td></tr>
  <tr><td>back</td><td>1978</td><td>#ddffdd</td><td>1982</td><td>L 68</td><td></td></tr>
  <tr><td>back</td><td>1982</td><td>#ddffff</td><td>1987</td><td>DPS-8/M</td><td></td></tr>
  <tr><td>back</td><td>1987</td><td>#eeeeee</td><td>2000</td><td>endgame</td><td></td></tr>
  <!-- axis, horizontalpos, -, -, -, textstyle -->
  <tr><td>axis</td><td>1960</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>1965</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>1975</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>1985</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>1995</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>2000</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>2010</td><td></td><td></td><td></td><td></td></tr>
  <tr><td>axis</td><td>2020</td><td></td><td></td><td></td><td></td></tr>
  <!-- data, horizontalpos, color, vertical, text, textstyle -->
  <tr><td>data</td><td>1961</td><td></td><td>1</td><td>(CTSS)</td><td>italic 9pt serif</td></tr>
  <tr><td>data</td><td>1965</td><td></td><td>2</td><td>FJCC|Papers</td><td></td></tr>
  <tr><td>data</td><td>1968</td><td></td><td>4</td><td>system|up</td><td></td></tr>
  <tr><td>data</td><td>1970</td><td></td><td>6</td><td>Honeywell</td><td></td></tr>
  <tr><td>data</td><td>1972</td><td></td><td>1</td><td>6180</td><td></td></tr>
  <tr><td>data</td><td>1973</td><td></td><td>2</td><td>AFDSC</td><td></td></tr>
  <tr><td>data</td><td>1976</td><td></td><td>3</td><td>NSS, AIM</td><td></td></tr>
  <tr><td>data</td><td>1978</td><td></td><td>4</td><td>Guardian</td><td></td></tr>
  <tr><td>data</td><td>1985</td><td></td><td>1</td><td>B2</td><td></td></tr>
  <tr><td>data</td><td>1986</td><td></td><td>2</td><td>System|canceled</td><td></td></tr>
  <tr><td>data</td><td>1998</td><td></td><td>1</td><td>DOCKMASTER|shut down</td><td></td></tr>
  <tr><td>data</td><td>2000</td><td></td><td>3</td><td>DND-H|shut down|(last site)</td><td></td></tr>
  <tr><td>data</td><td>2007</td><td></td><td>1</td><td>Open|Source|by|Bull</td><td></td></tr>
  <tr><td>data</td><td>2014</td><td></td><td>2</td><td>Multics|Simulator</td><td></td></tr>
</table>

Call the timelinecanvas() Function

Then, call the JavaScript function with four parameters:

1. The ID tag for the canvas element.
2. The ID tag for the data table.
3. The background color for the timeline chart, in hex, rgb(), or as a color name.
4. The bar color for the timeline chart, in hex, rgb(), or as a color name.

<script>timelinecanvas('mydata2','canvas2','white', 'red');</script>

(Each ID tag should be unique in your HTML page.)

Definition of the Data to Display

The timeline chart displays a horizontal axis arrow representing a span of of years. Events that occurred in a specific year are indicated by vertical arrows and a text explanation.

There are three kinds of rows in the data table, defining the background, the timeline axis, and the events on the timeline. Every row has the same basic definitions:

  <tr><th>TYPE</th><th>YEAR</th><th>LSTYLE</th><th>HEIGHT</th><th>TEXT</th><th>TSTYLE</th></tr>

Background Definitions (TYPE="back")

The chart background will be the basic color specified in the third argument to the call to timelinecanvas(). Optinally, the web page may specify blocks of years to be displayed as a different color, and with a legend. Rows with a TYPE of back define properties of the background. For example,

  <tr><td>back</td><td>1961</td><td>#dddddd</td><td>1966</td><td>7094</td><td>7pt sans-serif</td></tr>

Rows of a TYPE of back specify the color of the background region in hex (LSTYLE), the starting and ending year (YEAR and HEIGHT), and a text legend (TEXT) displayed in black at the bottom. The style of the text can be specified in TSTYLE: if it is not, the default is bold 7pt sans-serif. No back rows are needed.

Axis Definitions (TYPE="axis")

Rows with a TYPE of "axis" define year legends for the axis. For example,

  <tr><td>axis</td><td>1960</td><td></td><td></td><td></td><td>italic 9pt bold</td></tr>

The axis rows specify the years to indicate on the top row of the chart (YEAR). They need not be uniformly spaced. They should be in ascending order. A date style can be specified in TSTYLE: if not specified it is bold 9pt sans-serif.

Event Definitions (TYPE="data")

Rows with a TYPE of data define date events to be shown on the timeline. For example,

  <tr><td>data</td><td>1961</td><td></td><td>1</td><td>(CTSS)</td><td>italic 9pt serif</td></tr>

The data rows specify the year of the event (YEAR), the line style for the vertical bar as a color, default 'gray' (LSTYLE), the length and direction of the vertical bar (HEIGHT), the text identifying the event (TEXT), and the CSS text style for the event text (TSTYLE).

Vertical bar characters in the event text are translated to newlines.

If the length of an event's bar is positive, then the event is shown below the axis, with an ascending arrow. If the length of an event's bar is negative, then the event is shown above the axis, with a descending arrow. Event bar lengths are specified as -3, -2, -1, 1, 2, 3, ... each corresponding to about 20 pixels.

When specifying a chart, you will want to choose different heights for adjacent events, so that the text explanations of different events don't overlap. (You will probably need to fiddle with this to make it look nice.)

The default text style for events is 9pt serif.

High DPI Displays

timelinecanvas() handles "High DPI" displays. If your display has more than 96 device pixels per inch, the function draws a chart with more pixels and tells the browser to scale it. (Tested in Safari, Firefox, and Chrome.)

Futures

I built this program to handle only what I needed for multicians.org. Many more improvements could be made. For example, one could add another data element to the "data" rows to specify a URL to open if a user clicks on an event. For timelines covering shorter periods, one might want to use a unit of months or weeks. I didn't need any of these features, so I didn't code them.

Open Source

Here is a link to the open source file. Feel free to improve on my code.

• timelinecanvas.js by me (Apache license)

Written 11/05/2020