jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Restored the `Timeline Options` section in the Graph2d docs

v3_develop
jos 10 years ago
parent
ab869c1bcd
commit
13472449d0
2 changed files with 182 additions and 12 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +174
    -4
      docs/graph2d.html
  2. +8
    -8
      docs/timeline.html

+ 174
- 4
docs/graph2d.html View File

@ -477,12 +477,182 @@ The options colored in green can also be used as options for the groups. All opt
<h3 id="timelineOptions">Timeline Options</h3>
<p>
Graph2d is built upon the framework of the Timeline. All options from the Timeline can be used with Graph2d. The options available for the Timeline are listed here:
</p>
<p>
<a href="timeline.html#Configuration_Options">timeline.html#Configuration_options</a>
Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
All options are optional.
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td>
</tr>
<tr>
<td>clickToUse</td>
<td>boolean</td>
<td>false</td>
<td>When a Graph2d is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active.
When active, a blue shadow border is displayed around the Graph2d. The Graph2d is set active by clicking on it, and is changed to inactive again by clicking outside the Graph2d or by pressing the ESC key.</td>
</tr>
<tr>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
</tr>
<tr>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
</tr>
<tr>
<td>locale</td>
<td>String</td>
<td>none</td>
<td>Select a locale for the Graph2d. See section <a href="timeline.html#Localization">Localization</a> for more information.</td>
</tr>
<tr>
<td>locales</td>
<td>Object</td>
<td>none</td>
<td>A map with i18n locales. See section <a href="timeline.html#Localization">Localization</a> for more information.</td>
</tr>
<tr>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
</tr>
<tr>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
</tr>
<tr>
<td>minHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
</tr>
<tr>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
</tr>
<tr>
<td>showCustomTime</td>
<td>boolean</td>
<td>false</td>
<td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
</tr>
<tr>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr>
<tr>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
</tr>
<tr>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
</tr>
<tr>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
</tr>
<tr>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>

+ 8
- 8
docs/timeline.html View File

@ -356,14 +356,6 @@ var options = {
<th>Description</th>
</tr>
<tr>
<td>clickToUse</td>
<td>boolean</td>
<td>false</td>
<td>When a Timeline is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active.
When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
</tr>
<tr>
<td>align</td>
<td>String</td>
@ -379,6 +371,14 @@ var options = {
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td>
</tr>
<tr>
<td>clickToUse</td>
<td>boolean</td>
<td>false</td>
<td>When a Timeline is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active.
When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
</tr>
<tr>
<td>editable</td>
<td>Boolean | Object</td>

Write Preview
Loading…
Cancel
Save