jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!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></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 DataSetvar 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 DataViewview.on('*', function (event, properties, senderId) {  console.log('event', event, properties);});
// update an item in the data setdata.update({id: 2, group: 1});
// get all ids in the viewvar ids = view.getIds();console.log('ids', ids); // will output [1, 2]
// get all items in the viewvar 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 setvar data = new vis.DataSet();var view = new vis.DataView({  filter: function (item) {    return (item.group == 2);  }});
// subscribe to any change in the DataViewview.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>