Stock charts

The Stock graph is used to represent one or more line charts. It can be used as follows:

var Stock = require('paths/stock');
var data = [
  [
    { year: 2012, month: 1, value: 13 },
    { year: 2012, month: 2, value: 12 },
    { year: 2012, month: 3, value: 15 }
  ],
  [
    { year: 2012, month: 1, value: 21 },
    { year: 2012, month: 2, value: 22 },
    { year: 2012, month: 3, value: 22 }
  ]
];

function date(data) {
  var d = new Date();
  d.setYear(data.year);
  d.setMonth(data.month - 1);
  return d.getTime();
}

var stock = Stock({
  data: data,
  xaccessor: date,
  yaccessor: function(d) { return d.value; },
  width: 300,
  height: 200,
  min: 0,
  max: 50,
  compute: {
    color: function(i) { return somePalette[i]; }
  },
  sort: false,
  closed: true
});

Parameters:

• width and height: have the obvious geometric meaning; data will be rescaled to fit into a rectangle of these dimensions
• data: contains the actual data to plot. It should be an array of arrays, each internal array representing a time series to be plotted. The actual format of the data in the time series is not important; the actual abscissa and ordinate of the point are extracted by the xaccessor and yaccessor function.
• xaccessor, yaccessor: two functions that extract from each datum its x and y coordinates. They default to function(d) { return d[0] } and function(d) { return d[1] } respectively, so if data is passed as an array of arrays of arrays of 2 elements, the accessor functions are optional.
• min, max (optional): if not provided will be computed from the y values
• sort (optional, default = true): if true, the points will be sorted by their x coordinate
• closed (optional, default false): a boolean used to decide how to construct the paths for the area plots. If closed is set to true, these will be stretched to include part of the x axis, even if the data are not around 0. Use this if you want to be sure that the area paths touch the horizontal axis
• compute (optional): see the introduction.

The Stock function will then return an object with the properties curves, xscale and yscale. Under curves it contains an array of objects, each having the properties line, area, item and index. line and area are two polygon objects, as in the previous paragraph; the first one holds the polygon for the line chart, while the second one is a closed polygon that can be used to draw the area fill. Under item one finds the original series of elements in the data.

Finally, xscale and yscale are the scales used to represent the data on the given width and height. They can be used to find the coordinates of the axis and draw them.