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,
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 sample = Samples[sampleName];
+ 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());
}
- var palette = new Palette();
- palette.create(document, document.getElementById("optionsPalette"));
- palette.write(sample.options);
- palette.onchange = redraw;
- palette.filterBar.focus();
+ // 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.textContent = entry.title;
+ selector.appendChild(option);
+ }
+ selector.onchange = function() {
+ var id = selector.options[selector.selectedIndex].value;
+ var url = document.URL;
+ var qmIndex = url.indexOf("?");
+ if (qmIndex >= 0) {
+ url = url.substring(0, qmIndex);
+ }
+ url = url + "?sample=" + id;
+ for (var idx in variables) {
+ if (idx != "sample") {
+ url = url + "&" + idx + "=" + variables[idx];
+ }
+ }
+ window.location = url;
+ }
+ selector.selectedIndex = sampleIndex;
+
+ // 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];