"use strict";
-function draw(element, options) {
- try {
- element.innerHTML = "";
- element.removeAttribute("style");
- var g = new Dygraph(
- element,
- function() {
- var zp = function(x) { if (x < 10) return "0"+x; else return x; };
- var r = "date,parabola,line,another line,sine wave\n";
- for (var i=1; i<=31; i++) {
- r += "201110" + zp(i);
- r += "," + 10*(i*(31-i));
- r += "," + 10*(8*i);
- r += "," + 10*(250 - 8*i);
- r += "," + 10*(125 + 125 * Math.sin(0.3*i));
- r += "\n";
- }
- return r;
- }, options
- );
-
- // These don't work yet.
- g.updateOptions({
- labelsDiv: 'status',
- });
- } catch(err) {
- addMessage(err);
- throw(err);
- } finally {
+var Index = {};
+
+Index.splitVariables = function() { // http://www.idealog.us/2006/06/javascript_to_p.html
+ var query = window.location.search.substring(1);
+ var args = {};
+ var vars = query.split("&");
+ 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;
}
-function addMessage(text) {
- var messages = document.getElementById("messages");
- messages.innerText = messages.innerText + text + "\n";
-}
+/**
+ * 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");
-function start() {
- var options = {
- colors: [
- "rgb(51,204,204)",
- "rgb(255,100,100)",
- "#00DD55",
- "rgba(50,50,200,0.4)"
- ],
- labelsSeparateLines: true,
- labelsKMB: true,
- legend: 'always',
- width: 640,
- height: 480,
- title: 'Interesting Shapes',
- xlabel: 'Date',
- ylabel: 'Count',
- axisLineColor: 'white',
- drawXGrid: false,
- pointClickCallback: function() { alert("p-click!"); },
+ // 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,
+ options
+ );
+
+ // These don't work yet.
+ g.updateOptions({
+ labelsDiv: 'status',
+ });
+}
+
+Index.addMessage = function(text) {
+ var messages = document.getElementById("messages");
+ messages.textContent = messages.textContent + text + "\n";
+}
+
+/**
+ * Start up the palette system.
+ */
+Index.start = function() {
+ var variables = Index.splitVariables();
+ var sampleName = variables["sample"] || "interestingShapes";
+ var sampleIndex = Samples.indexOf(sampleName);
+ var sample = Samples.data[sampleIndex];
+ var data = sample.data;
var redraw = function() {
- draw(document.getElementById("graph"), 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.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();
- var palette = new Palette();
- palette.create(document, document.getElementById("optionsPalette"));
- palette.write(options);
- palette.onchange = redraw;
- 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];