|
|
|
@ -2,69 +2,69 @@ |
|
|
|
<html> |
|
|
|
|
|
|
|
<head> |
|
|
|
<title>vis.js | DataView documentation</title> |
|
|
|
<title>vis.js | DataView documentation</title> |
|
|
|
|
|
|
|
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> |
|
|
|
<link href='css/style.css' type='text/css' rel='stylesheet'> |
|
|
|
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> |
|
|
|
<link href='css/style.css' type='text/css' rel='stylesheet'> |
|
|
|
|
|
|
|
<script type="text/javascript" src="lib/prettify/prettify.js"></script> |
|
|
|
<script type="text/javascript" src="lib/prettify/prettify.js"></script> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body onload="prettyPrint();"> |
|
|
|
<div id="container"> |
|
|
|
|
|
|
|
<h1>DataView documentation</h1> |
|
|
|
<h1>DataView documentation</h1> |
|
|
|
|
|
|
|
<h2 id="Contents">Contents</h2> |
|
|
|
<ul> |
|
|
|
<li><a href="#Overview">Overview</a></li> |
|
|
|
<li><a href="#Example">Example</a></li> |
|
|
|
<li><a href="#Construction">Construction</a></li> |
|
|
|
<li><a href="#Getting_Data">Getting Data</a></li> |
|
|
|
<li><a href="#Subscriptions">Subscriptions</a></li> |
|
|
|
<li><a href="#Data_Policy">Data Policy</a></li> |
|
|
|
</ul> |
|
|
|
<h2 id="Contents">Contents</h2> |
|
|
|
<ul> |
|
|
|
<li><a href="#Overview">Overview</a></li> |
|
|
|
<li><a href="#Example">Example</a></li> |
|
|
|
<li><a href="#Construction">Construction</a></li> |
|
|
|
<li><a href="#Getting_Data">Getting Data</a></li> |
|
|
|
<li><a href="#Subscriptions">Subscriptions</a></li> |
|
|
|
<li><a href="#Data_Policy">Data Policy</a></li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
|
|
<h2 id="Overview">Overview</h2> |
|
|
|
<h2 id="Overview">Overview</h2> |
|
|
|
|
|
|
|
<p> |
|
|
|
A DataView offers a filtered and/or formatted view on a |
|
|
|
<a href="dataset.html">DataSet</a>. |
|
|
|
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. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
A DataView offers a filtered and/or formatted view on a |
|
|
|
<a href="dataset.html">DataSet</a>. |
|
|
|
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. |
|
|
|
</p> |
|
|
|
|
|
|
|
<h2 id="Example">Example</h2> |
|
|
|
<h2 id="Example">Example</h2> |
|
|
|
|
|
|
|
<p> |
|
|
|
The following example shows how to use a DataView. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
The following example shows how to use a DataView. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
|
// 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'} |
|
|
|
{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'] |
|
|
|
filter: function (item) { |
|
|
|
return (item.group == 1); |
|
|
|
}, |
|
|
|
fields: ['id', 'text', 'date'] |
|
|
|
}); |
|
|
|
|
|
|
|
// subscribe to any change in the DataView |
|
|
|
view.subscribe('*', function (event, params, senderId) { |
|
|
|
console.log('event', event, params); |
|
|
|
console.log('event', event, params); |
|
|
|
}); |
|
|
|
|
|
|
|
// update an item in the data set |
|
|
|
@ -78,131 +78,131 @@ console.log('ids', ids); // will output [1, 2] |
|
|
|
var items = view.get(); |
|
|
|
</pre> |
|
|
|
|
|
|
|
<h2 id="Construction">Construction</h2> |
|
|
|
<h2 id="Construction">Construction</h2> |
|
|
|
|
|
|
|
|
|
|
|
<p> |
|
|
|
A DataView can be constructed as: |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
A DataView can be constructed as: |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
|
var data = new vis.DataView(dataset, options) |
|
|
|
</pre> |
|
|
|
|
|
|
|
<p> |
|
|
|
where: |
|
|
|
</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<code>dataset</code> is a DataSet or DataView. |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<code>options</code> is an object which can |
|
|
|
contain the following properties. Note that these properties |
|
|
|
are exactly the same as the properties available in methods |
|
|
|
<code>DataSet.get</code> and <code>DataView.get</code>. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<th>Name</th> |
|
|
|
<th>Type</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>convert</td> |
|
|
|
<td>Object.<String, String></td> |
|
|
|
<td> |
|
|
|
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 |
|
|
|
<a href="dataset.html#Data_Types">Data Types</a>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>fields</td> |
|
|
|
<td>String[ ]</td> |
|
|
|
<td> |
|
|
|
An array with field names. |
|
|
|
By default, all properties of the items are emitted. |
|
|
|
When <code>fields</code> is defined, only the properties |
|
|
|
whose name is specified in <code>fields</code> will be included |
|
|
|
in the returned items. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>filter</td> |
|
|
|
<td>function</td> |
|
|
|
<td>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. |
|
|
|
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
</table> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<h2 id="Getting_Data">Getting Data</h2> |
|
|
|
|
|
|
|
<p> |
|
|
|
Data of the DataView can be retrieved using the method <code>get</code>. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
where: |
|
|
|
</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<code>dataset</code> is a DataSet or DataView. |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<code>options</code> is an object which can |
|
|
|
contain the following properties. Note that these properties |
|
|
|
are exactly the same as the properties available in methods |
|
|
|
<code>DataSet.get</code> and <code>DataView.get</code>. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<th>Name</th> |
|
|
|
<th>Type</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>convert</td> |
|
|
|
<td>Object.<String, String></td> |
|
|
|
<td> |
|
|
|
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 |
|
|
|
<a href="dataset.html#Data_Types">Data Types</a>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>fields</td> |
|
|
|
<td>String[ ]</td> |
|
|
|
<td> |
|
|
|
An array with field names. |
|
|
|
By default, all properties of the items are emitted. |
|
|
|
When <code>fields</code> is defined, only the properties |
|
|
|
whose name is specified in <code>fields</code> will be included |
|
|
|
in the returned items. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>filter</td> |
|
|
|
<td>function</td> |
|
|
|
<td>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. |
|
|
|
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
</table> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<h2 id="Getting_Data">Getting Data</h2> |
|
|
|
|
|
|
|
<p> |
|
|
|
Data of the DataView can be retrieved using the method <code>get</code>. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
|
var items = view.get(); |
|
|
|
</pre> |
|
|
|
|
|
|
|
<p> |
|
|
|
Data of a DataView can be filtered and formatted again, in exactly the |
|
|
|
same way as in a DataSet. See sections |
|
|
|
<a href="dataset.html#Data_Filtering">Data Filtering</a> and |
|
|
|
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more |
|
|
|
information. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Data of a DataView can be filtered and formatted again, in exactly the |
|
|
|
same way as in a DataSet. See sections |
|
|
|
<a href="dataset.html#Data_Filtering">Data Filtering</a> and |
|
|
|
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more |
|
|
|
information. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
|
var items = view.get({ |
|
|
|
fields: ['id', 'score'], |
|
|
|
filter: function (item) { |
|
|
|
return (item.score > 50); |
|
|
|
} |
|
|
|
fields: ['id', 'score'], |
|
|
|
filter: function (item) { |
|
|
|
return (item.score > 50); |
|
|
|
} |
|
|
|
}); |
|
|
|
</pre> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 id="Subscriptions">Subscriptions</h2> |
|
|
|
<p> |
|
|
|
One can subscribe on changes in the DataView. Subscription works exactly |
|
|
|
the same as for DataSets. See the documentation on |
|
|
|
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a> |
|
|
|
for more information. |
|
|
|
</p> |
|
|
|
<h2 id="Subscriptions">Subscriptions</h2> |
|
|
|
<p> |
|
|
|
One can subscribe on changes in the DataView. Subscription works exactly |
|
|
|
the same as for DataSets. See the documentation on |
|
|
|
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a> |
|
|
|
for more information. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
|
// 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); |
|
|
|
} |
|
|
|
filter: function (item) { |
|
|
|
return (item.group == 2); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// subscribe to any change in the DataView |
|
|
|
view.subscribe('*', function (event, params, senderId) { |
|
|
|
console.log('event:', event, 'params:', params, 'senderId:', senderId); |
|
|
|
console.log('event:', event, 'params:', params, 'senderId:', senderId); |
|
|
|
}); |
|
|
|
|
|
|
|
// add, update, and remove data in the DataSet... |
|
|
|
@ -210,11 +210,11 @@ view.subscribe('*', function (event, params, senderId) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 id="Data_Policy">Data Policy</h2> |
|
|
|
<p> |
|
|
|
All code and data is processed and rendered in the browser. |
|
|
|
No data is sent to any server. |
|
|
|
</p> |
|
|
|
<h2 id="Data_Policy">Data Policy</h2> |
|
|
|
<p> |
|
|
|
All code and data is processed and rendered in the browser. |
|
|
|
No data is sent to any server. |
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</body> |
josdejong
11 years ago