<td>The ID of the group this point belongs to.</td>
<td>The ID of the group this point belongs to.</td>
</tr>
</tr>
<tr>
<td>label</td>
<td>object</td>
<td>no</td>
<td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations </td>
</tr>
</table>
</table>
<h3id="groups">Groups</h3>
<h3id="groups">Groups</h3>
@ -672,7 +678,7 @@ The options colored in green can also be used as options for the groups. All opt
<td>orientation</td>
<td>orientation</td>
<td>String</td>
<td>String</td>
<td>'bottom'</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>
<td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
</tr>
</tr>
<tr>
<tr>
@ -807,6 +813,29 @@ Graph2d.clear({options: true}); // clear options only
</td>
</td>
</tr>
</tr>
<tr>
<td>click</td>
<td>Fired when clicked inside the Graph2d.
</td>
<td>
Passes a properties object as returned by the method <ahref="#getEventProperties"><code>Graph2d.getEventProperties(event)</code></a>.
</td>
</tr>
<tr>
<td>contextmenu</td>
<td>Fired when right-clicked inside the Graph2d. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
<preclass="prettyprint lang-js">graph2d.on('contextmenu', function (props) {
alert('Right click!');
props.event.preventDefault();
});
</pre>
</td>
<td>
Passes a properties object as returned by the method <ahref="#getEventProperties"><code>Graph2d.getEventProperties(event)</code></a>.
</td>
</tr>
<tr>
<tr>
<td>destroy()</td>
<td>destroy()</td>
<td>none</td>
<td>none</td>
@ -814,6 +843,15 @@ Graph2d.clear({options: true}); // clear options only
</td>
</td>
</tr>
</tr>
<tr>
<td>doubleClick</td>
<td>Fired when double clicked inside the Graph2d.
</td>
<td>
Passes a properties object as returned by the method <ahref="#getEventProperties"><code>Graph2d.getEventProperties(event)</code></a>.
</td>
</tr>
<tr>
<tr>
<td>getCurrentTime()</td>
<td>getCurrentTime()</td>
<td>Date</td>
<td>Date</td>
@ -828,6 +866,24 @@ Graph2d.clear({options: true}); // clear options only
</td>
</td>
</tr>
</tr>
<trid="getEventProperties">
<td>getEventProperties(event)</td>
<td>Object</td>
<td>
Returns an Object with relevant properties from an event:
<ul>
<li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
<li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
<li><code>x</code> (Number): relative horizontal position of the click event.</li>
<li><code>y</code> (Number): relative vertical position of the click event.</li>
<li><code>time</code> (Date): Date of the clicked event.</li>
<li><code>value</code> (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.</li>
<li><code>what</code> (String | null): name of the clicked thing: <code>background</code>, <code>axis</code>, <code>dat-axis</code>, <code>custom-time</code>, or <code>current-time</code>, <code>legend</code>.</li>
<li><code>event</code> (Object): the original click event.</li>
Options can be provided as third parameter in the network constructor
Options can be provided as third parameter in the network constructor
as well. Section <ahref="#Configuration_Options">Configuration Options</a>
as well. Section <ahref="#Configuration_options">Configuration Options</a>
describes the available options.
describes the available options.
</li>
</li>
@ -280,13 +280,13 @@ When using a DataSet, the network is automatically updating to changes in the Da
<td>allowedToMoveX</td>
<td>allowedToMoveX</td>
<td>Boolean</td>
<td>Boolean</td>
<td>no</td>
<td>no</td>
<td>If allowedToMoveX is false, then the node will not move in the X direction from its position.</td>
<td>If allowedToMoveX is false, then the node will not move in the X direction from its position. This does not do anything in hierarchical views.</td>
</tr>
</tr>
<tr>
<tr>
<td>allowedToMoveY</td>
<td>allowedToMoveY</td>
<td>Boolean</td>
<td>Boolean</td>
<td>no</td>
<td>no</td>
<td>If allowedToMoveY is false, then the node will not move in the Y direction from its position.</td>
<td>If allowedToMoveY is false, then the node will not move in the Y direction from its position. This does not do anything in hierarchical views.</td>
</tr>
</tr>
<tr>
<tr>
@ -599,7 +599,14 @@ var options = {
<td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse, touch, and keyboard events only when active.
<td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse, touch, and keyboard events only when active.
When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.</td>
When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.</td>
</tr>
</tr>
<tr>
<td>useDefaultGroups</td>
<td>boolean</td>
<td>true</td>
<td>If true, the default groups are used when groups are used. If you have defined your own groups those will be used. If you have an item with a group that is NOT in your own group list,
setting useDefaultGroups true will iterate over the default groups for unknown groups. If it is set to false, it will iterate over your own groups for unknown groups.
</td>
</tr>
<tr>
<tr>
<td><ahref="#Physics">physics</a></td>
<td><ahref="#Physics">physics</a></td>
<td>Object</td>
<td>Object</td>
@ -647,7 +654,7 @@ var options = {
</tr>
</tr>
<tr>
<tr>
<td>freezeForStabilization</a></td>
<td>freezeForStabilization</td>
<td>Boolean</td>
<td>Boolean</td>
<td>false</td>
<td>false</td>
<td>
<td>
@ -758,7 +765,7 @@ var options = {
<td>smoothCurves.type</td>
<td>smoothCurves.type</td>
<td>String</td>
<td>String</td>
<td>"continuous"</td>
<td>"continuous"</td>
<td>This option only affects NONdynamic smooth curves. The supported types are: <code>continuous, discrete, diagonalCross, straightCross, horizontal, vertical</code>. The effects of these types
<td>This option only affects NONdynamic smooth curves. The supported types are: <code>continuous, discrete, diagonalCross, straightCross, horizontal, vertical, curvedCW, curvedCCW</code>. The effects of these types
are shown in examples <ahref="../examples/network/26_staticSmoothCurves.html">26</a> and <ahref="../examples/network/27_world_cup_network.html">27</a></td>
are shown in examples <ahref="../examples/network/26_staticSmoothCurves.html">26</a> and <ahref="../examples/network/27_world_cup_network.html">27</a></td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the minimum value of the fontSize.</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the minimum value of the fontSize.</td>
</tr>
</tr>
<tr>
<tr>
<td></td>fontSizeMax</td>
<td>fontSizeMax</td>
<td>Number</td>
<td>Number</td>
<td>30</td>
<td>30</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the maximum value of the fontSize.</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the maximum value of the fontSize.</td>
<td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
<td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td>
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td>
</tr>
</tr>
<tr>
<tdclass="greenField">iconFontFace</td>
<td>String</td>
<td>undefined</td>
<td>Font face for icons, for example <code>FontAwesome</code> or <code>Ionicon</code>.<br/><em>You have to link to the css defining the font by yourself (see Examples)</em></td>
</tr>
<tr>
<tdclass="greenField">icon</td>
<td>String</td>
<td>undefined</td>
<td>Unicode of the icon f.e. <code>\uf0c0</code> (user-icon in FontAwesome)</td>
</tr>
<tr>
<tdclass="greenField">iconSize</td>
<td>Number</td>
<td>50</td>
<td>Size of the icon</td>
</tr>
<tr>
<tdclass="greenField">color</td>
<td>String</td>
<td>black</td>
<td>Color of the icon</td>
</tr>
</table>
</table>
@ -1460,7 +1490,7 @@ To unify the physics system, the damping, repulsion distance and edge length hav
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. <br/>
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. <br/>
When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
<pclass="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><ahref="#PhysicsConfiguration">below</a></u> or by <u><ahref="../examples/network/25_physics_configuration.html">example 25</a></u>.</p>
<pclass="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><ahref="#PhysicsConfiguration">below</a></u> or by <u><ahref="../examples/network/25_physics_configuration.html">example 25</a></u>.
</p>
</p>
<preclass="prettyprint">
<preclass="prettyprint">
// These variables must be defined in an options object named physics.
// These variables must be defined in an options object named physics.
<td>Fired once when the network finished the initial stabilization run. This is fired REGARDLESS if the network has stabilized. It only means that the amount of configured stabilizationIterations have been completed.
<td>
none
</td>
</tr>
<tr>
<tr>
<td>stabilized</td>
<td>stabilized</td>
<td>Fired every time the network has been stabilized. This event can be used to trigger the .storePositions() function after stabilization. Fired with an object having the following properties:</td>
<td>Fired every time the network has been stabilized. This event can be used to trigger the .storePositions() function after stabilization. Fired with an object having the following properties:</td>
<td>The end date of the item. The end date is optional, and can be left <code>null</code>.
<td>The end date of the item. The end date is optional, and can be left <code>null</code>.
If end date is provided, the item is displayed as a range.
If end date is provided, the item is displayed as a range.
@ -232,7 +232,7 @@ var items = [
</tr>
</tr>
<tr>
<tr>
<td>start</td>
<td>start</td>
<td>Date</td>
<td>Date | number | string | Moment</td>
<td>yes</td>
<td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
<td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
</tr>
</tr>
@ -468,7 +468,7 @@ var options = {
<tr>
<tr>
<td>end</td>
<td>end</td>
<td>Date | Number | String</td>
<td>Date | Number | String | Moment</td>
<td>none</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
<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
If not provided, the latest date present in the items set is taken as
@ -584,7 +584,7 @@ var options = {
<tr>
<tr>
<td>max</td>
<td>max</td>
<td>Date | Number | String</td>
<td>Date | Number | String | Moment</td>
<td>none</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
It will not be possible to move beyond this maximum.
@ -600,7 +600,7 @@ var options = {
<tr>
<tr>
<td>min</td>
<td>min</td>
<td>Date | Number | String</td>
<td>Date | Number | String | Moment</td>
<td>none</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
It will not be possible to move beyond this minimum.
@ -664,24 +664,25 @@ var options = {
</td>
</td>
</tr>
</tr>
<!-- TODO: cleanup option order
<tr>
<tr>
<td>order</td>
<td>order</td>
<td>Function</td>
<td>Function</td>
<td>none</td>
<td>none</td>
<td>Provide a custom sort function to order the items. The order of the
<td>
<p>Provide a custom sort function to order the items. The order of the
items is determining the way they are stacked. The function
items is determining the way they are stacked. The function
order is called with two parameters, both of type
`vis.components.items.Item`.
order is called with two arguments containing the data of two items to be
compared.
</p>
<pstyle="font-style: italic">WARNING: Use with caution. Custom ordering is not suitable for large amounts of items. On load, the Timeline will render all items once to determine their width and height. Keep the number of items in this configuration limited to a maximum of a few hundred items.</p>
</td>
</td>
</tr>
</tr>
-->
<tr>
<tr>
<td>orientation</td>
<td>orientation</td>
<td>String</td>
<td>String</td>
<td>'bottom'</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>
<td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
</tr>
</tr>
<tr>
<tr>
@ -762,7 +763,7 @@ var options = {
<tr>
<tr>
<td>start</td>
<td>start</td>
<td>Date | Number | String</td>
<td>Date | Number | String | Moment</td>
<td>none</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
<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>
If not provided, the earliest date present in the events is taken as start date.</td>
@ -854,6 +855,15 @@ var options = {
<th>Description</th>
<th>Description</th>
</tr>
</tr>
<tr>
<td>addCustomTime(time[, id])</td>
<td>Number | String</td>
<td>
Only applicable when the option showCustomTime is true.<br>
Add new vertical bar representing custom time that can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Parameter <code>id</code> can be Number or String. If <code>id</code> is provided, it will be used as ID for the new vertical bar, otherwise the ID will be auto generated.<br>
Returns ID of the newly created bar.
</td>
</tr>
<tr>
<tr>
<td>clear([what])</td>
<td>clear([what])</td>
<td>none</td>
<td>none</td>
@ -903,9 +913,29 @@ timeline.clear({options: true}); // clear options only
</tr>
</tr>
<tr>
<tr>
<td>getCustomTime()</td>
<td>getCustomTime([id])</td>
<td>Date</td>
<td>Date</td>
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true. If parameter <code>id</code> is provided, time of the custom time bar under that ID is returned.
</td>
</tr>
<trid="getEventProperties">
<td>getEventProperties(event)</td>
<td>Object</td>
<td>
Returns an Object with relevant properties from an event:
<ul>
<li><code>group</code> (Number | null): the id of the clicked group.</li>
<li><code>item</code> (Number | null): the id of the clicked item.</li>
<li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
<li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
<li><code>x</code> (Number): relative horizontal position of the click event.</li>
<li><code>y</code> (Number): relative vertical position of the click event.</li>
<li><code>time</code> (Date): Date of the clicked event.</li>
<li><code>snappedTime</code> (Date): Date of the clicked event, snapped to a nice value.</li>
<li><code>what</code> (String | null): name of the clicked thing: <code>item</code>, <code>background</code>, <code>axis</code>, <code>group-label</code>, <code>custom-time</code>, or <code>current-time</code>.</li>
<li><code>event</code> (Object): the original click event.</li>
</ul>
</td>
</td>
</tr>
</tr>
@ -958,6 +988,14 @@ timeline.clear({options: true}); // clear options only
</td>
</td>
</tr>
</tr>
<tr>
<td>removeCustomTime(id)</td>
<td>none</td>
<td>
Remove vertical bars previously added to the timeline via <code>addCustomTime</code> method. Parameter <code>id</code> is the ID of the custom vertical bar returned by <code>addCustomTime</code> method.
</td>
</tr>
<tr>
<tr>
<td>setCurrentTime(time)</td>
<td>setCurrentTime(time)</td>
<td>none</td>
<td>none</td>
@ -967,9 +1005,9 @@ timeline.clear({options: true}); // clear options only
</tr>
</tr>
<tr>
<tr>
<td>setCustomTime(time)</td>
<td>setCustomTime(time [, id])</td>
<td>none</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method and can be a Number or String.
<td>Fired after a redraw is complete. When moving the timeline around, this could be fired frequently.
</td>
<td>
none.
</td>
</tr>
<tr>
<tr>
<td>click</td>
<td>Fired when clicked inside the Timeline.
</td>
<td>
Passes a properties object as returned by the method <ahref="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
</tr>
<tr>
<td>contextmenu</td>
<td>Fired when right-clicked inside the Timeline. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
<preclass="prettyprint lang-js">timeline.on('contextmenu', function (props) {
alert('Right click!');
props.event.preventDefault();
});
</pre>
</td>
<td>
Passes a properties object as returned by the method <ahref="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
</tr>
<tr>
<td>doubleClick</td>
<td>Fired when double clicked inside the Timeline.
</td>
<td>
Passes a properties object as returned by the method <ahref="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
</tr>
<tr>
<td>finishedRedraw</td>
<td>Fired after a redraw is complete. When moving the timeline around, this could be fired frequently.
</td>
<td>
none.
</td>
</tr>
<tr>
<td>rangechange</td>
<td>rangechange</td>
<td>Fired repeatedly when the timeline window is being changed.
<td>Fired repeatedly when the timeline window is being changed.
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right.
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
</p>
</p>
<ul>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items</li>
<li>Move selected items by dragging them.</li>
<li>Create a new item by double tapping on an empty space.</li>
<li>Create a new range item by dragging on an empty space with the ctrl key down.</li>
<li>Update an item by double tapping it.</li>
<li>Delete a selected item by clicking the delete button on the top right.</li>
</ul>
<p>Option <code>editable</code> accepts a boolean or an object. When <code>editable</code> is a boolean, all manipulation actions will be either enabled or disabled. When <code>editable</code> is an object, one can enable individual manipulation actions:</p>
<p>Option <code>editable</code> accepts a boolean or an object. When <code>editable</code> is a boolean, all manipulation actions will be either enabled or disabled. When <code>editable</code> is an object, one can enable individual manipulation actions:</p>
This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled.
<br/><br/>
</div>
<br/>
<divid="visualization"></div>
<scripttype="text/javascript">
var container = document.getElementById('visualization');
var label1 = {
content: "offset label",
xOffset: 20,
yOffset: 20
}
var label2 = {
content: "Label2",
className: "red"
}
var items = [
{x: '2014-06-11', y: 10,label:label1},
{x: '2014-06-12', y: 25,label:label2},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
};
var graph2d = new vis.Graph2d(container, dataset, options);
Roundness (0..1): <inputtype="range"min="0"max="1"value="0.5"step="0.05"style="width:200px"id="roundnessSlider"><inputid="roundnessScreen"value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
<divid="mynetwork"></div>
<divid="mynetwork"></div>
<scripttype="text/javascript">
<scripttype="text/javascript">
var dropdown = document.getElementById("dropdownID");
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
// create an array with nodes
// create an array with nodes
var nodes = [
var nodes = [
{id: 1, label: 'Node 1'},
{id: 1, label: 'Node 1'},
@ -53,7 +60,7 @@ dropdown.onchange = update;
// create an array with edges
// create an array with edges
var edges = [
var edges = [
{from: 1, to: 2}
{from: 1, to: 2, style:"arrow"}
];
];
// create a network
// create a network
@ -68,8 +75,14 @@ dropdown.onchange = update;
function update() {
function update() {
var type = dropdown.value;
var type = dropdown.value;
network.setOptions({smoothCurves:{type:type}});
var roundness = roundnessSlider.value;
roundnessScreen.value = roundness;
var options = {smoothCurves:{type:type, roundness:roundness}}
jos
9 years ago
