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.

249 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. </head>
  53. <body>
  54. <h1>WK 2014</h1>
  55. <p style="max-width: 600px;">
  56. 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.
  57. </p>
  58. <div id="visualization">
  59. <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
  60. </div>
  61. <script type="text/javascript">
  62. // create a handlebars template
  63. var source = document.getElementById('item-template').innerHTML;
  64. var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
  65. // DOM element where the Timeline will be attached
  66. var container = document.getElementById('visualization');
  67. // Create a DataSet (allows two way data-binding)
  68. var items = new vis.DataSet([
  69. // round of 16
  70. {
  71. player1: 'Brazil',
  72. abbr1: 'br',
  73. score1: '1 (3)',
  74. player2: 'Chile',
  75. abbr2: 'cl',
  76. score2: '1 (2)',
  77. description: 'round of 16',
  78. start: '2014-06-28 13:00'
  79. },
  80. {
  81. player1: 'Colombia',
  82. abbr1: 'co',
  83. score1: 2,
  84. player2: 'Uruguay',
  85. abbr2: 'uy',
  86. score2: 0,
  87. description: 'round of 16',
  88. start: '2014-06-28 17:00'
  89. },
  90. {
  91. player1: 'Netherlands',
  92. abbr1: 'nl',
  93. score1: 2,
  94. player2: 'Mexico',
  95. abbr2: 'mx',
  96. score2: 1,
  97. description: 'round of 16',
  98. start: '2014-06-29 13:00'
  99. },
  100. {
  101. player1: 'Costa Rica',
  102. abbr1: 'cr',
  103. score1: '1 (5)',
  104. player2: 'Greece',
  105. abbr2: 'gr',
  106. score2: '1 (3)',
  107. description: 'round of 16',
  108. start: '2014-06-29 17:00'
  109. },
  110. {
  111. player1: 'France',
  112. abbr1: 'fr',
  113. score1: 2,
  114. player2: 'Nigeria',
  115. abbr2: 'ng',
  116. score2: 0,
  117. description: 'round of 16',
  118. start: '2014-06-30 13:00'
  119. },
  120. {
  121. player1: 'Germany',
  122. abbr1: 'de',
  123. score1: 2,
  124. player2: 'Algeria',
  125. abbr2: 'dz',
  126. score2: 1,
  127. description: 'round of 16',
  128. start: '2014-06-30 17:00'
  129. },
  130. {
  131. player1: 'Argentina',
  132. abbr1: 'ar',
  133. score1: 1,
  134. player2: 'Switzerland',
  135. abbr2: 'ch',
  136. score2: 0,
  137. description: 'round of 16',
  138. start: '2014-07-01 13:00'
  139. },
  140. {
  141. player1: 'Belgium',
  142. abbr1: 'be',
  143. score1: 2,
  144. player2: 'USA',
  145. abbr2: 'us',
  146. score2: 1,
  147. description: 'round of 16',
  148. start: '2014-07-01 17:00'
  149. },
  150. // quarter-finals
  151. {
  152. player1: 'France',
  153. abbr1: 'fr',
  154. score1: 0,
  155. player2: 'Germany',
  156. abbr2: 'de',
  157. score2: 1,
  158. description: 'quarter-finals',
  159. start: '2014-07-04 13:00'
  160. },
  161. {
  162. player1: 'Brazil',
  163. abbr1: 'br',
  164. score1: 2,
  165. player2: 'Colombia',
  166. abbr2: 'co',
  167. score2: 1,
  168. description: 'quarter-finals',
  169. start: '2014-07-04 17:00'
  170. },
  171. {
  172. player1: 'Argentina',
  173. abbr1: 'ar',
  174. score1: 1,
  175. player2: 'Belgium',
  176. abbr2: 'be',
  177. score2: 0,
  178. description: 'quarter-finals',
  179. start: '2014-07-05 13:00'
  180. },
  181. {
  182. player1: 'Netherlands',
  183. abbr1: 'nl',
  184. score1: '0 (4)',
  185. player2: 'Costa Rica',
  186. abbr2: 'cr',
  187. score2: '0 (3)',
  188. description: 'quarter-finals',
  189. start: '2014-07-05 17:00'
  190. },
  191. // semi-finals
  192. {
  193. player1: 'Brazil',
  194. abbr1: 'br',
  195. score1: 1,
  196. player2: 'Germany',
  197. abbr2: 'de',
  198. score2: 7,
  199. description: 'semi-finals',
  200. start: '2014-07-08 17:00'
  201. },
  202. {
  203. player1: 'Netherlands',
  204. abbr1: 'nl',
  205. score1: '0 (2)',
  206. player2: 'Argentina',
  207. abbr2: 'ar',
  208. score2: '0 (4)',
  209. description: 'semi-finals',
  210. start: '2014-07-09 17:00'
  211. },
  212. // final
  213. {
  214. player1: 'Germany',
  215. score1: 1,
  216. abbr1: 'de',
  217. player2: 'Argentina',
  218. abbr2: 'ar',
  219. score2: 0,
  220. description: 'final',
  221. start: '2014-07-13 16:00'
  222. }
  223. ]);
  224. // Configuration for the Timeline
  225. var options = {
  226. // specify a template for the items
  227. template: template
  228. };
  229. // Create a Timeline
  230. var timeline = new vis.Timeline(container, items, options);
  231. </script>
  232. </body>
  233. </html>