2023-11-08

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:

Multics timeline 1965-2014
Example Timeline Chart
TYPEYEARLSTYLEHEIGHTTEXTTSTYLE
back1961#dddddd19667094
back1966#ddddff1973GE 645
back1973#ffdddd1978H 6180
back1978#ddffdd1982L 68
back1982#ddffff1987DPS-8/M
back1987#eeeeee2000endgame
axis1960
axis1965
axis1975
axis1985
axis1995
axis2000
axis2010
axis2020
axis2030
data19611(CTSS)italic 9pt serif
data1965/122FJCC|Papers
data19684system|up
data19706Honeywell
data197216180
data19732AFDSC
data19763NSS, AIM
data19784Guardian
data19851B2
data19862System|canceled
data19981DOCKMASTER|shut down
data20003DND-H|shut down|(last site)
data20071Open|Source|by|Bull
data20142Multics|Simulator

Creating a Timeline Chart

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

Open your HTML file that will display the timeline in a text editor. You are going to add a line to the HEAD section to load the JavaScript file, and in the BODY section you will insert

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 defining the size of the timeline. The WIDTH ahd HEIGHT on the canvas tag are the size (in CSS pixels) of the timline chart. Inside the CANVAS tag, insert an IMG tag for a picture that will be displayed if JavaScript in the visitor's browser is turned off or does not support graphics.

<!-- see https://multicians.org/timeline-js.html -->
<canvas id="canvas2" width="550" height="220" 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 using a CSS class or an inline STYLE. The table will have three kinds of rows specified in TR elements:

The table columns specify data for each row. The first element of each row says what TYPE of element is being specified. The meaning of the rest of the columns in each row depends on the TYPE.

Dates in "back" and "data" elements can be a year like "1975" or a year and month, like "1975/03".

Specify a CAPTION element in the table to set a chart title shown at the top. If you use this feature, increase the height= of the canvas element by 20 pixels to leave room for the title.

<table id="mydata2" class="datatable">
  <caption>Example Timeline Chart</caption>
  <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/12</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, insert a call to the JavaScript function timelinecanvas() with four parameters:

  1. The HTML ID tag for the canvas element.
  2. The HTML 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

When timelinecanvas is invoked, it processes each row in the data TABLE and sets up internal storage. Then it calls JavaScript functions on the CANVAS object to draw boxes, lines, and text.

The timeline chart displays a horizontal time line arrow representing a span of of years. Events that occurred in a specific year and month 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(). Optionally, 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 and month 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, so that the chart won't look blurry. (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 visitor 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 JavaScript file. Feel free to improve on my code.

Written 11/05/2020