working on the table -> graph feature,

change color when click the x, y checkbox in the table
litaotao · Oct 20, 2015 · b70eed6 · b70eed6
1 parent 2f4ce17
commit b70eed6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/dashboard/static/js/dash.js b/dashboard/static/js/dash.js
@@ -16,7 +16,7 @@ function initGridstack(){
   $('.grid-stack').gridstack(options);
 }
 
-var box_template = '                                 \
+var box_template = ' \
   <div data-gs-min-height="4" data-gs-min-width="6">   \
     <div class="grid-stack-item-content">              \
       <div class="chart-wrapper">                      \
@@ -116,11 +116,24 @@ var th_template = ' \
     {0} <span class="caret"></span>  \
   </button>  \
   <ul class="dropdown-menu"> \
-    <li style="width: 50px;"><input type="checkbox" value="" style="margin-left: 15px;">   x</li> \
-    <li style="width: 50px;"><input type="checkbox" value="" style="margin-left: 15px;">   y</li> \
+    <li style="width: 50px;"><input type="checkbox" onclick="markXY(this, 0)" style="margin-left: 15px;">   x</li> \
+    <li style="width: 50px;"><input type="checkbox" onclick="markXY(this, 1)" style="margin-left: 15px;">   y</li> \
   </ul> \
 </div>'
 
+function markXY(obj, xy){
+  btn_type = xy ? 'btn-info' : 'btn-warning';
+  if (obj.checked){
+      var node = obj.parentElement.parentElement.parentElement.children[0];
+      node.classList.remove('btn-success');
+      node.classList.add(btn_type);
+  }else{
+      var node = obj.parentElement.parentElement.parentElement.children[0];
+      node.classList.remove(btn_type);
+      node.classList.add('btn-success');
+  }
+}
+
 function parseTable(data){
   var table = genElement("table");
   var thead = genElement("thead");
@@ -134,7 +147,6 @@ function parseTable(data){
   var columns = [];
   $.each(data, function(key, value){
     var th = genElement("th");
-    // th.innerText = key;
     var tmp = strFormat(th_template, "&nbsp " + key + "&nbsp ");
     th.innerHTML = tmp;
     tr.appendChild(th);
@@ -359,11 +371,6 @@ function addBox(){
 }
 
 
-function test(){
-  console.log("test");
-}
-
-
 function strFormat(theString){
     // The string containing the format items (e.g. "{0}")
     // will and always has to be the first argument.

diff --git a/dashboard/static/js/dash.vis.js b/dashboard/static/js/dash.vis.js
@@ -46,3 +46,20 @@ function build_graph(){
     add_graph("#test_graph", data);
 }
 
+
+function genLineChart(){
+  var chart = nv.models.lineChart();
+  return chart;
+}
+
+function genMultiBarChart(){
+  var chart = nv.models.multiBarChart()
+    .stacked(true)
+    ;
+  return chart;
+}
+
+function renderChart(dom_id, chart, data){
+  var svg = d3.select(dom_id).datum(data);
+  svg.transition().duration(0).call(chart);
+}
diff --git a/dashboard/templates/dashboard.html b/dashboard/templates/dashboard.html
@@ -135,6 +135,9 @@ <h5 class="modal-title" id="myModalLabel">Edit your dash graph</h5>
     $(this).addClass("active");
 })
 
+
 </script>
+
+
 </body>
 </html>
diff --git a/dashboard/templates/dashboard_list.html b/dashboard/templates/dashboard_list.html
@@ -80,5 +80,6 @@
     });
 </script>
 
+
 </body>
 </html>
diff --git a/dashboard/templates/nvd3.html b/dashboard/templates/nvd3.html
@@ -43,10 +43,11 @@
             var width = nv.utils.windowSize().width,
                 height = nv.utils.windowSize().height;
 
-            var chart = nv.models.multiBarChart()
-                .width(700)
-                .height(500)
-                .stacked(true)
+            // var chart = nv.models.multiBarChart()
+            var chart = nv.models.lineChart()
+                // .width(700)
+                // .height(500)
+                // .stacked(true)
                 ;
 
             chart.dispatch.on('renderEnd', function(){
@@ -55,7 +56,7 @@
 
             var svg = d3.select('#test1 svg').datum(test_data);
             console.log('calling chart');
-            svg.transition().duration(0).call(chart);
+            svg.transition(100).duration(0).call(chart);
             a = chart;
             return chart;
         },