Bullet Charts

View full screen.

Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., , the same measure a year ago).

The bullet layout in Protovis is based on an earlier implementation by Clint Ivy and Jamie Love.

Next: Bubble Charts

Source

<html>
  <head>
    <title>Bullet Charts</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="bullet.js"></script>
    <style type="text/css">

span {
  display: block !important;
}

#fig {
  width: 520px;
  height: 350px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var format = pv.Format.number();

var vis = new pv.Panel()
    .data(bullets)
    .width(400)
    .height(30)
    .margin(20)
    .left(100);

var bullet = vis.add(pv.Layout.Bullet)
    .orient("left")
    .ranges(function(d) d.ranges)
    .measures(function(d) d.measures)
    .markers(function(d) d.markers);

bullet.range.add(pv.Bar);
bullet.measure.add(pv.Bar);

bullet.marker.add(pv.Dot)
    .shape("triangle")
    .fillStyle("white");

bullet.tick.add(pv.Rule)
  .anchor("bottom").add(pv.Label)
    .text(bullet.x.tickFormat);

bullet.anchor("left").add(pv.Label)
    .font("bold 12px sans-serif")
    .textAlign("right")
    .textBaseline("bottom")
    .text(function(d) d.title);

bullet.anchor("left").add(pv.Label)
    .textStyle("#666")
    .textAlign("right")
    .textBaseline("top")
    .text(function(d) d.subtitle);

vis.render();

    </script>
  </div></div></body>
</html>

Data

var bullets = [
  {
    title: "Revenue",
    subtitle: "US$, in thousands",
    ranges: [150, 225, 300],
    measures: [270],
    markers: [250]
  },
  {
    title: "Profit",
    subtitle: "%",
    ranges: [20, 25, 30],
    measures: [23],
    markers: [26]
  },
  {
    title: "Order Size",
    subtitle: "US$, average",
    ranges: [350, 500, 600],
    measures: [320],
    markers: [550]
  },
  {
    title: "New Customers",
    subtitle: "count",
    ranges: [1400, 2000, 2500],
    measures: [1650],
    markers: [2100]
  },
  {
    title: "Satisfaction",
    subtitle: "out of 5",
    ranges: [3.5, 4.25, 5],
    measures: [4.7],
    markers: [4.4]
  }
];