Area Charts

View full screen.

This simple area chart is constructed using an area mark, with an added line for emphasis on the top edge. Next, rules and labels are added for reference values.

Although this example is basic, it provides a good starting point for adding more complex features. For instance, mouseover interaction can be added to allow precise reading of data values. Or multiple series of data can be added to produce a stacked area chart.

Next: Bar & Column Charts

Source

<html>
  <head>
    <title>Area Chart</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="area.js"></script>
    <style type="text/css">

#fig {
  width: 430px;
  height: 225px;
}

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

/* Sizing and scales. */
var w = 400,
    h = 200,
    x = pv.Scale.linear(data, function(d) d.x).range(0, w),
    y = pv.Scale.linear(0, 4).range(0, h);

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(20)
    .left(20)
    .right(10)
    .top(5);

/* Y-axis and ticks. */
vis.add(pv.Rule)
    .data(y.ticks(5))
    .bottom(y)
    .strokeStyle(function(d) d ? "#eee" : "#000")
  .anchor("left").add(pv.Label)
    .text(y.tickFormat);

/* X-axis and ticks. */
vis.add(pv.Rule)
    .data(x.ticks())
    .visible(function(d) d)
    .left(x)
    .bottom(-5)
    .height(5)
  .anchor("bottom").add(pv.Label)
    .text(x.tickFormat);

/* The area with top line. */
vis.add(pv.Area)
    .data(data)
    .bottom(1)
    .left(function(d) x(d.x))
    .height(function(d) y(d.y))
    .fillStyle("rgb(121,173,210)")
  .anchor("top").add(pv.Line)
    .lineWidth(3);

vis.render();

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

Data

var data = pv.range(0, 10, .1).map(function(x) {
    return {x: x, y: Math.sin(x) + Math.random() * .5 + 2};
  });