Base Plottable JSFiddle

by bluong63

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/palantir/plottable/develop/plottable.css">
<script src="https://rawgithub.com/palantir/plottable/develop/quicktests/exampleUtil.js"></script>
<svg id="svg" width="400" height="400"/>
Above is a chart with 2 line plots, each in correspondence with different X Axes but the same Y Axis.<br>

You can pan and zoom on each axis in the vertical direction for the Y Axis and the horizontal direction for the X Axes.<br>

Note that panning and zooming on an X Axis will only affect the corresponding plot.<br>

However, you can also pan and zoom on the plot area, which will affect all of the axes accordingly.

JavaScript

var data = [];
var dataFactor = 1000000;
var dataStartOffset = 50000000;
for (var i = 0; i < 200; i++) {
  data[i] = {x: new Date(i * dataFactor + dataStartOffset), y: i};
}

var data2 = [];
var data2Factor = 1500000;
var data2StartOffset = 100000000;
for (i = 0; i < 200; i++) {
  data2[i] = {x: new Date(i * data2Factor + data2StartOffset), y: 2 * i};
}

var xScale = new Plottable.Scales.Time();
var xScale2 = new Plottable.Scales.Time();
var yScale = new Plottable.Scales.Linear().domainMin(0);

var plot = new Plottable.Plots.Line();
plot.addDataset(new Plottable.Dataset(data))
    .x(function(d) { return d.x; }, xScale)
    .y(function(d) { return d.y; }, yScale)
    .attr("stroke", "blue");

var plot2 = new Plottable.Plots.Line();
plot2.addDataset(new Plottable.Dataset(data2))
    .x(function(d) { return d.x; }, xScale2)
    .y(function(d) { return d.y; }, yScale)
    .attr("stroke", "red");

var plotGroup = new Plottable.Components.Group([plot, plot2]);

var xAxis = new Plottable.Axes.Time(xScale, "bottom");
var xAxis2 = new Plottable.Axes.Time(xScale2, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var pzi = new Plottable.Interactions.PanZoom();
pzi.addXScale(xScale);
pzi.addXScale(xScale2);
pzi.addYScale(yScale);
pzi.attachTo(plotGroup);

var pziXAxis = new Plottable.Interactions.PanZoom();
pziXAxis.addXScale(xScale);
pziXAxis.attachTo(xAxis);

var pziXAxis2 = new Plottable.Interactions.PanZoom();
pziXAxis2.addXScale(xScale2);
pziXAxis2.attachTo(xAxis2);

var pziYAxis = new Plottable.Interactions.PanZoom();
pziYAxis.addYScale(yScale);
pziYAxis.attachTo(yAxis);

var titleLabel = new Plottable.Components.TitleLabel("PanZoom with multiple scales");

new Plottable.Components.Table([[null, titleLabel], [yAxis, plotGroup], [null, xAxis], [null, xAxis2]]).renderTo("#svg");