1. Overview

A panel is a basic unit for accommodating one or more layers and representing a variety of information. For example, you can combine a layer for displaying data, a layer for showing scales, and a layer for indicating the title together on a single panel, which allows you to create a collective representation of data and other necessary information. Typically, you use tile panels (HuTime.TilePanel), which are stacked up and displayed in the panel collection.

2. Creating an Object



Type: Number
Default value: 150
The length in the v-axis direction (in pixels).

3. Adding a Panel

You can add a panel using the appendPanel method of a panel collection object.


Type: HuTime
The panel collection object to which the panel is added.
Type: HuTime.PanelBase
The panel that is added to the panel collection object.

Sample code (click here for a running example). Two panels (variables pnl1 and pnl2) are added to the panel collection object (variable pnls). By means of a property described later in Formatting, the background color of the first panel is set to light blue, and that of the second panel to yellow.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(250);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl1 = new HuTime.TilePanel(100);
    var pnl2 = new HuTime.TilePanel(100);
    pnls.style.backgroundColor = "pink";
    pnl1.style.backgroundColor = "aqua";
    pnl1.zIndex = 10;
    pnl2.style.backgroundColor = "lightyellow";
    pnl1.zIndex = 20;

4. Specifying the Display Position and the Size

In panels, the display width in the t-axis direction is adjusted to suit the width of the panel collection. You specify the display width in the v-axis direction by using the vBreadth property. The display positions of tile panels are automatically determined according to the stack order in the panel collection. The stack order is determined by the zIndex property of each tile panel. A panel with a greater value will appear at an upper position than others with smaller values (at the leftmost position in vertical display mode). In the example shown in "3. Adding a Panel Collection," the zIndex value of pnl1 and pnl2 are set to 10 and 20, respectively. Thus, pnl2 in yellow is displayed above the other.

Type: Number
Default value: 0
Specify the positions where panels are located in the panel collection (upper or lower) (left or right in vertical display mode). A panel with a greater value appears at an upper position (more to the left in vertical display mode) than panels with smaller values.

5. Formatting

You can use the style property to format the panel. The value specified for the style property is reflected to the style attribute of the DOM element (div element) for display that the panel has. In the example shown in "3. Adding a Panel," the background colors (style.backgroundColor) are set to light blue and yellow.

6. Other Key Properties and Methods

A panel has properties for specifying the behavior of panels in the panel collection.


Type: String
Default value: null
The ID for uniquely identifying the panel.
Type: String
Default value: null
The name of the panel.
Type: Boolean
Default value: true
Specify whether the panel is visible or invisible. If true, it is visible.
Type: Number
Default value: 3
The range to capture mouse events: 0: Not captured; 1: Panel only; 2: Layers in panel only; 3: Both panel and layers in the panel
Type: Number
Default value: 1.0
The magnification ratio of the display width of the t axis. Specify how large the displayed range of the t axis on the HuTime root will appear. You need to specify it when putting a panel that is zoomed in or out for viewing.
Type: Boolean
Default value: true
Specify whether or not the panel can be relocated. If true, it can be moved to a different position.
Type: Boolean
Default value: true
Specify whether or not the width in the v-axis direction can be changed in the panel. If true, the width of the panel can be changed.



Redraws the panel. Layers in the panel are also redrawn recursively.

Return value


Clears what is displayed on the panel.

Return value

Back to the Contents of this Manual