|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Timeline | Templates</title>
-
- <!-- load handlebars for templating, and create a template -->
- <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
- <script id="item-template" type="text/x-handlebars-template">
- <table class="score">
- <tr>
- <td colspan="3" class="description">{{description}}</td>
- </tr>
- <tr>
- <td>{{player1}}</td>
- <th>{{score1}} - {{score2}}</th>
- <td>{{player2}}</td>
- </tr>
- <tr>
- <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
- <th></th>
- <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
- </tr>
- </table>
- </script>
-
- <script src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
-
- <style type="text/css">
- body, html {
- font-family: sans-serif;
- font-size: 10pt;
- }
-
- .vis.timeline .item {
- border-color: #acacac;
- background-color: #efefef;
- box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
- }
-
- table .description {
- font-style: italic;
- }
-
- #visualization {
- position: relative;
- overflow: hidden;
- }
-
- .logo {
- position: absolute;
- right: 10px;
- top: 10px;
- }
- .logo img {
- width: 120px;
- }
- </style>
-
-
- </head>
- <body>
- <h1>WK 2014</h1>
- <p style="max-width: 600px;">
- 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.
- </p>
-
- <div id="visualization">
- <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
- </div>
-
- <script type="text/javascript">
- // create a handlebars template
- var source = document.getElementById('item-template').innerHTML;
- var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
-
- // DOM element where the Timeline will be attached
- var container = document.getElementById('visualization');
-
- // Create a DataSet (allows two way data-binding)
- var items = new vis.DataSet([
- // round of 16
- {
- player1: 'Brazil',
- abbr1: 'br',
- score1: '1 (3)',
- player2: 'Chile',
- abbr2: 'cl',
- score2: '1 (2)',
- description: 'round of 16',
- start: '2014-06-28T13:00:00'
- },
- {
- player1: 'Colombia',
- abbr1: 'co',
- score1: 2,
- player2: 'Uruguay',
- abbr2: 'uy',
- score2: 0,
- description: 'round of 16',
- start: '2014-06-28T17:00:00'
- },
- {
- player1: 'Netherlands',
- abbr1: 'nl',
- score1: 2,
- player2: 'Mexico',
- abbr2: 'mx',
- score2: 1,
- description: 'round of 16',
- start: '2014-06-29T13:00:00'
- },
- {
- player1: 'Costa Rica',
- abbr1: 'cr',
- score1: '1 (5)',
- player2: 'Greece',
- abbr2: 'gr',
- score2: '1 (3)',
- description: 'round of 16',
- start: '2014-06-29T17:00:00'
- },
- {
- player1: 'France',
- abbr1: 'fr',
- score1: 2,
- player2: 'Nigeria',
- abbr2: 'ng',
- score2: 0,
- description: 'round of 16',
- start: '2014-06-30T13:00:00'
- },
- {
- player1: 'Germany',
- abbr1: 'de',
- score1: 2,
- player2: 'Algeria',
- abbr2: 'dz',
- score2: 1,
- description: 'round of 16',
- start: '2014-06-30T17:00:00'
- },
- {
- player1: 'Argentina',
- abbr1: 'ar',
- score1: 1,
- player2: 'Switzerland',
- abbr2: 'ch',
- score2: 0,
- description: 'round of 16',
- start: '2014-07-01T13:00:00'
- },
- {
- player1: 'Belgium',
- abbr1: 'be',
- score1: 2,
- player2: 'USA',
- abbr2: 'us',
- score2: 1,
- description: 'round of 16',
- start: '2014-07-01T17:00:00'
- },
-
- // quarter-finals
- {
- player1: 'France',
- abbr1: 'fr',
- score1: 0,
- player2: 'Germany',
- abbr2: 'de',
- score2: 1,
- description: 'quarter-finals',
- start: '2014-07-04T13:00:00'
- },
- {
- player1: 'Brazil',
- abbr1: 'br',
- score1: 2,
- player2: 'Colombia',
- abbr2: 'co',
- score2: 1,
- description: 'quarter-finals',
- start: '2014-07-04T17:00:00'
- },
- {
- player1: 'Argentina',
- abbr1: 'ar',
- score1: 1,
- player2: 'Belgium',
- abbr2: 'be',
- score2: 0,
- description: 'quarter-finals',
- start: '2014-07-05T13:00:00'
- },
- {
- player1: 'Netherlands',
- abbr1: 'nl',
- score1: '0 (4)',
- player2: 'Costa Rica',
- abbr2: 'cr',
- score2: '0 (3)',
- description: 'quarter-finals',
- start: '2014-07-05T17:00:00'
- },
-
- // semi-finals
- {
- player1: 'Brazil',
- abbr1: 'br',
- score1: 1,
- player2: 'Germany',
- abbr2: 'de',
- score2: 7,
- description: 'semi-finals',
- start: '2014-07-08T17:00:00'
- },
- {
- player1: 'Netherlands',
- abbr1: 'nl',
- score1: '0 (2)',
- player2: 'Argentina',
- abbr2: 'ar',
- score2: '0 (4)',
- description: 'semi-finals',
- start: '2014-07-09T17:00:00'
- },
-
- // final
- {
- player1: 'Germany',
- score1: 1,
- abbr1: 'de',
- player2: 'Argentina',
- abbr2: 'ar',
- score2: 0,
- description: 'final',
- start: '2014-07-13T16:00:00'
- }
- ]);
-
- // Configuration for the Timeline
- var options = {
- // specify a template for the items
- template: template
- };
-
- // Create a Timeline
- var timeline = new vis.Timeline(container, items, options);
- </script>
- </body>
- </html>
|
