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.

220 lines
5.7 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>vis.js | DataView documentation</title>
  5. <link href="css/prettify.css" type="text/css" rel="stylesheet" />
  6. <link href='css/style.css' type='text/css' rel='stylesheet'>
  7. <script type="text/javascript" src="lib/prettify/prettify.js"></script>
  8. </head>
  9. <body onload="prettyPrint();">
  10. <div id="container">
  11. <h1>DataView documentation</h1>
  12. <h2 id="Contents">Contents</h2>
  13. <ul>
  14. <li><a href="#Overview">Overview</a></li>
  15. <li><a href="#Example">Example</a></li>
  16. <li><a href="#Construction">Construction</a></li>
  17. <li><a href="#Getting_Data">Getting Data</a></li>
  18. <li><a href="#Subscriptions">Subscriptions</a></li>
  19. <li><a href="#Data_Policy">Data Policy</a></li>
  20. </ul>
  21. <h2 id="Overview">Overview</h2>
  22. <p>
  23. A DataView offers a filtered and/or formatted view on a
  24. <a href="dataset.html">DataSet</a>.
  25. One can subscribe on changes in a DataView, and easily get filtered or
  26. formatted data without having to specify filters and field types all
  27. the time.
  28. </p>
  29. <h2 id="Example">Example</h2>
  30. <p>
  31. The following example shows how to use a DataView.
  32. </p>
  33. <pre class="prettyprint lang-js">
  34. // create a DataSet
  35. var data = new vis.DataSet();
  36. data.add([
  37. {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
  38. {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
  39. {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
  40. {id: 4, text: 'item 4'}
  41. ]);
  42. // create a DataView
  43. // the view will only contain items having a property group with value 1,
  44. // and will only output fields id, text, and date.
  45. var view = new vis.DataView(data, {
  46. filter: function (item) {
  47. return (item.group == 1);
  48. },
  49. fields: ['id', 'text', 'date']
  50. });
  51. // subscribe to any change in the DataView
  52. view.subscribe('*', function (event, params, senderId) {
  53. console.log('event', event, params);
  54. });
  55. // update an item in the data set
  56. data.update({id: 2, group: 1});
  57. // get all ids in the view
  58. var ids = view.getIds();
  59. console.log('ids', ids); // will output [1, 2]
  60. // get all items in the view
  61. var items = view.get();
  62. </pre>
  63. <h2 id="Construction">Construction</h2>
  64. <p>
  65. A DataView can be constructed as:
  66. </p>
  67. <pre class="prettyprint lang-js">
  68. var data = new vis.DataView(dataset, options)
  69. </pre>
  70. <p>
  71. where:
  72. </p>
  73. <ul>
  74. <li>
  75. <code>dataset</code> is a DataSet or DataView.
  76. </li>
  77. <li>
  78. <code>options</code> is an object which can
  79. contain the following properties. Note that these properties
  80. are exactly the same as the properties available in methods
  81. <code>DataSet.get</code> and <code>DataView.get</code>.
  82. <table>
  83. <tr>
  84. <th>Name</th>
  85. <th>Type</th>
  86. <th>Description</th>
  87. </tr>
  88. <tr>
  89. <td>convert</td>
  90. <td>Object.&lt;String,&nbsp;String&gt;</td>
  91. <td>
  92. An object containing field names as key, and data types as value.
  93. By default, the type of the properties of an item are left
  94. unchanged. When a field type is specified, this field in the
  95. items will be converted to the specified type. This can be used
  96. for example to convert ISO strings containing a date to a
  97. JavaScript Date object, or convert strings to numbers or vice
  98. versa. The available data types are listed in section
  99. <a href="dataset.html#Data_Types">Data Types</a>.
  100. </td>
  101. </tr>
  102. <tr>
  103. <td>fields</td>
  104. <td>String[&nbsp;]</td>
  105. <td>
  106. An array with field names.
  107. By default, all properties of the items are emitted.
  108. When <code>fields</code> is defined, only the properties
  109. whose name is specified in <code>fields</code> will be included
  110. in the returned items.
  111. </td>
  112. </tr>
  113. <tr>
  114. <td>filter</td>
  115. <td>function</td>
  116. <td>Items can be filtered on specific properties by providing a filter
  117. function. A filter function is executed for each of the items in the
  118. DataSet, and is called with the item as parameter. The function must
  119. return a boolean. All items for which the filter function returns
  120. true will be emitted.
  121. See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
  122. </tr>
  123. </table>
  124. </li>
  125. </ul>
  126. <h2 id="Getting_Data">Getting Data</h2>
  127. <p>
  128. Data of the DataView can be retrieved using the method <code>get</code>.
  129. </p>
  130. <pre class="prettyprint lang-js">
  131. var items = view.get();
  132. </pre>
  133. <p>
  134. Data of a DataView can be filtered and formatted again, in exactly the
  135. same way as in a DataSet. See sections
  136. <a href="dataset.html#Data_Filtering">Data Filtering</a> and
  137. <a href="dataset.html#Data_Formatting">Data Formatting</a> for more
  138. information.
  139. </p>
  140. <pre class="prettyprint lang-js">
  141. var items = view.get({
  142. fields: ['id', 'score'],
  143. filter: function (item) {
  144. return (item.score > 50);
  145. }
  146. });
  147. </pre>
  148. <h2 id="Subscriptions">Subscriptions</h2>
  149. <p>
  150. One can subscribe on changes in the DataView. Subscription works exactly
  151. the same as for DataSets. See the documentation on
  152. <a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
  153. for more information.
  154. </p>
  155. <pre class="prettyprint lang-js">
  156. // create a DataSet and a view on the data set
  157. var data = new vis.DataSet();
  158. var view = new vis.DataView({
  159. filter: function (item) {
  160. return (item.group == 2);
  161. }
  162. });
  163. // subscribe to any change in the DataView
  164. view.subscribe('*', function (event, params, senderId) {
  165. console.log('event:', event, 'params:', params, 'senderId:', senderId);
  166. });
  167. // add, update, and remove data in the DataSet...
  168. </pre>
  169. <h2 id="Data_Policy">Data Policy</h2>
  170. <p>
  171. All code and data is processed and rendered in the browser.
  172. No data is sent to any server.
  173. </p>
  174. </div>
  175. </body>
  176. </html>