bachir
/
performance-art.fr


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


    <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">

    <style>
      body {
        color: #4D4D4D;
        font: 10pt arial;
      }
    </style>

    <script type="text/javascript">
      var timeline = null;
      var data = null;
      var order = 1;
      var truck = 1;
      
      google.load("visualization", "1");
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      // Called when the Visualization API is loaded.
      function drawVisualization() {

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));
                
        // Create and populate a data table.
        data = new google.visualization.DataTable();
        data.addColumn('datetime', 'start');
        data.addColumn('datetime', 'end');
        data.addColumn('string', 'content');
        data.addColumn('string', 'group');

        addData();

        // specify options
        options = {
          //width:  "100%", 
          //height: "auto",
          //minHeight: 50, // pixels
          //height: "300px",
          //layout: "box",
          start: new Date(),
          end: new Date(1000*60*60*24 + (new Date()).valueOf()),
          editable: true,
          animate: false,
          eventMargin: 10,  // minimal margin between events 
          eventMarginAxis: 5, // minimal margin beteen events and the axis
          showMajorLabels: true,
          showCustomTime: true,
          showNavigation: true,
          axisOnTop: true,
          snapEvents: true,
          dragAreaWidth: 20,
          //groupsWidth : "100px",
          groupsOnRight: false
        };

        // Draw our timeline with the created data and options 
        timeline.draw(data, options);
        
        google.visualization.events.addListener(timeline, 'select', 
          function () {
            //console.log('select', timeline.getSelection()[0]);
          }        
        );

        google.visualization.events.addListener(timeline, 'edit', 
          function() {
            //console.log('edit')
          }
        );

        google.visualization.events.addListener(timeline, 'change', 
          function() {
            //console.log('change')
            //timeline.cancelChange();
          }
        );

        google.visualization.events.addListener(timeline, 'add', 
          function() {
            //console.log('add')
            //timeline.cancelAdd();
          }
        );
        
        /*
        console.profile();        
        var count = 10;
        for (var i = 0; i < count; i++) {
          timeline.redraw();
        }
        console.profileEnd();
        //*/
      }

      /**
       * Get URL parameter
       * http://www.netlobo.com/url_query_string_javascript.html
       */
      function gup( name ) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
      
      var count = (Number(gup('count')) || 100);
      
      function addData() {
        for (var j = 0; j < 4; j++) {
          var date = new Date();
          for (var i = 0; i < count/4; i++) {
            date.setHours(date.getHours() +  1 * 4 * (Math.random() < 0.2));
            var start = new Date(date);

            date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
            var end = new Date(date);

            var orderText = "Order " + order;
            var truckText = "Truck " + truck;
            data.addRow([start, end, orderText, truckText]);
            order++;
          }
          truck++;
        }
      }
   </script>
  </head>

  <body onresize="/*timeline.checkResize();*/">
    <h1>Timeline grouping performance</h1>

    <p>
      Choose a number of items: 
      <a href="?count=20">20</a>,
      <a href="?count=100">100</a>,
      <a href="?count=1000">1000</a>,
      <a href="?count=10000">10000</a>
    <p>
    <p>
      Current number of items: <span id='count'>100</span>
    </p>
    
    <div id="mytimeline"></div>

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

    <script>
      document.getElementById('count').innerHTML = count;
    </script>

  </body>
</html>