#dashed lines

Aunties Sewing Room – A Script with Stitches

Download Aunties Sewing Room – A Script with Stitches

Includes OTF TTF 

Aunties Sewing Room – A Script with Stitches font details

Formats: OTFTTF

Released: 19th May ’20

Price: only  $10.00  $5.00 USD

Aunties Sewing Room – A Script with Stitches font preview

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.