vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

337 lines
9.0 KiB

<!doctype html>
<html>
<head>
<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'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="prettyPrint();">
<div id="container">
<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="#Methods">Methods</a></li>
<li><a href="#Properties">Properties</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>
<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>
<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'}
]);
// 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();
</pre>
<h2 id="Construction">Construction</h2>
<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.&lt;String,&nbsp;String&gt;</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[&nbsp;]</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="Methods">Methods</h2>
<p>DataView contains the following methods.</p>
<table>
<colgroup>
<col width="200">
</colgroup>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>
get([options] [, data])<br>
get(id [,options] [, data])<br>
get(ids [, options] [, data])
</td>
<td>Object | Array | DataTable</td>
<td>
Get a single item, multiple items, or all items from the DataView.
Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
</td>
</tr>
<tr>
<td>
getDataSet()
</td>
<td>DataSet</td>
<td>
Get the DataSet to which the DataView is connected.
</td>
</tr>
<tr>
<td>
getIds([options])
</td>
<td>Number[]</td>
<td>
Get ids of all items or of a filtered set of items.
Available <code>options</code> are described in section <a href="dataset.html#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>
Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>
Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>refresh()</td>
<td>none</td>
<td>
Refresh the filter results of a DataView. Useful when the filter function contains dynamic properties, like:
<pre class="prettyprint lang-js">var data = new vis.DataSet(...);
var view = new vis.DataView(data, {
filter: function (item) {
return item.value > threshold;
}
});</pre>
In this example, <code>threshold</code> is an external parameter. When the value of <code>threshold</code> changes, the DataView must be notified that the filter results may have changed by calling <code>DataView.refresh()</code>.
</td>
</tr>
<tr>
<td>
setDataSet(data)
</td>
<td>none</td>
<td>
Replace the DataSet of the DataView. Parameter <code>data</code> can be a DataSet or a DataView.
</td>
</tr>
</table>
<h2 id="Properties">Properties</h2>
<p>DataView contains the following properties.</p>
<table>
<colgroup>
<col width="200">
</colgroup>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>length</td>
<td>Number</td>
<td>The number of items in the DataView.</td>
</tr>
</table>
<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_Manipulation">Data Manipulation</a> and
<a href="dataset.html#Data_Selection">Data Selection</a> for more
information.
</p>
<pre class="prettyprint lang-js">
var items = view.get({
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>
<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);
}
});
// 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...
</pre>
<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>
</html>