Segment Plot

var data = [
  { x: 1, x2: 3, y: 5, y2: 5 },
  { x: 2, x2: 4, y: 3, y2: 3 },
  { x: 3, x2: 7, y: 1, y2: 1 },
  { x: 4, x2: 6, y: 4, y2: 4 },
  { x: 5, x2: 7, y: 2, y2: 2 },
  { x: 5, x2: 7, y: 5, y2: 5 }
];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();

var plot = new Plottable.Plots.Segment()
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .x2(function(d) { return d.x2; })
  .y2(function(d) { return d.y2; })
  .addDataset(new Plottable.Dataset(data))
  .renderTo("svg#example");

window.addEventListener("resize", function() {
  plot.redraw();
});

Inherits from Plots.XY

Segment plots are used to draw line segments. One useful application of segment plots would be to overlay average or aggregate lines over a bar plot.

Public Methods

• .x2()/.x2(number|accessor)/.x2(number|accessor, scale)

• Gets/sets the value of x2 for the current plot. The first parameter can be a number or an Accessor function that returns a number. If the parameter scale is provided, results will be scaled.

• .y2()/.y2(number|accessor)/.y2(number|accessor, scale)

  Gets/sets the value of y2 for the current plot. The first parameter can be a number or an Accessor function that returns a number. If the parameter scale is provided, results will be scaled.