391 lines
12 KiB
HTML
391 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" HREF="favicon.ico">
|
|
<title>DataView - vis.js - A dynamic, browser based visualization library.</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../css/bootstrap.css" rel="stylesheet">
|
|
<link href="../css/style.css" rel="stylesheet">
|
|
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
|
|
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
|
|
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
|
|
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
|
|
|
|
<script src="../js/smooth-scroll.min.js"></script>
|
|
<script language="JavaScript">
|
|
smoothScroll.init();
|
|
</script>
|
|
|
|
<script type="text/javascript" src="../js/toggleTable.js"></script>
|
|
</head>
|
|
<body onload="prettyPrint();">
|
|
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="container">
|
|
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
|
|
aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
|
|
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
|
|
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
|
|
<li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
<div class="container full">
|
|
|
|
<h1>DataView</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>
|
|
</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 to 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 class="options">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>convert</td>
|
|
<td>Object.<String, String></td>
|
|
<td>none</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[ ] | Object.<String, String></td>
|
|
<td>none</td>
|
|
<td>
|
|
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 <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>none</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 class="methods">
|
|
<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</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>.
|
|
</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>
|
|
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="../js/ie10-viewport-bug-workaround.js"></script>
|
|
<!-- controller -->
|
|
<script src="../js/main.js"></script> |