Commits

Frederic De Groef committed 9221e43

using a range slider to select years instead of the checkbox collection

Comments (0)

Files changed (2)

test_sigma_gexf.js

   sigInst.bind('overnodes',showNodeInfo);
 
 
-  console.log(sigma_canvas.getElementsByTagName('canvas')[0].getAttribute('width'));
+
   var w, h;
   w = parseInt(sigma_canvas.getElementsByTagName('canvas')[0].getAttribute('width'));
   h = parseInt(sigma_canvas.getElementsByTagName('canvas')[0].getAttribute('height'));
   };
 
 
-  var year_selection_form = document.getElementById('select_year_form');
-  year_selection_form.innerHTML = makeYearCheckboxes(1997, 2012);
 
-  $(':checkbox').live('change', function(){
-    if(this.checked){
-      enabled_years.push(this.value);
-    } else {
-      var idx = enabled_years.indexOf(this.value);
-      enabled_years.splice(idx, 1);
-    }
-    console.log(enabled_years);
+  $( "#year_selection_slider" ).slider({
+      range: true,
+      values:[1997, 2012],
+      min: 1997,
+      max: 2012,
+      step: 1,
+      slide: function( event, ui ) {
+        $( "#start_selected_year" ).val( "" + ui.values[0] );
+        $( "#end_selected_year" ).val( "" + ui.values[1] );
 
-    sigInst.iterNodes(function (n){
-        var node_attrs = n['attr']['attributes'];
-        var node_year = getAttrValue(node_attrs, 'year');
+        sigInst.iterNodes(function (n){
+          var node_attrs = n['attr']['attributes'];
+          var node_year = parseInt(getAttrValue(node_attrs, 'year'));
 
-        //console.log(''+  getAttrValue(node_attrs, 'year'))
-        if (enabled_years.indexOf(node_year) == -1){
-          // console.log('hiding: '+getAttrValue(node_attrs, 'title') + '   ' + node_year);
-          n.hidden = 1;
-        } else {
-          // console.log('showing: '+getAttrValue(node_attrs, 'title') + '   ' + node_year );
-          n.hidden = 0;
-        }
+          if(node_year >= ui.values[0] && node_year <= ui.values[1]){
+            n.hidden = 0;
+          } else{
+            n.hidden = 1;
+          }
 
-      }).draw();
 
+        }).draw();
 
-  });
+
+      }
+    });
+    $( "#start_selected_year" ).val( "" + $( "#year_selection_slider" ).slider( "values", 0 ) );
+    $( "#end_selected_year" ).val( "" + $( "#year_selection_slider" ).slider( "values", 1 ) );
+
+
 
 
 }

test_sigmajs.html

     <title>hello sigmajs</title>
 
     <!-- external libs -->
-    <script type="text/javascript" language="javascript" src="/scripts/jquery/jquery-1.8.2.min.js"></script>
+    <!-- script type="text/javascript" language="javascript" src="/scripts/jquery/jquery-1.8.2.min.js"></script-->
+    <script type="text/javascript" language="javascript" src="/scripts/jquery-ui/js/jquery-1.8.2.min.js"></script>
+    <script type="text/javascript" language="javascript" src="/scripts/jquery-ui/js/jquery-ui-1.8.24.custom.min.js"></script>
     <script type="text/javascript" language="javascript" src="/scripts/sigmajs/sigma.min.js"></script>
     <script type="text/javascript" language="javascript" src="/scripts/sigmajs/sigma.parseGexf.js"></script>
 
     }
   </style>
 
+    <link type="text/css" href="/scripts/jquery-ui/css/smoothness/jquery-ui-1.8.24.custom.css" rel="stylesheet">
 
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
     <div class="container">
 
     <div class="row">
-        <div class="row-fluid">
-            <h2 class="span11" id="post-title">Parse graph data / use custom events</h2>
+        <div class="row">
+            <h2 class="span12" id="post-title">Parse graph data / use custom events</h2>
         </div>
 
+
+        <div class="row-fluid">
+            <span class="span5" id="year_selection_slider"></span>
+
+                    <label for="amount">Show nodes from</label> <input type="text" id="start_selected_year" style="border:0;  font-weight:bold;"> <label>to:</label> <input type="text" id="end_selected_year" style="border:0;  font-weight:bold;">
+
+        </div>
+
+
         <div class="row">
-            <div class="span11 sigma-parent" id="sigma-example-parent">
+            <div class="span12 sigma-parent" id="sigma-example-parent">
                 <div class="sigma-expand" id="sigma-example"></div>
             </div>
 
 
-            <div class='span1'>
-                <div id="select_year">
-                    <form id="select_year_form" action="">
-                    </form>
-                </div>
-            </div>
+
         </div>
     </div>
 
     </div>
 
 
+
     </div>