bachir
/
performance-art.fr


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<html>
  <head>
    <title>Timeline JSON data</title>

    <style>
      body {
        font-size: 10pt;
        font-family: verdana, sans, arial;
      }
    </style>

    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">
    
    <script type="text/javascript">
      var timeline;
      var data;
      
      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create a JSON data table
        data = [
          {
            'start': new Date(2010,7,23),
            'content': 'Conversation<br><img src="img/comments-icon.png" style="width:32px; height:32px;">'
          },
          {
            'start': new Date(2010,7,23,23,0,0),
            'content': 'Mail from boss<br><img src="img/mail-icon.png" style="width:32px; height:32px;">'
          },
          {
            'start': new Date(2010,7,24,16,0,0),
            'content': 'Report'
          },
          {
            'start': new Date(2010,7,26),
            'end': new Date(2010,8,2),
            'content': 'Traject A'
          },
          {
            'start': new Date(2010,7,28),
            'content': 'Memo<br><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'
          },
          {
            'start': new Date(2010,7,29),
            'content': 'Phone call<br><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
          },
          {
            'start': new Date(2010,7,31),
            'end': new Date(2010,8,3),
            'content': 'Traject B'
          },
          {
            'start': new Date(2010,8,4,12,0,0),
            'content': 'Report<br><img src="img/attachment-icon.png" style="width:32px; height:32px;">'
          }        
        ];

        // specify options
        var options = {
          'width':  '100%', 
          'height': '300px',
          'editable': true,   // enable dragging and editing events 
          'style': 'box'
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));
        
        function onRangeChanged(properties) {
          document.getElementById('info').innerHTML += 'rangechanged ' +
            properties.start + ' - ' + properties.end + '<br>';
        }
        
        // attach an event listener using the links events handler
        links.events.addListener(timeline, 'rangechanged', onRangeChanged);

        // Draw our timeline with the created data and options 
        timeline.draw(data, options);
      }
   </script>
  </head>

  <body onload="drawVisualization();">
    <h1>Timeline JSON data</h1>
    <p>
      This demo shows how to feed the Timeline with JSON data. 
      No Google DataTable is used, and therefore the Google JSAPI is
      not needed by the Timeline, which can thus be used offline.
    </p>
    
    <div id="mytimeline"></div>
    
    <!-- Information about where the used icons come from -->
    <p style="color:gray; font-size:10px; font-style:italic;">
      Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
      and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
    </p>

    <div id="info"></div>

  </body>
</html>