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.

224 lines
5.8 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>vis.js | 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="js/prettify/prettify.js"></script>
  8. <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>
  9. <body onload="prettyPrint();">
  10. <div id="container">
  11. <h1>vis.js documentation</h1>
  12. <p>
  13. Vis.js is a dynamic, browser based visualization library.
  14. The library is designed to be easy to use, handle large amounts
  15. of dynamic data, and enable manipulation of the data.
  16. </p>
  17. <p>
  18. The library is developed by
  19. <a href="http://almende.com" target="_blank">Almende B.V.</a>.
  20. Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile
  21. browsers (with full touch support).
  22. </p>
  23. <h2 id="Components">Components</h2>
  24. <p>
  25. Vis.js contains of the following components:
  26. </p>
  27. <div style="text-align: center; float: right; padding-left: 30px;">
  28. <a href="img/vis_overview.png" target="_blank">
  29. <img src="img/vis_overview.png" style="width: 350px; "/><br>
  30. (click for a larger view)
  31. </a>
  32. </div>
  33. <ul>
  34. <li>
  35. <a href="dataset.html"><b>DataSet</b></a>.
  36. A flexible key/value based data set.
  37. Add, update, and remove items. Subscribe on changes in the data set.
  38. A DataSet can filter and order items, and convert fields of items.
  39. </li>
  40. <li>
  41. <a href="dataview.html"><b>DataView</b></a>.
  42. A filtered and/or formatted view on a DataSet.
  43. </li>
  44. <li>
  45. <a href="network.html"><b>Network</b></a>.
  46. Display a network (force directed graph) with nodes and edges (previously called Graph).
  47. </li>
  48. <li>
  49. <a href="graph2d.html"><b>Graph2d</b></a>.
  50. Plot data on a timeline with lines or barcharts.
  51. </li>
  52. <li>
  53. <a href="graph3d.html"><b>Graph3d</b></a>.
  54. Display data in a three dimensional graph.
  55. </li>
  56. <li>
  57. <a href="timeline.html"><b>Timeline</b></a>.
  58. Display different types of data on a timeline.
  59. </li>
  60. </ul>
  61. <h2 id="Install">Install</h2>
  62. <h3>npm</h3>
  63. <pre class="prettyprint">
  64. npm install vis
  65. </pre>
  66. <h3>bower</h3>
  67. <pre class="prettyprint">
  68. bower install vis
  69. </pre>
  70. <h3>download</h3>
  71. Download the library from the website:
  72. <a href="http://visjs.org" target="_blank">http://visjs.org</a>.
  73. <h2 id="Load">Load</h2>
  74. <p>
  75. To load vis.js, include the javascript and css files of vis in your web page:
  76. </p>
  77. <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
  78. &lt;html&gt;
  79. &lt;head&gt;
  80. &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
  81. &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
  82. &lt;/head&gt;
  83. &lt;body&gt;
  84. &lt;script type="text/javascript"&gt;
  85. // ... load a visualization
  86. &lt;/script&gt;
  87. &lt;/body&gt;
  88. &lt;/html&gt;
  89. </pre>
  90. <p>
  91. or load vis.js using require.js:
  92. </p>
  93. <pre class="prettyprint lang-js">
  94. require.config({
  95. paths: {
  96. vis: 'path/to/vis',
  97. }
  98. });
  99. require(['vis'], function (math) {
  100. // ... load a visualization
  101. });
  102. </pre>
  103. <p>
  104. A timeline can be instantiated as follows. Other components can be
  105. created in a similar way.
  106. </p>
  107. <pre class="prettyprint lang-js">
  108. var timeline = new vis.Timeline(container, data, options);
  109. </pre>
  110. <p>
  111. Where <code>container</code> is an HTML element, <code>data</code> is
  112. an Array with data or a DataSet, and <code>options</code> is an optional
  113. object with configuration options for the component.
  114. </p>
  115. <h2 id="Use">Use</h2>
  116. <p>
  117. A basic example on using a Timeline is shown below. More examples can be
  118. found in the <a href="https://github.com/almende/vis/tree/master/examples"
  119. target="_blank">examples directory</a> of the project.
  120. </p>
  121. <pre class="prettyprint lang-html">
  122. &lt;!DOCTYPE HTML&gt;
  123. &lt;html&gt;
  124. &lt;head&gt;
  125. &lt;title&gt;Timeline basic demo&lt;/title&gt;
  126. &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
  127. &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
  128. &lt;style type="text/css"&gt;
  129. body, html {
  130. font-family: sans-serif;
  131. }
  132. &lt;/style&gt;
  133. &lt;/head&gt;
  134. &lt;body&gt;
  135. &lt;div id="visualization"&gt;&lt;/div&gt;
  136. &lt;script type="text/javascript"&gt;
  137. // DOM element where the Timeline will be attached
  138. var container = document.getElementById('visualization');
  139. // Create a DataSet (allows two way data-binding)
  140. var data = new vis.DataSet([
  141. {id: 1, content: 'item 1', start: '2013-04-20'},
  142. {id: 2, content: 'item 2', start: '2013-04-14'},
  143. {id: 3, content: 'item 3', start: '2013-04-18'},
  144. {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
  145. {id: 5, content: 'item 5', start: '2013-04-25'},
  146. {id: 6, content: 'item 6', start: '2013-04-27'}
  147. ]);
  148. // Configuration for the Timeline
  149. var options = {};
  150. // Create a Timeline
  151. var timeline = new vis.Timeline(container, data, options);
  152. &lt;/script&gt;
  153. &lt;/body&gt;
  154. &lt;/html&gt;
  155. </pre>
  156. <h2 id="license">License</h2>
  157. <p>
  158. Copyright 2010-2014 Almende B.V.
  159. </p>
  160. <p>
  161. Vis.js is dual licensed under both
  162. </p>
  163. <ul>
  164. <li>
  165. The Apache 2.0 License<br>
  166. <a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
  167. </li>
  168. </ul>
  169. <p>
  170. and
  171. </p>
  172. <ul>
  173. <li>
  174. The MIT License<br>
  175. <a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
  176. </li>
  177. </ul>
  178. <p>
  179. Vis.js may be distributed under either license.
  180. </p>
  181. </div>
  182. </body>
  183. </html>