diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
| commit | b28028ac4082842143b0f528d6bc539da6ccb419 (patch) | |
| tree | 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/docs/data/dataview.html | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/vis/docs/data/dataview.html')
| -rw-r--r-- | www/lib/vis/docs/data/dataview.html | 413 |
1 files changed, 413 insertions, 0 deletions
diff --git a/www/lib/vis/docs/data/dataview.html b/www/lib/vis/docs/data/dataview.html new file mode 100644 index 00000000..9a98f7f2 --- /dev/null +++ b/www/lib/vis/docs/data/dataview.html @@ -0,0 +1,413 @@ +<!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"> + <!-- Tipue vendor css --> + <link href="../css/tipuesearch.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> + <form class="navbar-form navbar-right" role="search"> + <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> + <button type="submit" class="btn btn-default">Go!</button> + </form> + <div id="search-results-wrapper" class="panel panel-default"> + <div class="panel-body"> + <div id="tipue_search_content"></div> + </div> + </div> + <div id="keyword-info" class="panel panel-success"> + <div class="panel-body"> + Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! + </div> + </div> + </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>. When no item is found, <code>null</code> is returned when a single item was requested, and and empty Array is returned in case of multiple id's. + </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> + setData(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> +<!-- jquery extensions --> +<script src="../js/jquery.highlight.js"></script> +<script src="../js/jquery.url.min.js"></script> +<!-- Tipue vendor js --> +<script src="../js/tipuesearch.config.js"></script> +<script src="../js/tipuesearch.js"></script> +<!-- controller --> +<script src="../js/main.js"></script>
\ No newline at end of file |