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:
| TYPE | YEAR | LSTYLE | HEIGHT | TEXT | TSTYLE |
|---|---|---|---|---|---|
| back | 1961 | #dddddd | 1966 | 7094 | |
| back | 1966 | #ddddff | 1973 | GE 645 | |
| back | 1973 | #ffdddd | 1978 | H 6180 | |
| back | 1978 | #ddffdd | 1982 | L 68 | |
| back | 1982 | #ddffff | 1987 | DPS-8/M | |
| back | 1987 | #eeeeee | 2000 | endgame | |
| axis | 1960 | ||||
| axis | 1965 | ||||
| axis | 1975 | ||||
| axis | 1985 | ||||
| axis | 1995 | ||||
| axis | 2000 | ||||
| axis | 2010 | ||||
| axis | 2020 | ||||
| axis | 2030 | ||||
| data | 1961 | 1 | (CTSS) | italic 9pt serif | |
| data | 1965/12 | 2 | FJCC|Papers | ||
| data | 1968 | 4 | system|up | ||
| data | 1970 | 6 | Honeywell | ||
| data | 1972 | 1 | 6180 | ||
| data | 1973 | 2 | AFDSC | ||
| data | 1976 | 3 | NSS, AIM | ||
| data | 1978 | 4 | Guardian | ||
| data | 1985 | 1 | B2 | ||
| data | 1986 | 2 | System|canceled | ||
| data | 1998 | 1 | DOCKMASTER|shut down | ||
| data | 2000 | 3 | DND-H|shut down|(last site) | ||
| data | 2007 | 1 | Open|Source|by|Bull | ||
| data | 2014 | 2 | Multics|Simulator |
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
Insert a line in the HEAD section of your page like so:
<script src="js/timelinecanvas.js"></script>
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>
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>
Then, insert a call to the JavaScript function timelinecanvas() with four parameters:
<script>timelinecanvas('mydata2','canvas2','white', 'red');</script>
(Each ID tag should be unique in your HTML page.)
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>
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.
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.
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.
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.)
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.
Here is a link to the open source JavaScript file. Feel free to improve on my code.
Written 11/05/2020