X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=experimental%2Fpalette%2Findex.js;h=924b1390c75a769077b01642d0f22fbb834c51aa;hb=a4c3ece0a11e4e5c4f1f51a8bc8b7878d34ee052;hp=64f53161629a79cc792f44553eed763f16e688a4;hpb=2b3ebdd94ffd4599b9ca75676819d7a58d70a39e;p=dygraphs.git

diff --git a/experimental/palette/index.js b/experimental/palette/index.js
index 64f5316..924b139 100644
--- a/experimental/palette/index.js
+++ b/experimental/palette/index.js
@@ -32,16 +32,35 @@ Index.splitVariables = function() { // http://www.idealog.us/2006/06/javascript_
   var query = window.location.search.substring(1); 
   var args = {};
   var vars = query.split("&"); 
-  for (var i = 0;i < vars.length; i++) { 
-    var pair = vars[i].split("="); 
-    args[pair[0]] = pair[1];
+  for (var i = 0; i < vars.length; i++) { 
+    if (vars[i].length > 0) {
+      var pair = vars[i].split("="); 
+      args[pair[0]] = pair[1];
+    }
   }
   return args;
 }
 
+/**
+ * Draw the graph.
+ * @param {Object} element the display element
+ * @param {Object} data the data to be shown
+ * @param {Object} options the options hash.
+ */
 Index.draw = function(element, data, options) {
   element.innerHTML = "";
   element.removeAttribute("style");
+
+  // Replace the drawCallback function with one that also lets us track
+  // all labels (for the palette.)
+  // If the drawCallback option is not specified, use a null function.
+  var originalDraw = options["drawCallback"] || function() {};
+  options.drawCallback = function(g, isInitial) {
+    Index.palette.setSeries(g.getLabels());
+    // Call the original function, too.
+    originalDraw(g, isInitial);
+  };
+
   var g = new Dygraph(
     element,
     data,
@@ -56,28 +75,31 @@ Index.draw = function(element, data, options) {
 
 Index.addMessage = function(text) {
   var messages = document.getElementById("messages");
-  messages.innerText = messages.innerText + text + "\n";
+  messages.textContent = messages.textContent + text + "\n";
 }
 
+/**
+ * Start up the palette system.
+ */
 Index.start = function() {
   var variables = Index.splitVariables();
-  var sampleName = variables["sample"];
-  if (!(sampleName)) {
-    sampleName = "interestingShapes";
-  }
+  var sampleName = variables["sample"] || "interestingShapes";
   var sampleIndex = Samples.indexOf(sampleName);
   var sample = Samples.data[sampleIndex];
   var data = sample.data;
   var redraw = function() {
-    Index.draw(document.getElementById("graph"), data, palette.read());
+    Index.draw(document.getElementById("graph"), data, Index.palette.read());
   }
 
+  // Selector is the drop-down for selecting a set of data.
+
+  // Popupate the selector with the set of data samples
   var selector = document.getElementById("selector").getElementsByTagName("select")[0];
   for (var idx in Samples.data) {
     var entry = Samples.data[idx];
     var option = document.createElement("option");
     option.value = entry.id;
-    option.innerText = entry.title;
+    option.textContent = entry.title;
     selector.appendChild(option);
   }
   selector.onchange = function() {
@@ -96,13 +118,17 @@ Index.start = function() {
     window.location = url;
   }
   selector.selectedIndex = sampleIndex;
-  var palette = new Palette();
-  palette.create(document, document.getElementById("optionsPalette"));
-  palette.write(sample.options);
-  palette.onchange = redraw;
-  palette.filterBar.focus();
+
+  // Palette contains the widget that builds options.
+  Index.palette = new MultiPalette();
+  Index.palette.create(document.getElementById("optionsPalette"));
+  Index.palette.write(sample.options);
+  Index.palette.onchange = redraw;
+  Index.palette.filterBar.focus();
+
   redraw();
 
+  // Find all new options which we don't implement here in the palette.
   for (var opt in Dygraph.OPTIONS_REFERENCE) {
     if (!(opt in opts)) {
       var entry = Dygraph.OPTIONS_REFERENCE[opt];