bachir
/
performance-art.fr


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
							<html>
  <head>
    <title>Timeline demo</title>

    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">
    
    <script type="text/javascript">
      var timeline;
      function drawVisualization() {
        // create and populate an array with data
        var data = [
          {'start': new Date(201, 4, 25), 'content': 'First'},
          {'start': new Date(2010, 4, 26), 'content': 'Last'}
        ];
        
        // specify options
        var options = {
          "width":  "100%", 
          "height": "300px",
          "min": new Date(2012, 0, 1),                 // lower limit of visible range
          "max": new Date(2012, 11, 31),               // upper limit of visible range
          "intervalMin": 1000 * 60 * 60 * 24,          // one day in milliseconds
          "intervalMax": 1000 * 60 * 60 * 24 * 31 * 3  // about three months in milliseconds
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));
        
        // Draw our timeline with the created data and options 
        timeline.draw(data, options);
      }
   </script>
  </head>

  <body onload="drawVisualization();">
    <p>
      The visible range is limited in this demo:
      <ul>
        <li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
        <li>maximum visible date is limited to 2012-12-31 using option <code>max</code></li>
        <li>visible interval is limited to a minimum of 24 hours using option <code>intervalMin</code></li>
        <li>visible interval is limited to a maximum of about 3 months using option <code>intervalMax</code></li>
      </ul>
    </p>
    
    <div id="mytimeline"></div>
  </body>
</html>