Bullet Graph

var profitData = [ {x: "profit", y: 0.23} ];
var profitThresholds = [
  {x: "profit", stage: 0, low: 0,    high: 0.20},
  {x: "profit", stage: 1, low: 0.20, high: 0.25},
  {x: "profit", stage: 2, low: 0.25, high: 0.30}
];

var usersData = [ {x: "newCust", y: 1600} ];
var usersThresholds = [
  {x: "newCust", stage: 0, low: 0,    high: 1500},
  {x: "newCust", stage: 1, low: 1500, high: 2000},
  {x: "newCust", stage: 2, low: 2000, high: 2500}
];

var salaryData = [ {x: "revenue", y: 280000} ];
var salaryThresholds = [
  {x: "revenue", stage: 0, low: 0,      high: 150000},
  {x: "revenue", stage: 1, low: 150000, high: 225000},
  {x: "revenue", stage: 2, low: 225000, high: 300000}
];

var salesData = [ {x: "sales", y: 280} ];
var salesThresholds = [
  {x: "sales", stage: 0, low: 0,   high: 350},
  {x: "sales", stage: 1, low: 350, high: 500},
  {x: "sales", stage: 2, low: 500, high: 600}
];

function createChart(data, thresholds, formatter, title) {
  var xScale = new Plottable.Scales.Category();
  var xScaleBg = new Plottable.Scales.Category();
  var yScale = new Plottable.Scales.Linear()
    .domain([thresholds[0].low, thresholds[thresholds.length - 1].high]);

  var colorScale = new Plottable.Scales.InterpolatedColor()
    .range(["#9ac3f9", "#E3F2FD"]);

  var barPlot = new Plottable.Plots.Bar()
    .x(function(d) { return d.x; }, xScale)
    .y(function(d) { return d.y; }, yScale)
    .attr("fill", "#25383C")
    .addDataset(new Plottable.Dataset(data));

  var bandPlot = new Plottable.Plots.Rectangle()
    .y(function(d) { return d.low; }, yScale)
    .y2(function(d) { return d.high; }, yScale)
    .x(function(d) { return d.x; }, xScaleBg)
    .attr("fill", function(d) { return d.stage; }, colorScale)
    .attr("stroke", function(d) { return d.stage; }, colorScale)
    .addDataset(new Plottable.Dataset(thresholds));

  var yAxis = new Plottable.Axes.Numeric(yScale, "left")
    .formatter(formatter);

  var group = new Plottable.Components.Group([bandPlot, barPlot]);
  var title = new Plottable.Components.TitleLabel(title);

  return new Plottable.Components.Table([
    [null,  title],
    [yAxis, group]
  ]);
}

var table = new Plottable.Components.Table([[
  createChart(profitData, profitThresholds, new Plottable.Formatters.percentage(), "Profit"),
  createChart(usersData, usersThresholds, new Plottable.Formatters.general(), "Users"),
  createChart(salaryData, salaryThresholds, new Plottable.Formatters.currency(0), "Salary"),
  createChart(salesData, salesThresholds, new Plottable.Formatters.currency(), "Sales")
]]);

table.renderTo("svg#example");