diff --git a/docs/css/newdocs.css b/docs/css/newdocs.css deleted file mode 100644 index f1989d99..00000000 --- a/docs/css/newdocs.css +++ /dev/null @@ -1,228 +0,0 @@ - -html { - height:100%; -} -body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; - /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/ - font-size:16px; - line-height: 1.5em; - background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */ -} - - -h1, h2, h3, h4, h5, h6 { - margin: 40px 0 20px 0; -} - -ul { - margin-top: 0.7em; - margin-bottom: 0.7em; -} - -p { - margin: 20px 0; -} - -img.icon { - position:relative; - top:-2px; -} - - -div.navbar-wrapper { - background-color:#07508E; - border-bottom: 3px solid #ffffff; - font-size:16px; -} - -div.blogHeader { - margin-left:auto; - margin-right:auto; - text-align:center; - width:910px; - padding: 0px 30px 0px 30px; - margin-top:-150px; - color:#ffffff; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); - margin-bottom:60px; - -} - -div.full { - min-height:100%; - box-shadow:0 2px 10px rgba(0,0,0,0.4); - padding: 20px 10px 40px 10px; - background-color:#ffffff; -} - -@media (min-width: 768px) { - div.full { - padding: 40px 40px 80px 40px; - } -} - -@media (min-width: 992px) { - div.full { - padding: 80px 80px 160px 80px; - } -} - -table.moduleTable { -} - -table.moduleTable th, -table.moduleTable td { - padding: 5px 15px; - border: 1px solid #dddddd; -} - - -table.moduleTable th { - background-color: #f5f5f5; -} - -table.moduleTable td { - vertical-align: top; -} - - -/* TODO: cleanup */ -/*tr.header {*/ - /*color: #1f3350;*/ - /*background-color: #cccccc;*/ - /*border-bottom:1px solid #999999 !important;*/ - /*font-size:16px;*/ - /*font-style:italic;*/ -/*}*/ - -td.mid { - background-color: #f5f5f5; - - font-style:italic; -} - -/*td.properties {*/ - /*width:150px;*/ -/*}*/ - -/*p {*/ - /*max-width:1000px;*/ -/*}*/ - - -/*pre.code {*/ - /*padding:2px 4px;*/ - /*font-size:90%;*/ - /*color: #444444;*/ - /*background-color:#f9f2f4;*/ - /*border-radius:4px;*/ - /*border:0;*/ -/*}*/ - -pre { - margin: 20px 0; -} - -/*pre.top {*/ - /*margin-left:20px;*/ -/*}*/ - -tr.hidden { - max-height:0; - /*max-height: 0;*/ - overflow: hidden; -} - -tr.visible { - /* Set our transitions up. */ - -webkit-animation: - fadeIn 250ms ease-in; -} - - -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - - -span.caret { - opacity: 0.5; -} - -span.right-caret { - border-bottom: 4px solid transparent; - border-top: 4px solid transparent; - border-left: 4px solid #000000; - display: inline-block; - height: 0; - opacity: 0.5; - vertical-align: top; - width: 0; - margin-left:5px; - margin-top:6px; -} - -tr.toggle { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor:pointer; -} - - - -tr.toggle.collapsible { - background-color: #f5f5f5; - border-left: 3px solid #89b3ff; -} - -td.indent { - padding-left:25px !important; -} - - -td.indent2 { - padding-left:50px !important; -} - -/* TODO: cleanup */ -/*td.name {*/ - /*width:230px;*/ -/*}*/ - -/*td.nameSmall {*/ - /*width:150px;*/ -/*}*/ - -/*td.type {*/ - /*width: 110px;*/ -/*}*/ - -/*td.default {*/ - /*width:60px;*/ -/*}*/ - -/*td.eventProperties {*/ - /*width:150px;*/ -/*}*/ - -/*td.methodName {*/ - /*width:250px;*/ -/*}*/ - -pre.options { - max-width:600px; -} - -pre.hidden { - display:none; -} \ No newline at end of file diff --git a/docs/css/old_style.css b/docs/css/old_style.css new file mode 100644 index 00000000..d9382b0d --- /dev/null +++ b/docs/css/old_style.css @@ -0,0 +1,83 @@ +html, body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +body, td, th { + font-family: arial, sans-serif; + font-size: 11pt; + color: #4D4D4D; + line-height: 1.7em; +} + +#container { + position: relative; + margin: 0 auto; + padding: 10px 10px 50px 10px; + width: 970px; + max-width: 100%; + box-sizing: border-box; +} + +h1 { + font-size: 180%; + font-weight: bold; + padding: 0; + margin: 1em 0 1em 0; +} + +h2 { + padding-top: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #e0e0e0; + color: #064880; +} + +h3 { + font-size: 140%; +} + +a > img { + border: none; +} + +a { + color: #064880; + text-decoration: none; +} + +a:visited { + color: #064880; + text-decoration: none; +} + +a:hover { + color: red; + text-decoration: underline; +} + +table { + border-collapse: collapse; +} + +th { + font-weight: bold; + border: 1px solid lightgray; + background-color: #E5E5E5; + text-align: left; + vertical-align: top; + padding: 5px; +} + +td { + border: 1px solid lightgray; + padding: 5px; + vertical-align: top; +} + +p.important_note { + color: #3a6baa; + font-weight:bold; +} \ No newline at end of file diff --git a/docs/css/style.css b/docs/css/style.css index d9382b0d..a91d3468 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1,83 +1,193 @@ -html, body { - width: 100%; - height: 100%; - padding: 0; - margin: 0; + +html { + height:100%; +} +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; + /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/ + font-size:16px; + line-height: 1.5em; + background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */ } -body, td, th { - font-family: arial, sans-serif; - font-size: 11pt; - color: #4D4D4D; - line-height: 1.7em; + +h1, h2, h3, h4, h5, h6 { + margin: 40px 0 20px 0; } -#container { - position: relative; - margin: 0 auto; - padding: 10px 10px 50px 10px; - width: 970px; - max-width: 100%; - box-sizing: border-box; +ul { + margin-top: 0.7em; + margin-bottom: 0.7em; } -h1 { - font-size: 180%; - font-weight: bold; - padding: 0; - margin: 1em 0 1em 0; +p { + margin: 20px 0; } -h2 { - padding-top: 20px; - padding-bottom: 10px; - border-bottom: 1px solid #e0e0e0; - color: #064880; +img.icon { + position:relative; + top:-2px; } -h3 { - font-size: 140%; + +div.navbar-wrapper { + background-color:#07508E; + border-bottom: 3px solid #ffffff; + font-size:16px; } -a > img { - border: none; +div.blogHeader { + margin-left:auto; + margin-right:auto; + text-align:center; + width:910px; + padding: 0px 30px 0px 30px; + margin-top:-150px; + color:#ffffff; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); + margin-bottom:60px; + } -a { - color: #064880; - text-decoration: none; +div.full { + min-height:100%; + box-shadow:0 2px 10px rgba(0,0,0,0.4); + padding: 20px 10px 40px 10px; + background-color:#ffffff; } -a:visited { - color: #064880; - text-decoration: none; +@media (min-width: 768px) { + div.full { + padding: 40px 40px 80px 40px; + } } -a:hover { - color: red; - text-decoration: underline; +@media (min-width: 992px) { + div.full { + padding: 80px 80px 160px 80px; + } } table { - border-collapse: collapse; } -th { - font-weight: bold; - border: 1px solid lightgray; - background-color: #E5E5E5; - text-align: left; - vertical-align: top; - padding: 5px; +table th, +table td { + padding: 5px 15px; + border: 1px solid #dddddd; +} + + +table th { + background-color: #f5f5f5; +} + +table td { + vertical-align: top; +} + +/* +The following tables are used: +- A table 'properties' with data properties. Columns: Name, Type, Required, Description +- A table 'options' with configuration options. Columns: Name, Type, Default, Description +- A table 'methods' with methods. Columns: Method, Return Type, Description +- A table 'events' with events. Columns: Name, Properties, Description +- A table 'styles' with styles. Columns: Description, Values +- A table 'datatypes' with data types. Columns: Name, Description, Examples +*/ +table.properties td:nth-child(2), +table.properties td:nth-child(3), +table.options td:nth-child(2), +table.options td:nth-child(3), +table.methods td:nth-child(2), +table.methods td:nth-child(2), +table.events td:nth-child(2) { + background-color: #f5f5f5; + font-style: italic; +} + +pre { + margin: 20px 0; +} + +a code { + text-decoration: underline; +} + +/*pre.top {*/ + /*margin-left:20px;*/ +/*}*/ + +tr.hidden { + max-height:0; + /*max-height: 0;*/ + overflow: hidden; +} + +tr.visible { + /* Set our transitions up. */ + -webkit-animation: + fadeIn 250ms ease-in; +} + + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + +span.caret { + opacity: 0.5; +} + +span.right-caret { + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-left: 4px solid #000000; + display: inline-block; + height: 0; + opacity: 0.5; + vertical-align: top; + width: 0; + margin-left:5px; + margin-top:6px; +} + +tr.toggle { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor:pointer; +} + + + +tr.toggle.collapsible { + background-color: #f5f5f5; + border-left: 3px solid #89b3ff; +} + +td.indent { + padding-left:25px !important; +} + + +td.indent2 { + padding-left:50px !important; } -td { - border: 1px solid lightgray; - padding: 5px; - vertical-align: top; +pre.options { + max-width:600px; } -p.important_note { - color: #3a6baa; - font-weight:bold; +pre.hidden { + display:none; } \ No newline at end of file diff --git a/docs/dataset/dataset.html b/docs/dataset/dataset.html new file mode 100644 index 00000000..c2d0c674 --- /dev/null +++ b/docs/dataset/dataset.html @@ -0,0 +1,1002 @@ + + + + + + + + + DataSet - vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

DataSet

+ +

Contents

+ + + +

Overview

+ +

+ Vis.js comes with a flexible DataSet, which can be used to hold and + manipulate unstructured data and listen for changes in the data. + The DataSet is key/value based. Data items can be added, updated and + removed from the DatSet, and one can subscribe to changes in the DataSet. + The data in the DataSet can be filtered and ordered, and fields (like + dates) can be converted to a specific type. Data can be normalized when + appending it to the DataSet as well. +

+ + +

Example

+ +

+ The following example shows how to use a DataSet. +

+ +
+// create a DataSet
+var options = {};
+var data = new vis.DataSet(options);
+
+// add items
+// note that the data items can contain different properties and data formats
+data.add([
+  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// subscribe to any change in the DataSet
+data.on('*', function (event, properties, senderId) {
+  console.log('event', event, properties);
+});
+
+// update an existing item
+data.update({id: 2, group: 1});
+
+// remove an item
+data.remove(4);
+
+// get all ids
+var ids = data.getIds();
+console.log('ids', ids);
+
+// get a specific item
+var item1 = data.get(1);
+console.log('item1', item1);
+
+// retrieve a filtered subset of the data
+var items = data.get({
+  filter: function (item) {
+    return item.group == 1;
+  }
+});
+console.log('filtered items', items);
+
+// retrieve formatted items
+var items = data.get({
+  fields: ['id', 'date'],
+  type: {
+    date: 'ISODate'
+  }
+});
+console.log('formatted items', items);
+
+ + + +

Construction

+ +

+ A DataSet can be constructed as: +

+ +
+var data = new vis.DataSet([data] [, options])
+
+ +

+ After construction, data can be added to the DataSet using the methods + add and update, as described in section + Data Manipulation. +

+ +

+ The parameter data is optional and is an Array with items. +

+ +

+ The parameter options is optional and is an object which can + contain the following properties: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueDescription
fieldIdString"id" + The name of the field containing the id of the items. + + When data is fetched from a server which uses some specific + field to identify items, this field name can be specified + in the DataSet using the option fieldId. + For example CouchDB uses the field + "_id" to identify documents. +
typeObject.<String, String>none + An object containing field names as key, and data types as + value. By default, the type of the properties of items are left + unchanged. Item properties can be normalized by specifying a + field type. This is useful for example to automatically convert + stringified dates coming from a server into JavaScript Date + objects. The available data types are listed in section + Data Types. +
queueObject | booleannone + Queue data changes ('add', 'update', 'remove') and flush them at once. + The queue can be flushed manually by calling + DataSet.flush(), or can be flushed after a configured delay + or maximum number of entries. +
+
+ When queue is true, a queue is created + with default options. Options can be specified by providing an object: +
    +
  • delay: number
    + The queue will be flushed automatically after an inactivity of this + delay in milliseconds. Default value is null. +
  • max: number
    + When the queue exceeds the given maximum number + of entries, the queue is flushed automatically. + Default value is Infinity. +
  • +
+
+ + +

Methods

+ +

DataSet contains the following methods.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
add(data [, senderId])Number[]Add one or multiple items to the DataSet. data can be a single item or an array with items. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section Data Manipulation.
clear([senderId])Number[]Clear all data from the DataSet. The function returns an array with the ids of the removed items.
distinct(field)ArrayFind all distinct values of a specified field. Returns an unordered array containing all distinct values. If data items do not contain the specified field are ignored.
flush()noneFlush queued changes. Only available when the DataSet is configured with the option queue, see section Construction.
forEach(callback [, options])none + Execute a callback function for every item in the dataset. + The available options are described in section Data Selection. +
+ get([options] [, data])
+ get(id [,options] [, data])
+ get(ids [, options] [, data]) +
Object | Array + Get a single item, multiple items, or all items from the DataSet. + Usage examples can be found in section Getting Data, and the available options are described in section Data Selection. +
+ getDataSet() + DataSet + Get the DataSet itself. In case of a DataView, this function does not + return the DataSet to which the DataView is connected. +
+ getIds([options]) + Number[] + Get ids of all items or of a filtered set of items. + Available options are described in section Data Selection, except that options fields and type are not applicable in case of getIds. +
map(callback [, options])Array + Map every item in the DataSet. + The available options are described in section Data Selection. +
max(field)Object | null + Find the item with maximum value of specified field. Returns null if no item is found. +
min(field)Object | null + Find the item with minimum value of specified field. Returns null if no item is found. +
off(event, callback)none + Unsubscribe from an event, remove an event listener. See section Subscriptions. +
on(event, callback)none + Subscribe to an event, add an event listener. See section Subscriptions. +
+ remove(id [, senderId])
+ remove(ids [, senderId]) +
Number[] + Remove one or multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section Data Manipulation. +
+ setOptions(options) + none + Set options for the DataSet. Available options: + +
    +
  • + queue
    + Queue data changes ('add', 'update', 'remove') and flush them at once. + The queue can be flushed manually by calling + DataSet.flush(), or can be flushed after a configured delay + or maximum number of entries. +
    +
    + When queue is true, a queue is created with default options. + When queue is false, an existing queue will be flushed and removed. + Options can be specified by providing an object: +
      +
    • delay: number
      + The queue will be flushed automatically after an inactivity of this + delay in milliseconds. Default value is null. +
    • max: number
      + When the queue exceeds the given maximum number + of entries, the queue is flushed automatically. + Default value is Infinity. +
    • +
    +
  • +
+
+ update(data [, senderId]) + Number[] + Update on ore multiple existing items. data can be a single item or an array with items. When an item doesn't exist, it will be created. Returns an array with the ids of the removed items. See section Data Manipulation. +
+ + +

Properties

+ +

DataSet contains the following properties.

+ + + + + + + + + + + + + +
PropertyTypeDescription
lengthNumberThe number of items in the DataSet.
+ + +

Subscriptions

+ +

+ One can subscribe on changes in a DataSet. + A subscription can be created using the method on, + and removed with off. +

+ +
+// create a DataSet
+var data = new vis.DataSet();
+
+// subscribe to any change in the DataSet
+data.on('*', function (event, properties, senderId) {
+  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
+});
+
+// add an item
+data.add({id: 1, text: 'item 1'});              // triggers an 'add' event
+data.update({id: 1, text: 'item 1 (updated)'}); // triggers an 'update' event
+data.remove(1);                                 // triggers an 'remove' event
+
+ + +

On

+ +

+ Subscribe to an event. +

+ + Syntax: +
DataSet.on(event, callback)
+ + Where: + + +

Off

+ +

+ Unsubscribe from an event. +

+ + Syntax: +
DataSet.off(event, callback)
+ + Where event and callback correspond with the + parameters used to subscribe to the event. + +

Events

+ +

+ The following events are available for subscription: +

+ + + + + + + + + + + + + + + + + + + + + + +
EventDescription
add + The add event is triggered when an item + or a set of items is added, or when an item is updated while + not yet existing. +
update + The update event is triggered when an existing item + or a set of existing items is updated. +
remove + The remove event is triggered when an item + or a set of items is removed. +
* + The * event is triggered when any of the events + add, update, and remove + occurs. +
+ +

Callback

+ +

+ The callback functions of subscribers are called with the following + parameters: +

+ +
+function (event, properties, senderId) {
+  // handle the event
+});
+
+ +

+ where the parameters are defined as +

+ + + + + + + + + + + + + + + + + + + + + + +
ParameterTypeDescription
eventString + Any of the available events: add, + update, or remove. +
propertiesObject | null + Optional properties providing more information on the event. + In case of the events add, + update, and remove, + properties is always an object containing a property + items, which contains an array with the ids of the affected + items. The update event has an extra field data + containing the original data of the updated items, i.e. the gives the + changed fields of the changed items. +
senderIdString | Number + An senderId, optionally provided by the application code + which triggered the event. If senderId is not provided, the + argument will be null. +
+ + +

Data Manipulation

+ +

+ The data in a DataSet can be manipulated using the methods + add, + update, + and remove. + The DataSet can be emptied using the method + clear. +

+ +
+// create a DataSet
+var data = new vis.DataSet();
+
+// add items
+data.add([
+  {id: 1, text: 'item 1'},
+  {id: 2, text: 'item 2'},
+  {id: 3, text: 'item 3'}
+]);
+
+// update an item
+data.update({id: 2, text: 'item 2 (updated)'});
+
+// remove an item
+data.remove(3);
+
+ +

Add

+ +

+ Add a data item or an array with items. +

+ + Syntax: +
var addedIds = DataSet.add(data [, senderId])
+ + The argument data can contain: + + +

+ After the items are added to the DataSet, the DataSet will + trigger an event add. When a senderId + is provided, this id will be passed with the triggered + event to all subscribers. +

+ +

+ The method will throw an Error when an item with the same id + as any of the added items already exists. +

+ +

Update

+ +

+ Update a data item or an array with items. +

+ + Syntax: +
var updatedIds = DataSet.update(data [, senderId])
+ + The argument data can contain: + + +

+ The provided properties will be merged in the existing item. + When an item does not exist, it will be created. +

+ +

+ After the items are updated, the DataSet will + trigger an event add for the added items, and + an event update. When a senderId + is provided, this id will be passed with the triggered + event to all subscribers. +

+ +

Remove

+ +

+ Remove a data item or an array with items. +

+ + Syntax: +
var removedIds = DataSet.remove(id [, senderId])
+ +

+ The argument id can be: +

+ + +

+ The method ignores removal of non-existing items, and returns an array + containing the ids of the items which are actually removed from the + DataSet. +

+ +

+ After the items are removed, the DataSet will + trigger an event remove for the removed items. + When a senderId is provided, this id will be passed with + the triggered event to all subscribers. +

+ + +

Clear

+ +

+ Clear the complete DataSet. +

+ + Syntax: +
var removedIds = DataSet.clear([senderId])
+ +

+ After the items are removed, the DataSet will + trigger an event remove for all removed items. + When a senderId is provided, this id will be passed with + the triggered event to all subscribers. +

+ + +

Data Selection

+ +

+ The DataSet contains functionality to format, filter, and sort data retrieved via the + methods get, getIds, forEach, and map. These methods have the following syntax: +

+ +
+DataSet.get([id] [, options]);
+DataSet.getIds([options]);
+DataSet.forEach(callback [, options]);
+DataSet.map(callback [, options]);
+
+ +

+ Where options is an Object which can have the following + properties: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
fieldsString[ ] | Object.<String, String>no + An array with field names, or an object with current field name and + new field name that the field is returned as. + By default, all properties of the items are emitted. + When fields is defined, only the properties + whose name is specified in fields will be included + in the returned items. +
typeObject.<String, String>no + An object containing field names as key, and data types as value. + By default, the type of the properties of an item are left + unchanged. When a field type is specified, this field in the + items will be converted to the specified type. This can be used + for example to convert ISO strings containing a date to a + JavaScript Date object, or convert strings to numbers or vice + versa. The available data types are listed in section + Data Types. +
filterFunctionnoItems can be filtered on specific properties by providing a filter + function. A filter function is executed for each of the items in the + DataSet, and is called with the item as parameter. The function must + return a boolean. All items for which the filter function returns + true will be emitted. + See section Data Filtering.
orderString | FunctionnoOrder the items by a field name or custom sort function.
returnTypeStringnoDetermine the type of output of the get function. Allowed values are 'Array' | 'Object'. + The default returnType is an Array. The Object type will return a JSON object with the ID's as keys.
+ +

+ The following example demonstrates formatting properties and filtering + properties from items. +

+ +
+// create a DataSet
+var data = new vis.DataSet();
+data.add([
+  {id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// retrieve formatted items
+var items = data.get({
+  fields: ['id', 'date', 'group'],    // output the specified fields only
+  type: {
+    date: 'Date',                   // convert the date fields to Date objects
+    group: 'String'                 // convert the group fields to Strings
+  }
+});
+
+ +

Getting Data

+ +

+ Data can be retrieved from the DataSet using the method get. + This method can return a single item or a list with items. +

+ +

A single item can be retrieved by its id:

+ +
+var item1 = dataset.get(1);
+
+ +

A selection of items can be retrieved by providing an array with ids:

+ +
+var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
+
+ +

All items can be retrieved by simply calling get without + specifying an id:

+ +
+var items = dataset.get();          // retrieve all items
+
+ + +

Data Filtering

+ +

+ Items can be filtered on specific properties by providing a filter + function. A filter function is executed for each of the items in the + DataSet, and is called with the item as parameter. The function must + return a boolean. All items for which the filter function returns + true will be emitted. +

+ +
+// retrieve all items having a property group with value 2
+var group2 = dataset.get({
+  filter: function (item) {
+    return (item.group == 2);
+  }
+});
+
+// retrieve all items having a property balance with a value above zero
+var positiveBalance = dataset.get({
+  filter: function (item) {
+    return (item.balance > 0);
+  }
+});
+
+
+ + +

Data Types

+ +

+ DataSet supports the following data types: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionExamples
BooleanA JavaScript Boolean + true
+ false +
NumberA JavaScript Number + 32
+ 2.4 +
StringA JavaScript String + "hello world"
+ "2013-06-28" +
DateA JavaScript Date object + new Date()
+ new Date(2013, 5, 28)
+ new Date(1372370400000) +
MomentA Moment object, created with + moment.js + moment()
+ moment('2013-06-28') +
ISODateA string containing an ISO Date + new Date().toISOString()
+ "2013-06-27T22:00:00.000Z" +
ASPDateA string containing an ASP Date + "/Date(1372370400000)/"
+ "/Date(1198908717056-0700)/" +
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/dataset/dataview.html b/docs/dataset/dataview.html new file mode 100644 index 00000000..dff732d4 --- /dev/null +++ b/docs/dataset/dataview.html @@ -0,0 +1,392 @@ + + + + + + + + + DataView - vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

DataView documentation

+ +

Contents

+ + + +

Overview

+ +

+ A DataView offers a filtered and/or formatted view on a + DataSet. + One can subscribe on changes in a DataView, and easily get filtered or + formatted data without having to specify filters and field types all + the time. +

+ +

Example

+ +

+ The following example shows how to use a DataView. +

+ +
+// create a DataSet
+var data = new vis.DataSet();
+data.add([
+  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// create a DataView
+// the view will only contain items having a property group with value 1,
+// and will only output fields id, text, and date.
+var view = new vis.DataView(data, {
+  filter: function (item) {
+    return (item.group == 1);
+  },
+  fields: ['id', 'text', 'date']
+});
+
+// subscribe to any change in the DataView
+view.on('*', function (event, properties, senderId) {
+  console.log('event', event, properties);
+});
+
+// update an item in the data set
+data.update({id: 2, group: 1});
+
+// get all ids in the view
+var ids = view.getIds();
+console.log('ids', ids); // will output [1, 2]
+
+// get all items in the view
+var items = view.get();
+
+ +

Construction

+ + +

+ A DataView can be constructed as: +

+ +
+var data = new vis.DataView(dataset, options)
+
+ +

+ where: +

+ + + +

Methods

+ +

DataView contains the following methods.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
+ get([options] [, data])
+ get(id [,options] [, data])
+ get(ids [, options] [, data]) +
Object | Array + Get a single item, multiple items, or all items from the DataView. + Usage examples can be found in section Getting Data, and the available options are described in section Data Selection. +
+ getDataSet() + DataSet + Get the DataSet to which the DataView is connected. +
+ getIds([options]) + Number[] + Get ids of all items or of a filtered set of items. + Available options are described in section Data Selection, except that options fields and type are not applicable in case of getIds. +
off(event, callback)none + Unsubscribe from an event, remove an event listener. See section Subscriptions. +
on(event, callback)none + Subscribe to an event, add an event listener. See section Subscriptions. +
refresh()none + Refresh the filter results of a DataView. Useful when the filter function contains dynamic properties, like: + +
var data = new vis.DataSet(...);
+var view = new vis.DataView(data, {
+  filter: function (item) {
+    return item.value > threshold;
+  }
+});
+ In this example, threshold is an external parameter. When the value of threshold changes, the DataView must be notified that the filter results may have changed by calling DataView.refresh(). +
+ setDataSet(data) + none + Replace the DataSet of the DataView. Parameter data can be a DataSet or a DataView. +
+ + +

Properties

+ +

DataView contains the following properties.

+ + + + + + + + + + + + + + + + + +
PropertyTypeDescription
lengthNumberThe number of items in the DataView.
+ +

Getting Data

+ +

+ Data of the DataView can be retrieved using the method get. +

+ +
+var items = view.get();
+
+ +

+ Data of a DataView can be filtered and formatted again, in exactly the + same way as in a DataSet. See sections + Data Manipulation and + Data Selection for more + information. +

+ +
+var items = view.get({
+  fields: ['id', 'score'],
+  filter: function (item) {
+    return (item.score > 50);
+  }
+});
+
+ + + +

Subscriptions

+

+ One can subscribe on changes in the DataView. Subscription works exactly + the same as for DataSets. See the documentation on + subscriptions in a DataSet + for more information. +

+ +
+// create a DataSet and a view on the data set
+var data = new vis.DataSet();
+var view = new vis.DataView({
+  filter: function (item) {
+    return (item.group == 2);
+  }
+});
+
+// subscribe to any change in the DataView
+view.on('*', function (event, properties, senderId) {
+  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
+});
+
+// add, update, and remove data in the DataSet...
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 6e537445..f36663c2 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -11,7 +11,7 @@ - + + + + + + + + + + + + + + + + + + + + + + + + +
+

Graph3d

+ +

Overview

+

+ Graph3d is an interactive visualization chart to draw data in a three dimensional + graph. You can freely move and zoom in the graph by dragging and scrolling in the + window. Graph3d also supports animation of a graph. +

+

+ Graph3d uses HTML canvas + to render graphs, and can render up to a few thousands of data points smoothly. +

+ +

Contents

+ + +

Example

+

+ The following code shows how to create a Graph3d and provide it with data. + More examples can be found in the examples directory. +

+ +
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph 3D demo</title>
+
+  <style>
+    body {font: 10pt arial;}
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+  var data = null;
+  var graph = null;
+
+  function custom(x, y) {
+    return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+  }
+
+  // Called when the Visualization API is loaded.
+  function drawVisualization() {
+    // Create and populate a data table.
+    var data = new vis.DataSet();
+    // create some nice looking data with sin/cos
+    var steps = 50;  // number of datapoints will be steps*steps
+    var axisMax = 314;
+    var axisStep = axisMax / steps;
+    for (var x = 0; x < axisMax; x+=axisStep) {
+      for (var y = 0; y < axisMax; y+=axisStep) {
+        var value = custom(x, y);
+        data.add({
+          x: x,
+          y: y,
+          z: value,
+          style: value
+        });
+      }
+    }
+
+    // specify options
+    var options = {
+      width:  '600px',
+      height: '600px',
+      style: 'surface',
+      showPerspective: true,
+      showGrid: true,
+      showShadow: false,
+      keepAspectRatio: true,
+      verticalRatio: 0.5
+    };
+
+    // create a graph3d
+    var container = document.getElementById('mygraph');
+    graph3d = new vis.Graph3d(container, data, options);
+  }
+  </script>
+</head>
+
+<body onload="drawVisualization();">
+  <div id="mygraph"></div>
+</body>
+</html>
+
+
+ + +

Loading

+ +

+ The class name of the Graph3d is vis.Graph3d. + When constructing a Graph3d, an HTML DOM container must be provided to attach + the graph to. Optionally, data an options can be provided. + Data is a vis DataSet or an Array, described in + section Data Format. + Options is a name-value map in the JSON format. The available options + are described in section Configuration Options. +

+
var graph = new vis.Graph3d(container [, data] [, options]);
+ +

+ Data and options can be set or changed later on using the functions + Graph3d.setData(data) and Graph3d.setOptions(options). +

+ +

Data Format

+

+ Graph3d can load data from an Array, a DataSet or a DataView. + JSON objects are added to this DataSet by using the add() function. + Data points must have properties x, y, and z, + and can optionally have a property style and filter. + +

Definition

+

+ The DataSet JSON objects are defined as: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
xnumberyesLocation on the x-axis.
ynumberyesLocation on the y-axis.
znumberyesLocation on the z-axis.
stylenumbernoThe data value, required for graph styles dot-color and + dot-size. +
filter*noFilter values used for the animation. + This column may have any type, such as a number, string, or Date.
+ + + +

Configuration Options

+ +

+ Options can be used to customize the graph. Options are defined as a JSON object. + All options are optional. +

+ +
+var options = {
+    width:  '100%',
+    height: '400px',
+    style: 'surface'
+};
+
+ +

+ The following options are available. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
animationIntervalnumber1000The animation interval in milliseconds. This determines how fast + the animation runs.
animationPreloadbooleanfalseIf false, the animation frames are loaded as soon as they are requested. + if animationPreload is true, the graph will automatically load + all frames in the background, resulting in a smoother animation as soon as + all frames are loaded. The load progress is shown on screen.
animationAutoStartbooleanfalseIf true, the animation starts playing automatically after the graph + is created.
backgroundColorstring or Object'white'The background color for the main area of the chart. + Can be either a simple HTML color string, for example: 'red' or '#00cc00', + or an object with the following properties.
backgroundColor.strokestring'gray'The color of the chart border, as an HTML color string.
backgroundColor.strokeWidthnumber1The border width, in pixels.
backgroundColor.fillstring'white'The chart fill color, as an HTML color string.
cameraPositionObject{horizontal: 1.0, vertical: 0.5, distance: 1.7}Set the initial rotation and position of the camera. + The object cameraPosition contains three parameters: + horizontal, vertical, and distance. + Parameter horizontal is a value in radians and can have any + value (but normally in the range of 0 and 2*Pi). + Parameter vertical is a value in radians between 0 and 0.5*Pi. + Parameter distance is the (normalized) distance from the + camera to the center of the graph, in the range of 0.71 to 5.0. A + larger distance puts the graph further away, making it smaller. + All parameters are optional. +
heightstring'400px'The height of the graph in pixels or as a percentage.
keepAspectRatiobooleantrueIf keepAspectRatio is true, the x-axis and the y-axis + keep their aspect ratio. If false, the axes are scaled such that they + both have the same, maximum with.
showAnimationControlsbooleantrueIf true, animation controls are created at the bottom of the Graph. + The animation controls consists of buttons previous, start/stop, next, + and a slider showing the current frame. + Only applicable when the provided data contains an animation.
showGridbooleantrueIf true, grid lines are draw in the x-y surface (the bottom of the 3d + graph).
showPerspectivebooleantrueIf true, the graph is drawn in perspective: points and lines which + are further away are drawn smaller. + Note that the graph currently does not support a gray colored bottom side + when drawn in perspective. +
showShadowbooleanfalseShow shadow on the graph.
stylestring'dot'The style of the 3d graph. Available styles: + bar, + bar-color, + bar-size, + dot, + dot-line, + dot-color, + dot-size, + line, + grid, + or surface
tooltipboolean | functionfalseShow a tooltip showing the values of the hovered data point. + The contents of the tooltip can be customized by providing a callback + function as tooltip. In this case the function is called + with an object containing parameters x, + y, and z argument, + and must return a string which may contain HTML. +
valueMaxnumbernoneThe maximum value for the value-axis. Only available in combination + with the styles dot-color and dot-size.
valueMinnumbernoneThe minimum value for the value-axis. Only available in combination + with the styles dot-color and dot-size.
verticalRationumber0.5A value between 0.1 and 1.0. This scales the vertical size of the graph + When keepAspectRatio is set to false, and verticalRatio is set to 1.0, + the graph will be a cube.
widthstring'400px'The width of the graph in pixels or as a percentage.
xBarWidthnumbernoneThe width of bars in x direction. By default, the width is equal to the distance + between the data points, such that bars adjoin each other. + Only applicable for styles 'bar' and 'bar-color'.
xCenterstring'55%'The horizontal center position of the graph, as a percentage or in + pixels.
xMaxnumbernoneThe maximum value for the x-axis.
xMinnumbernoneThe minimum value for the x-axis.
xStepnumbernoneStep size for the grid on the x-axis.
xValueLabelfunctionnoneA function for custom formatting of the labels along the x-axis, + for example function (x) {return (x * 100) + '%'}. +
yBarWidthnumbernoneThe width of bars in y direction. By default, the width is equal to the distance + between the data points, such that bars adjoin each other. + Only applicable for styles 'bar' and 'bar-color'.
yCenterstring'45%'The vertical center position of the graph, as a percentage or in + pixels.
yMaxnumbernoneThe maximum value for the y-axis.
yMinnumbernoneThe minimum value for the y-axis.
yStepnumbernoneStep size for the grid on the y-axis.
yValueLabelfunctionnoneA function for custom formatting of the labels along the y-axis, + for example function (y) {return (y * 100) + '%'}. +
zMinnumbernoneThe minimum value for the z-axis.
zMaxnumbernoneThe maximum value for the z-axis.
zStepnumbernoneStep size for the grid on the z-axis.
zValueLabelfunctionnoneA function for custom formatting of the labels along the z-axis, + for example function (z) {return (z * 100) + '%'}. +
xLabelStringxLabel on the X axis.
yLabelStringyLabel on the Y axis.
zLabelStringzLabel on the Z axis.
filterLabelStringtimeLabel for the filter column.
legendLabelStringvalueLabel for the style description.
+ + +

Methods

+

+ Graph3d supports the following methods. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
animationStart()noneStart playing the animation. + Only applicable when animation data is available.
animationStop()noneStop playing the animation. + Only applicable when animation data is available.
getCameraPosition()An object with parameters horizontal, + vertical and distanceReturns an object with parameters horizontal, + vertical and distance, + which each one of them is a number, representing the rotation and position + of the camera.
redraw()noneRedraw the graph. Useful after the camera position is changed externally, + when data is changed, or when the layout of the webpage changed.
setData(data)noneReplace the data in the Graph3d.
setOptions(options)noneUpdate options of Graph3d. + The provided options will be merged with current options.
setSize(width, height)noneParameters width and height are strings, + containing a new size for the graph. Size can be provided in pixels + or in percentages.
setCameraPosition (pos){horizontal: 1.0, vertical: 0.5, distance: 1.7}Set the rotation and position of the camera. Parameter pos + is an object which contains three parameters: horizontal, + vertical, and distance. + Parameter horizontal is a value in radians and can have any + value (but normally in the range of 0 and 2*Pi). + Parameter vertical is a value in radians between 0 and 0.5*Pi. + Parameter distance is the (normalized) distance from the + camera to the center of the graph, in the range of 0.71 to 5.0. A + larger distance puts the graph further away, making it smaller. + All parameters are optional. +
+ +

Events

+

+ Graph3d fires events after the camera position has been changed. + The event can be catched by creating a listener. + Here an example on how to catch a cameraPositionChange event. +

+ +
+function onCameraPositionChange(event) {
+  alert('The camera position changed to:\n' +
+        'Horizontal: ' + event.horizontal + '\n' +
+        'Vertical: ' + event.vertical + '\n' +
+        'Distance: ' + event.distance);
+}
+// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
+graph3d.on('cameraPositionChange', onCameraPositionChange);
+
+ +

+ The following events are available. +

+ + + + + + + + + + + + + +
namePropertiesDescription
cameraPositionChange +
    +
  • horizontal: Number. The horizontal angle of the camera.
  • +
  • vertical: Number. The vertical angle of the camera.
  • +
  • distance: Number. The distance of the camera to the center of the graph.
  • +
+
The camera position changed. Fired after the user modified the camera position + by moving (dragging) the graph, or by zooming (scrolling), + but not after a call to setCameraPosition method. + The new camera position can be retrieved by calling the method + getCameraPosition.
+ +

Data Policy

+

+ All code and data are processed and rendered in the browser. No data is sent to any server. +

+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 66e6275e..349712f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,7 @@ vis.js | documentation - + @@ -61,7 +61,7 @@ Plot data on a timeline with lines or barcharts.
  • - Graph3d. + Graph3d. Display data in a three dimensional graph.
  • diff --git a/docs/network/configure.html b/docs/network/configure.html index 767d610e..09284e5d 100644 --- a/docs/network/configure.html +++ b/docs/network/configure.html @@ -13,7 +13,7 @@ - + @@ -118,41 +118,40 @@ network.setOptions(options);

    As shown above, alternative to supplying an object, you can supply a String, Array, Function or Boolean. These will do the same as the filter option described below.

    - +
    - - - - + + + + - - + + - - + + - - + +
    nametypedefaultdescriptionNameTypeDefaultDescription
    enabledBooleantrueBooleantrue Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true.
    filterString, Array, Boolean, FunctiontrueString, Array, Boolean, Functiontrue When a boolean, true gives you all options, false will not show any. If a string is supplied, any combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an array of strings, any of the previously mentioned fields are accepted.

    When supplying a function, you receive two arguments. The option and the path of the option within the options object. If it returns true, the options will be shown in the configurator. Example: -
    +                
     function (option, path) {
       return path.indexOf('physics') !== -1;
    -}
    -                
    +}
    This only shows the physics options.
    containerDOM elementundefinedDOM elementundefined This allows you to put the configure list in another HTML container than below the network.
    diff --git a/docs/network/edges.html b/docs/network/edges.html index 95ca37ce..f9961fcc 100644 --- a/docs/network/edges.html +++ b/docs/network/edges.html @@ -11,7 +11,7 @@ - + @@ -191,17 +191,17 @@ network.setOptions(options);

    These options can also be set per individual edge.

    - +
    - - - - + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
    nametypedefaultdescriptionNameTypeDefaultDescription
    arrowsObject or StringundefinedObject or Stringundefined To draw an arrow with default settings a string can be supplied. For example: arrows:'to, from, middle' or 'to;from', any combination with any seperating symbol is fine. If you want to control the size of the arrowheads, you can supply an object. @@ -209,42 +209,42 @@ network.setOptions(options);
    colorObject or StringObjectObject or StringObject The color object contains the color information of the edge in every situation. When the edge only needs a single color, a color value like 'rgb(120,32,14)', '#ffffff' or 'red' can be supplied instead of an object. @@ -252,30 +252,30 @@ network.setOptions(options);
    dashesArray or BooleanfalseArray or Booleanfalse When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array. Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is repeated until the distance is filled. @@ -308,56 +308,56 @@ network.setOptions(options);
    fontObject or StringfalseObject or Stringfalse This object defines the details of the label. A shorthand is also supported in the form 'size face color' for example: '14px arial red'.
    hiddenBooleanfalseBooleanfalse When true, the edge is not drawn. It is part still part of the physics simulation however!
    hoverWidthNumber or Function0.5Number or Function0.5 Assuming the hover behaviour is enabled in the interaction module, the hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is supplied, this number will be added to the width. @@ -394,34 +394,34 @@ var options: {
    idStringundefinedStringundefined The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.
    labelStringundefinedStringundefined The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.
    lengthNumberundefinedNumberundefined The physics simulation gives edges a spring length. This value can override the length of the spring in rest.
    physicsBooleantrueBooleantrue When true, the edge is part of the physics simulation. When false, it will not act as a spring.
    scalingObjectObjectObjectObject If the value option is specified, the width of the edges will be scaled according to the properties in this object. Keep in mind that when using scaling, the width option is neglected. @@ -429,58 +429,58 @@ var options: {
    selectionWidthNumber or Function1Number or Function1 The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied, this number will be added to the width. Because the width can be altered by the value and the scaling functions, a constant multiplier or added @@ -535,48 +535,48 @@ var options: {
    selfReferenceSizeNumberfalseNumberfalse When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.
    shadowObject or BooleanObjectObject or BooleanObject When true, the edge casts a shadow using the default settings. This can be further refined by supplying an object.
    smoothObject or BooleanObjectObject or BooleanObject When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than that of straight curves but it looks better. There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves @@ -586,16 +586,16 @@ var options: {
    titleStringundefinedStringundefined The title is shown in a pop-up when the mouse moves over the edge.
    valueNumberundefinedNumberundefined When a value is set, the edges' width will be scaled using the options in the scaling object defined above.
    widthNumber1Number1 The width of the edge. If value is set, this is not used.
    diff --git a/docs/network/groups.html b/docs/network/groups.html index 506afc4a..e737a6f3 100644 --- a/docs/network/groups.html +++ b/docs/network/groups.html @@ -11,7 +11,7 @@ - + @@ -105,17 +105,17 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    - +
    - - - - + + + + - - + + - - + +
    nametypedefaultdescriptionNameTypeDefaultDescription
    useDefaultGroupsBooleantrueBooleantrue If your nodes have groups defined that are not in the Groups module, the module loops over the groups it does have, allocating one for each unknown group. When all are used, it goes back to the first group. By setting this to false, the default groups will not be used in this cycle. @@ -123,8 +123,8 @@ network.setOptions(options);
    group*ObjectObject You can add multiple groups containing styling information that applies to a certain subset of groups. All options described in the nodes module that make sense can be used here diff --git a/docs/network/index.html b/docs/network/index.html index a9212308..80b8ac47 100644 --- a/docs/network/index.html +++ b/docs/network/index.html @@ -11,7 +11,7 @@ - + - + - + B so B is a level lower than A.
    diff --git a/docs/network/manipulation.html b/docs/network/manipulation.html index dc6992a0..f88f9420 100644 --- a/docs/network/manipulation.html +++ b/docs/network/manipulation.html @@ -10,7 +10,7 @@ - + - + - + @@ -91,7 +91,7 @@ var options = { springLength: 95, springConstant: 0.04, damping: 0.09, - avoidOverlap: false + avoidOverlap: 0 }, forceAtlas2Based: { theta: 0.5, @@ -100,15 +100,14 @@ var options = { springConstant: 0.08, springLength: 100, damping: 0.4, - avoidOverlap: false + avoidOverlap: 0 }, repulsion: { centralGravity: 0.2, springLength: 200, springConstant: 0.05, nodeDistance: 100, - damping: 0.09, - avoidOverlap: false + damping: 0.09 }, hierarchicalRepulsion: { centralGravity: 0.0, @@ -144,52 +143,51 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    - - - - - - - - - - -
    nametypedefaultdescription
    barnesHut Object Object BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.
    forceAtlas2Based Object Object Force Atlas 2 has been developed by Jacomi et al (2014) for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    barnesHut Object Object BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.
    forceAtlas2Based Object Object Force Atlas 2 has been developed by Jacomi et al (2014) for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model, which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a multiplier based on the amount of connected edges plus one.
    repulsion Object Object The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).
    hierarchicalRepulsion Object Object This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.
    maxVelocity Number 50 The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.
    minVelocity Number 0.1 Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.
    solver String 'barnesHut'You can select your own solver. Possible options: 'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.
    stabilization Object | BooleanObject When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.
    timestep Number 0.5 The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.
    repulsion Object Object The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).
    hierarchicalRepulsion Object Object This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.
    maxVelocity Number 50 The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.
    minVelocity Number 0.1 Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.
    solver String 'barnesHut'You can select your own solver. Possible options: 'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.
    stabilization Object | BooleanObject When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.
    timestep Number 0.5 The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.
    diff --git a/docs/dataset.html b/docs/old/dataset.html similarity index 99% rename from docs/dataset.html rename to docs/old/dataset.html index 94a1ab9e..48007fad 100644 --- a/docs/dataset.html +++ b/docs/old/dataset.html @@ -5,7 +5,7 @@ vis.js | DataSet documentation - + diff --git a/docs/dataview.html b/docs/old/dataview.html similarity index 99% rename from docs/dataview.html rename to docs/old/dataview.html index b8c8c7d7..c6046d64 100644 --- a/docs/dataview.html +++ b/docs/old/dataview.html @@ -5,7 +5,7 @@ vis.js | DataView documentation - + diff --git a/docs/graph3d.html b/docs/old/graph3d.html similarity index 98% rename from docs/graph3d.html rename to docs/old/graph3d.html index 9a94a1f2..54250778 100644 --- a/docs/graph3d.html +++ b/docs/old/graph3d.html @@ -3,10 +3,10 @@ vis.js | graph3d documentation - - + + - + @@ -39,7 +39,7 @@

    Example

    The following code shows how to create a Graph3d and provide it with data. - More examples can be found in the examples directory. + More examples can be found in the examples directory.

    diff --git a/docs/network/old/canvas.html b/docs/old/old_network/canvas.html
    similarity index 98%
    rename from docs/network/old/canvas.html
    rename to docs/old/old_network/canvas.html
    index 41b9770c..8e519b05 100644
    --- a/docs/network/old/canvas.html
    +++ b/docs/old/old_network/canvas.html
    @@ -100,7 +100,7 @@ var options = {
     network.setOptions(options);
     

    All of the individual options are explained here:

    - +
    @@ -133,7 +133,7 @@ network.setOptions(options);

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    name type
    +
    @@ -169,7 +169,7 @@ network.setOptions(options);

    Events

    This is a list of all the events in the public API. They are collected here from all individual modules.

    -
    name returns
    +
    diff --git a/docs/network/old/clustering.html b/docs/old/old_network/clustering.html similarity index 98% rename from docs/network/old/clustering.html rename to docs/old/old_network/clustering.html index 370af2ad..97597a41 100644 --- a/docs/network/old/clustering.html +++ b/docs/old/old_network/clustering.html @@ -84,7 +84,7 @@

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    name properties
    +
    namereturnsdescription
    findNode(
      String nodeId
    )
    Array Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example:
    @@ -113,7 +113,7 @@

    Cluster options object

    The options object supplied to the cluster functions can contain these properties:

    - +
    nameTypedescription
    joinCondition(
      Object nodeOptions
    )
    Function Optional for all but the cluster method. The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument. diff --git a/docs/network/old/rendering.html b/docs/old/old_network/rendering.html similarity index 97% rename from docs/network/old/rendering.html rename to docs/old/old_network/rendering.html index 22c25419..28e8b0cd 100644 --- a/docs/network/old/rendering.html +++ b/docs/old/old_network/rendering.html @@ -90,7 +90,7 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    - +
    @@ -98,14 +98,14 @@ network.setOptions(options);

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    nametypedefaultdescription
    hideEdgesOnDragBooleanfalseWhen true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
    hideNodesOnDragBooleanfalseWhen true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
    +
    namereturnsdescription
    redraw()noneRedraw the network.

    Events

    These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.

    - +
    diff --git a/docs/network/old/selection.html b/docs/old/old_network/selection.html similarity index 98% rename from docs/network/old/selection.html rename to docs/old/old_network/selection.html index 6f0ed8f1..2290a209 100644 --- a/docs/network/old/selection.html +++ b/docs/old/old_network/selection.html @@ -91,7 +91,7 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    -
    namepropertiesdescription
    initRedrawnoneFired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.
    beforeDrawingcanvas contextFired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.
    +
    @@ -99,7 +99,7 @@ network.setOptions(options);

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    nametypedefaultdescription
    selectable BooleantrueWhen true, the nodes and edges can be selected by the user.
    selectConnectedEdges BooleantrueWhen true, on selecting a node, its connecting edges are highlighted.
    +
    namereturnsdescription
    getSelection()
    diff --git a/docs/network/old/view.html b/docs/old/old_network/view.html
    similarity index 99%
    rename from docs/network/old/view.html
    rename to docs/old/old_network/view.html
    index 0eea7ffe..6183da66 100644
    --- a/docs/network/old/view.html
    +++ b/docs/old/old_network/view.html
    @@ -76,7 +76,7 @@
     
         

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    - +
    @@ -140,7 +140,7 @@

    Events

    These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.

    -
    namereturnsdescription
    getScale() NumberReturns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.
    getPosition() NumberReturns the current central focus point of the camera.
    +
    namepropertiesdescription
    animationFinishednoneFired when an animation is finished.
    diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 2ff424e5..acf22f1f 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -10,7 +10,7 @@ - + @@ -230,7 +230,7 @@ var items = [ The item properties are defined as:

    - +
    @@ -239,8 +239,8 @@ var items = [ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -360,7 +360,7 @@ var groups = [ Groups can have the following properties:

    -
    Name Type
    classNameStringnoStringno This field is optional. A className can be used to give items an individual css style. For example, when an item has className 'red', one can define a css style like: @@ -256,22 +256,22 @@ var items = [
    contentStringyesStringyes The contents of the item. This can be plain text or html code.
    endDate or number or string or MomentnoDate or number or string or Momentno The end date of the item. The end date is optional, and can be left null. If end date is provided, the item is displayed as a range. If not, the item is displayed as a box.
    groupany typenoany typeno This field is optional. When the group column is provided, all items with the same group are placed on one line. A vertical axis is displayed showing the groups. @@ -281,22 +281,22 @@ var items = [
    idString or NumbernoString or Numberno An id for the item. Using an id is not required but highly recommended. An id is needed when dynamically adding, updating, and removing items in a DataSet.
    startDate or number or string or MomentyesDate or number or string or Momentyes The start date of the item, for example new Date(2010,9,23).
    styleStringnoStringno A css text string to apply custom styling for an individual item, for example "color: red; background-color: pink;". @@ -304,8 +304,8 @@ var items = [
    subgroupString or NumbernoneString or Numbernone The id of a subgroup. Groups all items within a group per subgroup, and positions them on the same height instead of staking them on top of each other. can be ordered @@ -314,16 +314,16 @@ var items = [
    titleStringnoneStringnone Add a title for the item, displayed when holding the mouse on the item. The title can only contain plain text.
    typeStringnoStringno The type of the item. Can be 'box' (default), 'point', 'range', or 'background'. Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
    +
    @@ -369,8 +369,8 @@ var groups = [ - - + + - - + + - - + + - - + + - - + + - - + + @@ -447,7 +447,7 @@ var options = { The following options are available.

    -
    Name Type
    classNameStringnoStringno This field is optional. A className can be used to give groups an individual css style. For example, when a group has className 'red', one can define a css style @@ -385,22 +385,22 @@ var groups = [
    contentStringyesStringyes The contents of the group. This can be plain text or html code.
    idString or NumberyesString or Numberyes An id for the group. The group will display all items having a property group which matches the id of the group.
    styleStringnoStringno A css text string to apply custom styling for an individual group label, for example "color: red; background-color: pink;". @@ -408,16 +408,16 @@ var groups = [
    subgroupOrderString or FunctionnoneString or Functionnone Order the subgroups by a field name or custom sort function. By default, groups are ordered by first-come, first-show.
    titleStringnoneStringnone A title for the group, displayed when holding the mouse on the groups label. The title can only contain plain text.
    +
    @@ -457,78 +457,85 @@ var options = { - - + + - - + + - - + + - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -536,8 +543,8 @@ var options = { - - + + - - + + @@ -578,8 +585,8 @@ var options = { - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -655,15 +662,15 @@ var options = { - - + + - - + + @@ -671,15 +678,15 @@ var options = { - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -868,23 +875,23 @@ var options = { - - + + - - + + - - + + - - + + - - + + @@ -918,7 +925,7 @@ var options = { The Timeline supports the following methods.

    -
    Name Type
    alignString'center'String'center' Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.
    autoResizebooleantruebooleantrue 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 redraw().
    clickToUsebooleanfalsebooleanfalse When a Timeline is configured to be clickToUse, 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.
    configurebooleanfalseWhen true, a configurator is loaded where all configuration options of the Timeline can be changed live.boolean or functionfalseWhen true, a configurator is loaded where all configuration options of the Timeline can be changed live. + + The displayed options can be filtered by providing a filter function. This function is invoked with two arguments: the current option and the path (an Array) of the option within the options object. The option will be displayed when the filter function returns true. For example to only display format options: +
    +function (option, path) {
    +  return option === 'format' || path.indexOf('format') !== -1;
    +}
    +
    dataAttributesstring[] or 'all'falsestring[] or 'all'false An array of fields optionally defined on the timeline items that will be appended as data- attributes to the DOM element of the items.
    If value is 'all' then each field defined on the timeline item will become a data- attribute.
    editableboolean or Objectfalseboolean or Objectfalse If true, the items in the timeline can be manipulated. Only applicable when option selectable is true. See also the callbacks onAdd, onUpdate, onMove, and onRemove. When editable is an object, one can enable or disable individual manipulation actions. See section Editing Items for a detailed explanation.
    endDate or Number or String or MomentnoneDate or Number or String or Momentnone 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.
    formatObjectnoneObjectnone Apply custom date formatting of the labels on the time axis. The default value of format is:
    {
    @@ -569,8 +576,8 @@ var options = {
     
         
    groupOrderString or FunctionnoneString or Functionnone Order the groups by a field name or custom sort function. By default, groups are not ordered.
    heightnumber or Stringnonenumber or Stringnone 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. @@ -591,8 +598,8 @@ var options = {
    hiddenDatesObjectnoneObjectnone This option allows you to hide specific timespans from the time axis. The dates can be supplied as an object: {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']} or as an Array of these objects. The repeat argument is optional. The possible values are (case-sensitive): daily, weekly, monthly, yearly. To hide a weekend, pick any Saturday as start and the following Monday as end @@ -601,53 +608,53 @@ var options = {
    localeStringnoneStringnone Select a locale for the Timeline. See section Localization for more information.
    localesObjectnoneObjectnone A map with i18n locales. See section Localization for more information.
    marginnumber or ObjectObjectnumber or ObjectObject When a number, applies the margin to margin.axis, margin.item.horizontal, and margin.item.vertical.
    maxDate or Number or String or MomentnoneDate or Number or String or Momentnone Set a maximum Date for the visible range. It will not be possible to move beyond this maximum.
    maxHeightnumber or Stringnonenumber or Stringnone Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".
    minDate or Number or String or MomentnoneDate or Number or String or Momentnone Set a minimum Date for the visible range. It will not be possible to move beyond this minimum.
    minHeightnumber or Stringnonenumber or Stringnone Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
    moveablebooleantruebooleantrue Specifies whether the Timeline can be moved and zoomed by dragging the window. See also option zoomable. @@ -688,8 +695,8 @@ var options = {
    multiselectbooleanfalsebooleanfalse If true, multiple items can be selected using ctrl+click, shift+click, or by holding items. Only applicable when option selectable is true. @@ -698,48 +705,48 @@ var options = {
    onAddfunctionnonefunctionnone Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.add are set true.
    onUpdatefunctionnonefunctionnone Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true.
    onMovefunctionnonefunctionnone Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true.
    onMovingfunctionnonefunctionnone Callback function triggered repeatedly when an item is being moved. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true.
    onRemovefunctionnonefunctionnone Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options selectable and editable.remove are set true.
    orderfunctionnonefunctionnone

    Provide a custom sort function to order the items. The order of the items is determining the way they are stacked. The function @@ -752,43 +759,43 @@ var options = {

    orientationString or Object'bottom'String or Object'bottom' Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), or 'both'.
    selectablebooleantruebooleantrue If true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event select is fired each time the selection has changed (see section Events).
    showCurrentTimebooleantruebooleantrue Show a vertical bar at the current time.
    showMajorLabelsbooleantruebooleantrue 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. @@ -798,8 +805,8 @@ var options = {
    showMinorLabelsbooleantruebooleantrue 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. @@ -811,15 +818,15 @@ var options = {
    stackbooleantruebooleantrue If true (default), items will be stacked on top of each other such that they do not overlap.
    snapfunction or nullfunctionfunction or nullfunction When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The snap function can be replaced with a custom function, or can be set to null to disable snapping. The signature of the snap function is:
    function snap(date: Date, scale: string, step: number) : Date or number
    The parameter scale can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'day, 'month, or 'year'. The parameter step is a number like 1, 2, 4, 5. @@ -828,29 +835,29 @@ var options = {
    startDate or Number or String or MomentnoneDate or Number or String or Momentnone 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.
    templatefunctionnonefunctionnone A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation.
    timeAxisObjectObjectObjectObject Specify a fixed scale and step size for the time axis.
    typeStringnoneStringnone Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created. Items of type 'background' are not editable.
    widthString or Number'100%'String or Number'100%' The width of the timeline in pixels or as a percentage.
    zoomablebooleantruebooleantrue Specifies whether the Timeline can be zoomed by pinching or scrolling in the window. Only applicable when option moveable is set true. @@ -893,8 +900,8 @@ var options = {
    zoomMaxnumber315360000000000number315360000000000 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. @@ -903,8 +910,8 @@ var options = {
    zoomMinnumber10number10 Set a minimum zoom interval for the visible range in milliseconds. It will not be possible to zoom in further than this minimum.
    +
    @@ -927,7 +934,7 @@ var options = { - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -1058,7 +1065,7 @@ var options = { - + @@ -1066,7 +1073,7 @@ var options = { - + - + - + - + - + - + - +
    Method Return Type
    addCustomTime([time] [, id])number or Stringnumber or String Add new vertical bar representing a custom time that can be dragged by the user. Parameter time can be a Date, Number, or String, and is new Date() by default. @@ -938,14 +945,14 @@ var options = {
    destroy()nonenone Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
    fit([options])nonenone Adjust the visible window such that it fits all items. See also function focus(id). Available options:
      @@ -957,7 +964,7 @@ var options = {
    focus(id or ids [, options])nonenone Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function fit(). Available options:
    • animation: boolean or {duration: number, easingFunction: string}
      If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • @@ -967,21 +974,21 @@ var options = {
    getCurrentTime()DateDate Get the current time. Only applicable when option showCurrentTime is true.
    getCustomTime([id])DateDate Retrieve the custom time from the custom time bar with given id. Id is undefined by default.
    getEventProperties(event)ObjectObject Returns an Object with relevant properties from an event:
      @@ -1001,25 +1008,25 @@ var options = {
    getSelection()number[]number[] Get an array with the ids of the currently selected items.
    getVisibleItems()number[]number[] Get an array with the ids of the currently visible items.
    getWindow()ObjectObject Get the current visible window. Returns an object with properties start: Date and end: Date.
    moveTo(time [, options])nonenone Move the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options:
    • animation: boolean or {duration: number, easingFunction: string}
      If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • @@ -1029,19 +1036,19 @@ var options = {
    on(event, callback)nonenone Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information.
    off(event, callback)nonenone Remove an event listener created before via function on(event, callback). See section Events for more information.
    redraw()nonenone Force a redraw of the Timeline. The size of all items will be recalculated. Can be useful to manually redraw when option autoResize=false and the window has been resized, or when the items CSS has been changed. @@ -1050,7 +1057,7 @@ var options = {
    removeCustomTime(id)nonenone Remove vertical bars previously added to the timeline via addCustomTime method. Parameter id is the ID of the custom vertical bar returned by addCustomTime method.
    setCurrentTime(time)nonenone Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time. time can be a Date object, numeric timestamp, or ISO date string. Only applicable when option showCurrentTime is true.
    setCustomTime(time [, id])nonenone Adjust the time of a custom time bar. Parameter time can be a Date object, numeric timestamp, or ISO date string. Parameter id is the idof the custom time bar, and is undefined by default. @@ -1075,7 +1082,7 @@ var options = {
    setData({
      groups: groups,
      items: items
    })
    nonenone Set both groups and items at once. Both properties are optional. This is a convenience method for individually calling both setItems(items) and setGroups(groups). Both items and groups can be an Array with Objects, a DataSet, or a DataView. For each of the groups, the items of the @@ -1086,7 +1093,7 @@ var options = {
    setGroups(groups)nonenone Set a data set with groups for the Timeline. groups can be an Array with Objects, a DataSet, or a DataView. For each of the groups, the items of the @@ -1097,7 +1104,7 @@ var options = {
    setItems(items)nonenone Set a data set with items for the Timeline. items can be an Array with Objects, a DataSet, or a DataView. @@ -1106,14 +1113,14 @@ var options = {
    setOptions(options)nonenone Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly.
    setSelection(id or ids [, options])nonenone Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
    • focus: boolean
      If true, focus will be set to the selected item(s)
    • @@ -1124,7 +1131,7 @@ var options = {
    setWindow(start, end [, options])nonenone Set the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged. Available options:
    • animation: boolean or {duration: number, easingFunction: string}
      If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • @@ -1175,30 +1182,27 @@ timeline.off('select', onSelect); The following events are available.

      - - - - - - - +
      - - + + - + + - - + - + - + - + - + - +
      nameDescriptionName PropertiesDescription
      clickFired when clicked inside the Timeline. - Passes a properties object as returned by the method Timeline.getEventProperties(event). Fired when clicked inside the Timeline. +
      contextmenu + Passes a properties object as returned by the method Timeline.getEventProperties(event). + 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:
      timeline.on('contextmenu', function (props) {
         alert('Right click!');
      @@ -1206,24 +1210,19 @@ timeline.off('select', onSelect);
       });
       
      - Passes a properties object as returned by the method Timeline.getEventProperties(event). -
      doubleClickFired when double clicked inside the Timeline. - Passes a properties object as returned by the method Timeline.getEventProperties(event). Fired when double clicked inside the Timeline. +
      rangechangeFired repeatedly when the timeline window is being changed. -
      • start (Number): timestamp of the current start of the window.
      • @@ -1231,12 +1230,12 @@ timeline.off('select', onSelect);
      • byUser (Boolean): change happened because of user drag/zoom.
      Fired repeatedly when the timeline window is being changed. +
      rangechangedFired once after the timeline window has been changed. -
      • start (Number): timestamp of the current start of the window.
      • @@ -1244,45 +1243,47 @@ timeline.off('select', onSelect);
      • byUser (Boolean): change happened because of user drag/zoom.
      Fired once after the timeline window has been changed. +
      selectFired after the user selects or deselects items by tapping or holding them. - When a use taps an already selected item, the select event is fired again. - Not fired when the method setSelectionis executed. -
      • items: an array with the ids of the selected items
      Fired after the user selects or deselects items by tapping or holding them. + When a use taps an already selected item, the select event is fired again. + Not fired when the method setSelectionis executed. +
      timechangeFired repeatedly when the user is dragging the custom time bar. - Only available when the custom time bar is enabled. -
      • id (Number or String): custom time bar id.
      • time (Date): the custom time.
      Fired repeatedly when the user is dragging the custom time bar. + Only available when the custom time bar is enabled. +
      timechangedFired once after the user has dragged the custom time bar. - Only available when the custom time bar is enabled. -
      • id (Number or String): custom time bar id.
      • time (Date): the custom time.
      Fired once after the user has dragged the custom time bar. + Only available when the custom time bar is enabled. +
      @@ -1469,7 +1470,7 @@ var options = { Timeline comes with support for the following locales:

      - +
      @@ -1520,33 +1521,33 @@ var options = { The following classes are available:

      -
      Language Code
      +
      - + - + - + - + - + - + - + - + - +
      DescriptionvaluesDescriptionValues
      Alternating columnsvis-even, vis-oddAlternating columnsvis-even, vis-odd
      Current datevis-today, vis-tomorrow, vis-yesterday, vis-current-week, vis-current-month, vis-current-yearCurrent datevis-today, vis-tomorrow, vis-yesterday, vis-current-week, vis-current-month, vis-current-year
      Hoursvis-h0, vis-h1, ..., vis-h23Hoursvis-h0, vis-h1, ..., vis-h23
      Grouped hoursvis-h0-h4 to vis-h20-h24Grouped hoursvis-h0-h4 to vis-h20-h24
      Weekdayvis-monday, vis-tuesday, vis-wednesday, vis-thursday, vis-friday, vis-saturday, vis-sundayWeekdayvis-monday, vis-tuesday, vis-wednesday, vis-thursday, vis-friday, vis-saturday, vis-sunday
      Daysvis-date1, vis-date2, ..., vis-date31Daysvis-date1, vis-date2, ..., vis-date31
      Monthsvis-januari, vis-februari, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-decemberMonthsvis-januari, vis-februari, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-december
      Yearsvis-year2014, vis-year2015, ...Yearsvis-year2014, vis-year2015, ...
      diff --git a/examples/index.html b/examples/index.html index 9540cefe..a16c24e4 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,7 +4,7 @@ vis.js | examples - + diff --git a/examples/timeline/index.html b/examples/timeline/index.html index bfad35dd..770e3247 100644 --- a/examples/timeline/index.html +++ b/examples/timeline/index.html @@ -4,7 +4,7 @@ vis.js | timeline examples - + diff --git a/lib/DataSet.js b/lib/DataSet.js index 98558bee..e8d1c973 100644 --- a/lib/DataSet.js +++ b/lib/DataSet.js @@ -142,8 +142,10 @@ DataSet.prototype.on = function(event, callback) { }); }; -// TODO: make this function deprecated (replaced with `on` since version 0.5) -DataSet.prototype.subscribe = DataSet.prototype.on; +// TODO: remove this deprecated function some day (replaced with `on` since version 0.5, deprecated since v4.0) +DataSet.prototype.subscribe = function () { + throw new Error('DataSet.subscribe is deprecated. Use DataSet.on instead.'); +}; /** * Unsubscribe from an event, remove an event listener @@ -157,8 +159,10 @@ DataSet.prototype.off = function(event, callback) { } }; -// TODO: make this function deprecated (replaced with `on` since version 0.5) -DataSet.prototype.unsubscribe = DataSet.prototype.off; +// TODO: remove this deprecated function some day (replaced with `on` since version 0.5, deprecated since v4.0) +DataSet.prototype.unsubscribe = function () { + throw new Error('DataSet.unsubscribe is deprecated. Use DataSet.off instead.'); +}; /** * Trigger an event diff --git a/lib/network/Network.js b/lib/network/Network.js index fa299807..78f96759 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -24,7 +24,7 @@ import InteractionHandler from './modules/InteractionHandler'; import SelectionHandler from "./modules/SelectionHandler"; import LayoutEngine from "./modules/LayoutEngine"; import ManipulationSystem from "./modules/ManipulationSystem"; -import ConfigurationSystem from "./../shared/ConfigurationSystem"; +import Configurator from "./../shared/Configurator"; import Validator from "./../shared/Validator"; import {printStyle} from "./../shared/Validator"; import {allOptions, configureOptions} from './options.js'; @@ -123,7 +123,7 @@ function Network(container, data, options) { this.canvas._create(); // setup configuration system - this.configurationSystem = new ConfigurationSystem(this, this.body.container, configureOptions, this.canvas.pixelRatio); + this.configurator = new Configurator(this, this.body.container, configureOptions, this.canvas.pixelRatio); // apply options this.setOptions(options); @@ -177,10 +177,10 @@ Network.prototype.setOptions = function (options) { //this.view.setOptions(options.view); //this.clustering.setOptions(options.clustering); - this.configurationSystem.setOptions(options.configure); + this.configurator.setOptions(options.configure); // if the configuration system is enabled, copy all options and put them into the config system - if (this.configurationSystem.options.enabled === true) { + if (this.configurator.options.enabled === true) { let networkOptions = {nodes:{},edges:{},layout:{},interaction:{},manipulation:{},physics:{},global:{}}; util.deepExtend(networkOptions.nodes, this.nodesHandler.options); util.deepExtend(networkOptions.edges, this.edgesHandler.options); @@ -197,7 +197,7 @@ Network.prototype.setOptions = function (options) { util.deepExtend(networkOptions.global, this.canvas.options); util.deepExtend(networkOptions.global, this.options); - this.configurationSystem.setModuleOptions(networkOptions); + this.configurator.setModuleOptions(networkOptions); } // handle network global options @@ -359,7 +359,7 @@ Network.prototype.destroy = function () { delete this.manipulation; delete this.nodesHandler; delete this.edgesHandler; - delete this.configurationSystem; + delete this.configurator; delete this.images; // delete emitter bindings diff --git a/lib/network/modules/components/ColorPicker.js b/lib/shared/ColorPicker.js similarity index 99% rename from lib/network/modules/components/ColorPicker.js rename to lib/shared/ColorPicker.js index 16e36f5c..a46b7088 100644 --- a/lib/network/modules/components/ColorPicker.js +++ b/lib/shared/ColorPicker.js @@ -1,6 +1,6 @@ -let Hammer = require('../../../module/hammer'); -let hammerUtil = require('../../../hammerUtil'); -let util = require('../../../util'); +let Hammer = require('../module/hammer'); +let hammerUtil = require('../hammerUtil'); +let util = require('../util'); class ColorPicker { constructor(pixelRatio = 1) { diff --git a/lib/shared/ConfigurationSystem.js b/lib/shared/Configurator.js similarity index 97% rename from lib/shared/ConfigurationSystem.js rename to lib/shared/Configurator.js index c91e33c0..3862ff0d 100644 --- a/lib/shared/ConfigurationSystem.js +++ b/lib/shared/Configurator.js @@ -1,6 +1,6 @@ var util = require('../util'); -import ColorPicker from './../network/modules/components/ColorPicker' +import ColorPicker from './ColorPicker' /** * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options. @@ -16,7 +16,7 @@ import ColorPicker from './../network/modules/components/ColorPicker' * @param configureOptions | the fully configured and predefined options set found in allOptions.js * @param pixelRatio | canvas pixel ratio */ -class ConfigurationSystem { +class Configurator { constructor(parentModule, defaultContainer, configureOptions, pixelRatio = 1) { this.parent = parentModule; this.changedOptions = []; @@ -35,7 +35,7 @@ class ConfigurationSystem { this.moduleOptions = {}; this.domElements = []; this.colorPicker = new ColorPicker(pixelRatio); - this.wrapper; + this.wrapper = undefined; } @@ -92,25 +92,24 @@ class ConfigurationSystem { /** * Create all DOM elements - * @param {Boolean | String} config * @private */ _create() { this._clean(); this.changedOptions = []; - let config = this.options.filter; + let filter = this.options.filter; let counter = 0; let show = false; for (let option in this.configureOptions) { if (this.configureOptions.hasOwnProperty(option)) { this.allowCreation = false; show = false; - if (typeof config === 'function') { - show = config(option,[]); + if (typeof filter === 'function') { + show = filter(option,[]); show = show || this._handleObject(this.configureOptions[option], [option]); } - else if (config === true || config.indexOf(option) !== -1) { + else if (filter === true || filter.indexOf(option) !== -1) { show = true; } @@ -450,13 +449,16 @@ class ConfigurationSystem { */ _handleObject(obj, path = []) { let show = false; - let config = this.options.filter; + let filter = this.options.filter; let visibleInSet = false; for (let subObj in obj) { if (obj.hasOwnProperty(subObj)) { show = false; - if (typeof config === 'function') { - show = config(subObj,path); + if (typeof filter === 'function') { + show = filter(subObj,path); + } + else if (filter === true) { + show = true; } if (show !== false) { @@ -583,4 +585,4 @@ class ConfigurationSystem { } -export default ConfigurationSystem; \ No newline at end of file +export default Configurator; \ No newline at end of file diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 64ff983e..ae4cc452 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -282,16 +282,15 @@ Core.prototype.setOptions = function (options) { this.components.forEach(component => component.setOptions(options)); // enable/disable configure - if (this.configurationSystem) { - this.configurationSystem.setOptions(options.configure); + if (this.configurator) { + this.configurator.setOptions(options.configure); // collect the settings of all components, and pass them to the configuration system var appliedOptions = util.deepExtend({}, this.options); this.components.forEach(function (component) { util.deepExtend(appliedOptions, component.options); }); - this.configurationSystem.setModuleOptions({global: appliedOptions}); - console.log(appliedOptions) + this.configurator.setModuleOptions({global: appliedOptions}); } // redraw everything diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js index 32ee27a1..0ab6ab28 100644 --- a/lib/timeline/Graph2d.js +++ b/lib/timeline/Graph2d.js @@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime'); var CustomTime = require('./component/CustomTime'); var LineGraph = require('./component/LineGraph'); -var ConfigurationSystem = require('../shared/ConfigurationSystem'); +var Configurator = require('../shared/Configurator'); var Validator = require('../shared/Validator').default; var printStyle = require('../shared/Validator').printStyle; -var allOptions = require('./graph2dOptions').allOptions; -var configureOptions = require('./graph2dOptions').configureOptions; +var allOptions = require('./optionsGraph2d').allOptions; +var configureOptions = require('./optionsGraph2d').configureOptions; /** * Create a timeline visualization @@ -105,13 +105,11 @@ function Graph2d (container, items, groups, options) { me.emit('contextmenu', me.getEventProperties(event)) }; + // setup configuration system + this.configurator = new Configurator(this, container, configureOptions); + // apply options if (options) { - let errorFound = Validator.validate(options, allOptions); - if (errorFound === true) { - console.log('%cErrors have been found in the supplied options object.', printStyle); - } - this.setOptions(options); } @@ -132,6 +130,16 @@ function Graph2d (container, items, groups, options) { // Extend the functionality from Core Graph2d.prototype = new Core(); +Graph2d.prototype.setOptions = function (options) { + // validate options + let errorFound = Validator.validate(options, allOptions); + if (errorFound === true) { + console.log('%cErrors have been found in the supplied options object.', printStyle); + } + + Core.prototype.setOptions.call(this, options); +}; + /** * Set items * @param {vis.DataSet | Array | null} items diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index a8e56307..b59ff2da 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime'); var CustomTime = require('./component/CustomTime'); var ItemSet = require('./component/ItemSet'); -var ConfigurationSystem = require('../shared/ConfigurationSystem'); +var Configurator = require('../shared/Configurator'); var Validator = require('../shared/Validator').default; var printStyle = require('../shared/Validator').printStyle; -var allOptions = require('./options').allOptions; -var configureOptions = require('./options').configureOptions; +var allOptions = require('./optionsTimeline').allOptions; +var configureOptions = require('./optionsTimeline').configureOptions; /** * Create a timeline visualization @@ -118,7 +118,7 @@ function Timeline (container, items, groups, options) { }; // setup configuration system - this.configurationSystem = new ConfigurationSystem(this, container, configureOptions); + this.configurator = new Configurator(this, container, configureOptions); // apply options if (options) { @@ -168,8 +168,10 @@ Timeline.prototype.setOptions = function (options) { // force recreation of all items var itemsData = this.itemsData; if (itemsData) { - this.setItems(null); // remove all - this.setItems(itemsData); // add all + var selection = this.getSelection(); + this.setItems(null); // remove all + this.setItems(itemsData); // add all + this.setSelection(selection); // restore selection } } } diff --git a/lib/timeline/graph2dOptions.js b/lib/timeline/optionsGraph2d.js similarity index 97% rename from lib/timeline/graph2dOptions.js rename to lib/timeline/optionsGraph2d.js index 96ab11eb..5ff1eb42 100644 --- a/lib/timeline/graph2dOptions.js +++ b/lib/timeline/optionsGraph2d.js @@ -22,9 +22,9 @@ let any = 'any'; let allOptions = { configure: { enabled: {boolean}, - filter: {boolean,string,array}, + filter: {boolean,fn}, container: {dom}, - __type__: {object,boolean,string,array} + __type__: {object,boolean,fn} }, //globals : @@ -155,7 +155,7 @@ let allOptions = { zoomMax: {number}, zoomMin: {number}, __type__: {object} -} +}; let configureOptions = { global: { @@ -180,7 +180,7 @@ let configureOptions = { drawPoints: { enabled: true, size: [6,2,30,1], - style: 'square' // square, circle + style: ['square', 'circle'] // square, circle }, dataAxis: { showMinorLabels: true, @@ -245,7 +245,7 @@ let configureOptions = { maxHeight: '', min: '', minHeight: '', - movable:true, + moveable:true, orientation: ['both', 'bottom', 'top'], showCurrentTime: false, showMajorLabels: true, diff --git a/lib/timeline/options.js b/lib/timeline/optionsTimeline.js similarity index 97% rename from lib/timeline/options.js rename to lib/timeline/optionsTimeline.js index c2d19d02..413403e0 100644 --- a/lib/timeline/options.js +++ b/lib/timeline/optionsTimeline.js @@ -22,9 +22,9 @@ let any = 'any'; let allOptions = { configure: { enabled: {boolean}, - filter: {boolean,string,array}, + filter: {boolean,fn}, container: {dom}, - __type__: {object,boolean,string,array} + __type__: {object,boolean,fn} }, //globals :