NVD3 line chart with vertical line

Question

I'm trying to generate a linechart in NVD3 with a vertical line. Particularly this kind of line chart.

The linechart has two panels a viewing panel and a zoom panel, I would want the line to be on both.

Something like this:

Is this feasible?

Edit: I found out a way to do this by just appending to the data an extra stream which represents a line. e.g.

streams[3] = {key:'myline', values:[{x:68,y:0},{x:68,y:7}]}

Is there a better way?

Answer 1

Yes it's possible,

Here is an example of how to do it : https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

The solution here is to add a javascript function drawing vertical lines using NVD3 ( read carefully the comments ) :

function drawVerticalLines(opts) {

  // CAREFUL HERE !!! the css pasth ".nvd3 .nv-focus .nv-linesWrap" depends on the type of chart you are using, lineChart would use only ".nvd3 .nv-linesWrap" ... !
  if (!(d3.select('#' + opts.id + ' the css pasth ".nvd3 .nv-focus .nv" depends on the type of chart you are using, lineChart would use only -linesWrap').select('.vertical-lines')[0][0])) {
    // Adds new g element with .vertical-lines class; use a css debugger to verify
    d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').append('g')
      .attr('class', 'vertical-lines')
  }

  vertLines = d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').select('.vertical-lines').selectAll('.vertical-line')
    .data(
      [{
        'date': new Date('1967-11-30'),
        'label': 'something to highlight 1967'
      }, {
        'date': new Date('2001-11-30'),
        'label': 'something to highlight 2001'
      }])

  var vertG = vertLines.enter()
    .append('g')
    .attr('class', 'vertical-line')

  vertG.append('svg:line')
  vertG.append('text')

  vertLines.exit().remove()

  // CAREFUL 2 : chart.xAxis.scale() scale depends how you are defining your x Axis in nvd3 chart ... if your are using timestamps, (d.date / 60 / 60 / 24 / 1000) becomes (d.date)

  vertLines.selectAll('line')
    .attr('x1', function(d) {
      return chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000)
    })
    .attr('x2', function(d) {
      return chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000)
    })
    .attr('y1', chart.yAxis.scale().range()[0])
    .attr('y2', chart.yAxis.scale().range()[1])
    .style('stroke', 'red')

  vertLines.selectAll('text')
    .text(function(d) {
      return d.label
    })
    .attr('dy', '1em')
    //x placement ; change dy above for minor adjustments but mainly
    //    change the d.date/60/60/24/1000 
    //y placement ; change 2 to where you want vertical placement
    //rotate -90 but feel free to change to what you would like
    .attr('transform', function(d) {
      return 'translate(' +
        chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000) +
        ',' +
        chart.yAxis.scale()(2) +
        ') rotate(-90)'
    })
    //also you can style however you would like
    //here is an example changing the font size
    .style('font-size', '80%')

}

And call this method in nv.addGraph Callback :

var sharedChart = null; // Shared reference on the chart

nv.addGraph(function() {
      .....

      sharedChart = chart;

      return chart;

      ,
      function() {
        drawVerticalLines(opts, sharedChart);
      }
    );

With opts ... (obviously you don't really need it):

var opts${widgetID.replace('-', '0')} = {
         "dom": "chart${widgetID}",
         "width":    800,
         "height":    400,
         "x": "date",
         "y": "value",
         "group": "variable",
         "type": "lineWithFocusChart",
         "id": "chart${widgetID}" 
     };

Hope this helps, it took me quite a long time to find it and to make it work !