Datasets

var msPerDay = 86400000;
var dataObjects;
var lineRenderer;

var makeLinearData = function(points, step, slope) {
  var data = [];
  for(var i = 0; i < points * step; i += step) {
    data.push({x: new Date(i * msPerDay), y: i * slope});
  }
  return data;
}

var makeExponentialData = function(points, step, power) {
  var data = [];
  for(var i = 0; i < points * step; i += step) {
    data.push({x: new Date(i * msPerDay), y: Math.pow(i, power)});
  }
  return data;
}

var makeOscillatingData = function(points, step) {
  var data = [];
  for(var i = 0; i < points * step; i += step) {
    data.push({x: new Date(i * msPerDay), y: Math.sin(i) * 4 + 8});
  }
  return data;
}

var includeDatasets = function() {
  var ds = [];
  dataObjects.forEach(function(dataObject) {
    if(dataObject.include === true) {
      ds.push(dataObject.dataset);
    }
  });
  lineRenderer.datasets(ds);
};

var makeLabel = function(string) {
  return new Plottable.Components.Label(string, 0)
  .addClass("selected")
  .xAlignment("left");
}

var toggle = function(label, object) {
  if (label.hasClass("selected")) {
    label.text("☐" + label.text().slice(1, label.text().length));
    label.removeClass("selected");
    object.include = false;
  }
  else {
    label.text("☑" + label.text().slice(1, label.text().length));
    label.addClass("selected");
    object.include = true;
  }
  includeDatasets();
};

var linear= {};
linear.data = makeLinearData(2, 20, 2);
linear.color = "#34b24c";
var exponential = {};
exponential.data = makeExponentialData(20, 1, 1.5);
exponential.color = "#ffa500";
var oscillate = {};
oscillate.data = makeOscillatingData(50, .4);
oscillate.color = "#551a8b";
dataObjects = [linear, exponential, oscillate];

dataObjects.forEach(function(dataObject) {
  dataObject.dataset = new Plottable.Dataset(dataObject.data, {"color": dataObject.color});
  dataObject.include = true;
});

var xScale = new Plottable.Scales.Time();
var xAxis = new Plottable.Axes.Time(xScale, "bottom");

var yScale = new Plottable.Scales.Linear().domain([0, 40]);
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

lineRenderer = new Plottable.Plots.Line()
          .x(function(d) { return d.x; }, xScale)
          .y(function(d) { return d.y; }, yScale)
          .attr("stroke", function(d, i, ds) { return ds.metadata().color; });
includeDatasets();

var linLabel = makeLabel("☑ linear dataset");
var expLabel = makeLabel("☑ exponential dataset");
var oscLabel = makeLabel("☑ oscillating dataset");

var labels = new Plottable.Components.Table([[linLabel], [expLabel], [oscLabel]]);
var areaChart = new Plottable.Components.Table([[null, labels],
                                                [yAxis, lineRenderer],
                                                [null,  xAxis]]);

areaChart.renderTo("svg#example");

new Plottable.Interactions.Click()
  .onClick(function() {
    toggle(linLabel, linear)
  })
  .attachTo(linLabel);
new Plottable.Interactions.Click()
  .onClick(function() {
    toggle(expLabel, exponential)
  })
  .attachTo(expLabel);
new Plottable.Interactions.Click()
  .onClick(function() {
    toggle(oscLabel, oscillate)
  })
  .attachTo(oscLabel);