Output_viewGraph: Add checkboxes to enable / disable series

8c129da8 · Jérome Perrin · afca0d8d · 8c129da8 · 8c129da8
Commit 8c129da8 authored Apr 16, 2015 by Jérome Perrin
Showing with 49 additions and 3 deletions

dream/platform/src/dream/Output_viewGraph.html dream/platform/src/dream/Output_viewGraph.html +2 -1

dream/platform/src/dream/Output_viewGraph.js dream/platform/src/dream/Output_viewGraph.js +47 -2

No files found.
--- a/dream/platform/src/dream/Output_viewGraph.html
+++ b/dream/platform/src/dream/Output_viewGraph.html
@@ -14,6 +14,7 @@
    <script src="Output_viewGraph.js" type="text/javascript"></script>
  </head>
  <body>
-    <div class="graph_container" style="width: 100%;height:300px"></div>
+    <div class="graph_container" style="float:left; width: 100%; height:300px"></div>
+    <div class="choices" style="float:right; width: 10%; height:300px"></div>
  </body>
 </html>
--- a/dream/platform/src/dream/Output_viewGraph.js
+++ b/dream/platform/src/dream/Output_viewGraph.js
@@ -37,11 +37,56 @@
    })

    .declareMethod("startService", function () {
-      // XXX Manually calculate width and height when resizing
+      var i=0,
+        options=this.props.data.options,
+        datasets=this.props.data.series,
+        graph_container=this.props.element.querySelector(".graph_container"),
+        choice_container=$(this.props.element.querySelector(".choices"));
+      
      $.plot(
-        this.props.element.querySelector(".graph_container"),
+        graph_container,
        this.props.data.series,
        this.props.data.options
      );
+      
+      // Add checkboxes to toggle series on & off, inspired from http//:www.flotcharts.org/flot/examples/series-toggle/index.html
+      function plotAccordingToChoices() {
+        var data = [];
+        choice_container.find("input:checked").each(function () {
+          var key = $(this).attr("name");
+          if (key && datasets[key]) {
+            data.push(datasets[key]);
+          }
+        });
+        if (data.length > 0) {
+          $.plot(graph_container, data, options);
+        }
+      }
+          
+      if ( ! this.props.data.options.bars) {
+        if (this.props.data.series.length >= 5) {
+          // display the boxes
+          $(graph_container).css({'width': '90%'});
+  
+          // hard-code color indices to prevent them from shifting as
+          // series are turned on/off
+          $.each(datasets, function(key, val) {
+            val.color = i;
+            i += 1;
+          });
+
+          // insert checkboxes
+          $.each(datasets, function(key, val) {
+            choice_container.append("<br/><input type='checkbox' name='" + key +
+              "' checked='checked' id='id" + key + "'></input>" +
+              "<label style='display:inline' for='id" + key + "'>"
+              + val.label + "</label>");
+          });
+
+          choice_container.find("input").click(plotAccordingToChoices);
+
+          plotAccordingToChoices();
+        }
+      }
    });
 }(window, rJS, jQuery, initGadgetMixin));