Adding SVG Dashed Line Array Support into Protovis
Recently I wanted to draw dashed lines in Protovis, this particular case was to represent missing data in a time series line chart.
Protovis doesn't support this natively, and is now no-longer maintained with the Standford Visualisation guys preferring D3.js these days.
However, adding in support for dashed lines wasn't too hard, there were a few posts on google groups mentioning how to add it to V3.2, I was using the latest V3.3.1 (the last and most recent version) so I forked it on GitHub and made the changes, mainly adding in options and defaults for the SVG1.1 stroke-dasharray attribute.
You can then do something like the following to create various dashed lines, see the SVG docs for more info.
context.add(pv.Line) .data(myData) .left(function(d) x(d.x)) .bottom(function(d) y(d.y)) .strokeStyle(function(d) d.colour) .segmented(true) .strokeDasharray('2,2') .lineWidth(2);
NB: You'll need to set the segmented attribute if you want to have parts of lines dashed and others not, etc, just like for colours and other styles.
The new fork is available here, and the commit log shows just what was added for this support- as you can see it's not a lot, and might serve other people well if they wish to add other SVG options to Protovis, or just draw some dashed lines :-)










