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.

229 lines
9.7 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Graph2d Examples</title>
  8. <link rel="icon" HREF="favicon.ico">
  9. <!-- Bootstrap -->
  10. <link href="./css/bootstrap.css" rel="stylesheet">
  11. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  15. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
  18. <script type="text/javascript" src="./js/prettify/prettify.js"></script>
  19. <script src="./dist/vis.js"></script>
  20. <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
  21. <link href="./css/examples.css" rel="stylesheet" type="text/css" />
  22. <style>
  23. img.example {
  24. height:150px;
  25. }
  26. </style>
  27. <script language="JavaScript">
  28. function loadVis() {
  29. var container = document.getElementById('visualization');
  30. var items = [
  31. {x: '2014-06-11', y: 10},
  32. {x: '2014-06-12', y: 25},
  33. {x: '2014-06-13', y: 30},
  34. {x: '2014-06-14', y: 10},
  35. {x: '2014-06-15', y: 15},
  36. {x: '2014-06-16', y: 30}
  37. ];
  38. var dataset = new vis.DataSet(items);
  39. var options = {
  40. start: '2014-06-10',
  41. end: '2014-06-18',
  42. height:'552px',
  43. clickToUse:true
  44. };
  45. var graph2d = new vis.Graph2d(container, dataset, options);
  46. }
  47. </script>
  48. </head>
  49. <body onload="prettyPrint(); loadVis();">
  50. <div class="navbar-wrapper">
  51. <div class="container">
  52. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  53. <div class="container">
  54. <div class="navbar-header">
  55. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  56. <span class="sr-only">Toggle navigation</span>
  57. <span class="icon-bar"></span>
  58. <span class="icon-bar"></span>
  59. <span class="icon-bar"></span>
  60. </button>
  61. <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  62. </div>
  63. <div id="navbar" class="navbar-collapse collapse">
  64. <ul class="nav navbar-nav">
  65. <li class="active"><a href="./index.html#modules">Modules</a></li>
  66. <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
  67. <li><a href="./blog.html">Blog</a></li>
  68. <li><a href="./index.html#download_install">Download</a></li>
  69. <li><a href="./index.html#showcase">Showcase</a></li>
  70. <li><a href="./index.html#contribute">Contribute</a></li>
  71. <li><a href="./index.html#featureRequests">Feature requests</a></li>
  72. <li><a href="./index.html#licenses">License</a></li>
  73. </ul>
  74. </div>
  75. </div>
  76. </nav>
  77. </div>
  78. </div>
  79. <div class="contentWrapper">
  80. <h1>Graph2d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a>
  81. <div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
  82. <pre class="prettyprint lang-html">
  83. &lt;div id="visualization"&gt;&lt;/div&gt;
  84. &lt;script type="text/javascript"&gt;
  85. var container = document.getElementById('visualization');
  86. var items = [
  87. {x: '2014-06-11', y: 10},
  88. {x: '2014-06-12', y: 25},
  89. {x: '2014-06-13', y: 30},
  90. {x: '2014-06-14', y: 10},
  91. {x: '2014-06-15', y: 15},
  92. {x: '2014-06-16', y: 30}
  93. ];
  94. var dataset = new vis.DataSet(items);
  95. var options = {
  96. start: '2014-06-10',
  97. end: '2014-06-18'
  98. };
  99. var graph2d = new vis.Graph2d(container, dataset, options);
  100. &lt;/script&gt;
  101. </pre>
  102. <div id="visualization"></div>
  103. <h2 id="allExamples">All examples</h2>
  104. <div class="container-fluid">
  105. <div class="col-lg-2 col-md-3 col-sm-6">
  106. <a href="examples/graph2d/01_basic.html">
  107. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/1.png">
  108. <div class="exampleTitle">basic</div>
  109. </a>
  110. </div>
  111. <div class="col-lg-2 col-md-3 col-sm-6">
  112. <a href="examples/graph2d/02_bars.html">
  113. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/2.png">
  114. <div class="exampleTitle">bars</div>
  115. </a>
  116. </div>
  117. <div class="col-lg-2 col-md-3 col-sm-6">
  118. <a href="examples/graph2d/03_groups.html">
  119. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/3.png">
  120. <div class="exampleTitle">groups</div>
  121. </a>
  122. </div>
  123. <div class="col-lg-2 col-md-3 col-sm-6">
  124. <a href="examples/graph2d/04_rightAxis.html">
  125. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/4.png">
  126. <div class="exampleTitle">right axis</div>
  127. </a>
  128. </div>
  129. <div class="col-lg-2 col-md-3 col-sm-6">
  130. <a href="examples/graph2d/05_bothAxis.html">
  131. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/5.png">
  132. <div class="exampleTitle">both axis</div>
  133. </a>
  134. </div>
  135. <div class="col-lg-2 col-md-3 col-sm-6">
  136. <a href="examples/graph2d/06_interpolation.html">
  137. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/6.png">
  138. <div class="exampleTitle">interpolation</div>
  139. </a>
  140. </div>
  141. <div class="col-lg-2 col-md-3 col-sm-6">
  142. <a href="examples/graph2d/07_scrollingAndSorting.html">
  143. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/7.png">
  144. <div class="exampleTitle">scrolling and sorting</div>
  145. </a>
  146. </div>
  147. <div class="col-lg-2 col-md-3 col-sm-6">
  148. <a href="examples/graph2d/08_performance.html">
  149. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/8.png">
  150. <div class="exampleTitle">performance</div>
  151. </a>
  152. </div>
  153. <div class="col-lg-2 col-md-3 col-sm-6">
  154. <a href="examples/graph2d/09_external_legend.html">
  155. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/9.png">
  156. <div class="exampleTitle">external legend</div>
  157. </a>
  158. </div>
  159. <div class="col-lg-2 col-md-3 col-sm-6">
  160. <a href="examples/graph2d/10_barsSideBySide.html">
  161. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/10.png">
  162. <div class="exampleTitle">bars side by side</div>
  163. </a>
  164. </div>
  165. <div class="col-lg-2 col-md-3 col-sm-6">
  166. <a href="examples/graph2d/11_barsSideBySideGroups.html">
  167. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/11.png">
  168. <div class="exampleTitle">bars side by side groups</div>
  169. </a>
  170. </div>
  171. <div class="col-lg-2 col-md-3 col-sm-6">
  172. <a href="examples/graph2d/12_customRange.html">
  173. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/12.png">
  174. <div class="exampleTitle">custom range</div>
  175. </a>
  176. </div>
  177. <div class="col-lg-2 col-md-3 col-sm-6">
  178. <a href="examples/graph2d/13_localization.html">
  179. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/13.png">
  180. <div class="exampleTitle">localization</div>
  181. </a>
  182. </div>
  183. <div class="col-lg-2 col-md-3 col-sm-6">
  184. <a href="examples/graph2d/14_toggleGroups.html">
  185. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/14.png">
  186. <div class="exampleTitle">toggle groups</div>
  187. </a>
  188. </div>
  189. <div class="col-lg-2 col-md-3 col-sm-6">
  190. <a href="examples/graph2d/15_streaming_data.html">
  191. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/15.png">
  192. <div class="exampleTitle">streaming data</div>
  193. </a>
  194. </div>
  195. <div class="col-lg-2 col-md-3 col-sm-6">
  196. <a href="examples/graph2d/16_bothAxis_titles.html">
  197. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/16.png">
  198. <div class="exampleTitle">axis titles</div>
  199. </a>
  200. </div>
  201. <div class="col-lg-2 col-md-3 col-sm-6">
  202. <a href="examples/graph2d/17_dynamicStyling.html">
  203. <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/17.png">
  204. <div class="exampleTitle">dynamic styling</div>
  205. </a>
  206. </div>
  207. </div>
  208. <br />
  209. <br />
  210. <br />
  211. <br />
  212. </div>
  213. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  214. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  215. <!-- Include all compiled plugins (below), or include individual files as needed -->
  216. <script src="js/bootstrap.min.js"></script>
  217. </body>
  218. </html>