bachir
/
performance-art.fr


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

    <style>
      body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">
    
    <script type="text/javascript">
      google.load("visualization", "1");
      
      var data = undefined;
      var timeline = undefined;
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      function onTimeChange(event) {
        document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;

        // adjust the end date of the event in the data table
        var start = data.getValue(0, 0);
        if (event.time > start) {
          data.setValue(0, 1, new Date(event.time));
          var now = new Date();
          if (event.time < now) {
            data.setValue(0, 2, "Dynamic Event (past)");
          }
          else if (event.time > now) {
            data.setValue(0, 2, "Dynamic Event (future)");
          }
          else  {
            data.setValue(0, 2, "Dynamic Event (now)");            
          }
          timeline.redraw();
        }
      }

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create and populate a data table.
        data = new google.visualization.DataTable();
        data.addColumn('datetime', 'start');
        data.addColumn('datetime', 'end');
        data.addColumn('string', 'content');
        data.addRows([[
          new Date((new Date()).getTime() - 1 * 60 * 1000), 
          new Date(), 
          'Dynamic event']]);

        // specify options
        options = {
          'width':  "100%", 
          'height': "auto", 
          'style': "box",
          'showCustomTime': true
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));
        
        // Add event listeners
        google.visualization.events.addListener(timeline, 'timechange', onTimeChange);
        
        // Draw our timeline with the created data and options 
        timeline.draw(data, options);

        // set a custom range from -2 minute to +3 minutes current time
        var start = new Date((new Date()).getTime() - 2 * 60 * 1000 )
        var end   = new Date((new Date()).getTime() + 3 * 60 * 1000);
        timeline.setVisibleChartRange(start, end);
      }
   </script>
  </head>

  <body>
    <p style="width: 600px;">
    When the custom time bar is shown, the user can drag this bar to a specific 
    time. The Timeline sends an event that the custom time is changed, after 
    which the contents of the timeline can be changed according to the specified
    time in past or future.
    </p>
    
    <div id="customTime">&nbsp;</div>
    <p></p>

    <div id="mytimeline"></div>
    
  </body>
</html>