bachir
/
HeHe-Centiped


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<!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/2.0.0-alpha.4/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.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>

  <script src="../../googleAnalytics.js"></script>
</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-28 13:00'
    },
    {
      player1: 'Colombia',
      abbr1: 'co',
      score1: 2,
      player2: 'Uruguay',
      abbr2: 'uy',
      score2: 0,
      description: 'round of 16',
      start: '2014-06-28 17:00'
    },
    {
      player1: 'Netherlands',
      abbr1: 'nl',
      score1: 2,
      player2: 'Mexico',
      abbr2: 'mx',
      score2: 1,
      description: 'round of 16',
      start: '2014-06-29 13:00'
    },
    {
      player1: 'Costa Rica',
      abbr1: 'cr',
      score1: '1 (5)',
      player2: 'Greece',
      abbr2: 'gr',
      score2: '1 (3)',
      description: 'round of 16',
      start: '2014-06-29 17:00'
    },
    {
      player1: 'France',
      abbr1: 'fr',
      score1: 2,
      player2: 'Nigeria',
      abbr2: 'ng',
      score2: 0,
      description: 'round of 16',
      start: '2014-06-30 13:00'
    },
    {
      player1: 'Germany',
      abbr1: 'de',
      score1: 2,
      player2: 'Algeria',
      abbr2: 'dz',
      score2: 1,
      description: 'round of 16',
      start: '2014-06-30 17:00'
    },
    {
      player1: 'Argentina',
      abbr1: 'ar',
      score1: 1,
      player2: 'Switzerland',
      abbr2: 'ch',
      score2: 0,
      description: 'round of 16',
      start: '2014-07-01 13:00'
    },
    {
      player1: 'Belgium',
      abbr1: 'be',
      score1: 2,
      player2: 'USA',
      abbr2: 'us',
      score2: 1,
      description: 'round of 16',
      start: '2014-07-01 17:00'
    },

    // quarter-finals
    {
      player1: 'France',
      abbr1: 'fr',
      score1: 0,
      player2: 'Germany',
      abbr2: 'de',
      score2: 1,
      description: 'quarter-finals',
      start: '2014-07-04 13:00'
    },
    {
      player1: 'Brazil',
      abbr1: 'br',
      score1: 2,
      player2: 'Colombia',
      abbr2: 'co',
      score2: 1,
      description: 'quarter-finals',
      start: '2014-07-04 17:00'
    },
    {
      player1: 'Argentina',
      abbr1: 'ar',
      score1: 1,
      player2: 'Belgium',
      abbr2: 'be',
      score2: 0,
      description: 'quarter-finals',
      start: '2014-07-05 13:00'
    },
    {
      player1: 'Netherlands',
      abbr1: 'nl',
      score1: '0 (4)',
      player2: 'Costa Rica',
      abbr2: 'cr',
      score2: '0 (3)',
      description: 'quarter-finals',
      start: '2014-07-05 17:00'
    },

    // semi-finals
    {
      player1: 'Brazil',
      abbr1: 'br',
      score1: 1,
      player2: 'Germany',
      abbr2: 'de',
      score2: 7,
      description: 'semi-finals',
      start: '2014-07-08 17:00'
    },
    {
      player1: 'Netherlands',
      abbr1: 'nl',
      score1: '0 (2)',
      player2: 'Argentina',
      abbr2: 'ar',
      score2: '0 (4)',
      description: 'semi-finals',
      start: '2014-07-09 17:00'
    },

    // final
    {
      player1: 'Germany',
      score1: 1,
      abbr1: 'de',
      player2: 'Argentina',
      abbr2: 'ar',
      score2: 0,
      description: 'final',
      start: '2014-07-13 16: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>