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.

250 lines
5.7 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Templates</title>
  5. <!-- load handlebars for templating, and create a template -->
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
  7. <script id="item-template" type="text/x-handlebars-template">
  8. <table class="score">
  9. <tr>
  10. <td colspan="3" class="description">{{description}}</td>
  11. </tr>
  12. <tr>
  13. <td>{{player1}}</td>
  14. <th>{{score1}} - {{score2}}</th>
  15. <td>{{player2}}</td>
  16. </tr>
  17. <tr>
  18. <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
  19. <th></th>
  20. <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
  21. </tr>
  22. </table>
  23. </script>
  24. <script src="../../dist/vis.js"></script>
  25. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  26. <style type="text/css">
  27. body, html {
  28. font-family: sans-serif;
  29. font-size: 10pt;
  30. }
  31. .vis.timeline .item {
  32. border-color: #acacac;
  33. background-color: #efefef;
  34. box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
  35. }
  36. table .description {
  37. font-style: italic;
  38. }
  39. #visualization {
  40. position: relative;
  41. overflow: hidden;
  42. }
  43. .logo {
  44. position: absolute;
  45. right: 10px;
  46. top: 10px;
  47. }
  48. .logo img {
  49. width: 120px;
  50. }
  51. </style>
  52. <script src="../googleAnalytics.js"></script>
  53. </head>
  54. <body>
  55. <h1>WK 2014</h1>
  56. <p style="max-width: 600px;">
  57. This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
  58. </p>
  59. <div id="visualization">
  60. <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
  61. </div>
  62. <script type="text/javascript">
  63. // create a handlebars template
  64. var source = document.getElementById('item-template').innerHTML;
  65. var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
  66. // DOM element where the Timeline will be attached
  67. var container = document.getElementById('visualization');
  68. // Create a DataSet (allows two way data-binding)
  69. var items = new vis.DataSet([
  70. // round of 16
  71. {
  72. player1: 'Brazil',
  73. abbr1: 'br',
  74. score1: '1 (3)',
  75. player2: 'Chile',
  76. abbr2: 'cl',
  77. score2: '1 (2)',
  78. description: 'round of 16',
  79. start: '2014-06-28 13:00'
  80. },
  81. {
  82. player1: 'Colombia',
  83. abbr1: 'co',
  84. score1: 2,
  85. player2: 'Uruguay',
  86. abbr2: 'uy',
  87. score2: 0,
  88. description: 'round of 16',
  89. start: '2014-06-28 17:00'
  90. },
  91. {
  92. player1: 'Netherlands',
  93. abbr1: 'nl',
  94. score1: 2,
  95. player2: 'Mexico',
  96. abbr2: 'mx',
  97. score2: 1,
  98. description: 'round of 16',
  99. start: '2014-06-29 13:00'
  100. },
  101. {
  102. player1: 'Costa Rica',
  103. abbr1: 'cr',
  104. score1: '1 (5)',
  105. player2: 'Greece',
  106. abbr2: 'gr',
  107. score2: '1 (3)',
  108. description: 'round of 16',
  109. start: '2014-06-29 17:00'
  110. },
  111. {
  112. player1: 'France',
  113. abbr1: 'fr',
  114. score1: 2,
  115. player2: 'Nigeria',
  116. abbr2: 'ng',
  117. score2: 0,
  118. description: 'round of 16',
  119. start: '2014-06-30 13:00'
  120. },
  121. {
  122. player1: 'Germany',
  123. abbr1: 'de',
  124. score1: 2,
  125. player2: 'Algeria',
  126. abbr2: 'dz',
  127. score2: 1,
  128. description: 'round of 16',
  129. start: '2014-06-30 17:00'
  130. },
  131. {
  132. player1: 'Argentina',
  133. abbr1: 'ar',
  134. score1: 1,
  135. player2: 'Switzerland',
  136. abbr2: 'ch',
  137. score2: 0,
  138. description: 'round of 16',
  139. start: '2014-07-01 13:00'
  140. },
  141. {
  142. player1: 'Belgium',
  143. abbr1: 'be',
  144. score1: 2,
  145. player2: 'USA',
  146. abbr2: 'us',
  147. score2: 1,
  148. description: 'round of 16',
  149. start: '2014-07-01 17:00'
  150. },
  151. // quarter-finals
  152. {
  153. player1: 'France',
  154. abbr1: 'fr',
  155. score1: 0,
  156. player2: 'Germany',
  157. abbr2: 'de',
  158. score2: 1,
  159. description: 'quarter-finals',
  160. start: '2014-07-04 13:00'
  161. },
  162. {
  163. player1: 'Brazil',
  164. abbr1: 'br',
  165. score1: 2,
  166. player2: 'Colombia',
  167. abbr2: 'co',
  168. score2: 1,
  169. description: 'quarter-finals',
  170. start: '2014-07-04 17:00'
  171. },
  172. {
  173. player1: 'Argentina',
  174. abbr1: 'ar',
  175. score1: 1,
  176. player2: 'Belgium',
  177. abbr2: 'be',
  178. score2: 0,
  179. description: 'quarter-finals',
  180. start: '2014-07-05 13:00'
  181. },
  182. {
  183. player1: 'Netherlands',
  184. abbr1: 'nl',
  185. score1: '0 (4)',
  186. player2: 'Costa Rica',
  187. abbr2: 'cr',
  188. score2: '0 (3)',
  189. description: 'quarter-finals',
  190. start: '2014-07-05 17:00'
  191. },
  192. // semi-finals
  193. {
  194. player1: 'Brazil',
  195. abbr1: 'br',
  196. score1: 1,
  197. player2: 'Germany',
  198. abbr2: 'de',
  199. score2: 7,
  200. description: 'semi-finals',
  201. start: '2014-07-08 17:00'
  202. },
  203. {
  204. player1: 'Netherlands',
  205. abbr1: 'nl',
  206. score1: '0 (2)',
  207. player2: 'Argentina',
  208. abbr2: 'ar',
  209. score2: '0 (4)',
  210. description: 'semi-finals',
  211. start: '2014-07-09 17:00'
  212. },
  213. // final
  214. {
  215. player1: 'Germany',
  216. score1: 1,
  217. abbr1: 'de',
  218. player2: 'Argentina',
  219. abbr2: 'ar',
  220. score2: 0,
  221. description: 'final',
  222. start: '2014-07-13 16:00'
  223. }
  224. ]);
  225. // Configuration for the Timeline
  226. var options = {
  227. // specify a template for the items
  228. template: template
  229. };
  230. // Create a Timeline
  231. var timeline = new vis.Timeline(container, items, options);
  232. </script>
  233. </body>
  234. </html>