dashed nvd3 line from rCharts

code.R

      options(viewer=NULL)
      
      library(reshape2)
      library(ggplot2)
      library(rCharts)
      
      ecm <- reshape2::melt(economics[,c('date', 'uempmed', 'psavert')], id = 'date')
      p7 <- nPlot(value ~ date, group = 'variable', data = ecm, type = 'lineWithFocusChart')
      
      
      #grab template from
      #https://github.com/ramnathv/rCharts/blob/master/inst/libraries/nvd3/layouts/chart.html
      #modify to add callback on graph render
      
      p7$setTemplate(script = sprintf("
        <script type='text/javascript'>
          $(document).ready(function(){
            draw{{chartId}}()
          });
        function draw{{chartId}}(){  
          var opts = {{{ opts }}},
          data = {{{ data }}}
      
          if(!(opts.type==='pieChart' || opts.type==='sparklinePlus' || opts.type==='bulletChart')) {
            var data = d3.nest()
            .key(function(d){
              //return opts.group === undefined ? 'main' : d[opts.group]
              //instead of main would think a better default is opts.x
              return opts.group === undefined ? opts.y : d[opts.group];
            })
            .entries(data);
          }
      
          if (opts.disabled != undefined){
            data.map(function(d, i){
              d.disabled = opts.disabled[i]
            })
          }
      
          nv.addGraph(function() {
            var chart = nv.models[opts.type]()
            .width(opts.width)
            .height(opts.height)
      
            if (opts.type != 'bulletChart'){
              chart
              .x(function(d) { return d[opts.x] })
              .y(function(d) { return d[opts.y] })
            }
      
      
      {{{ chart }}}
      
      {{{ xAxis }}}
      
      {{{ x2Axis }}}
      
      {{{ yAxis }}}
      
      //on legend click, line might be deleted
      //when redrawn we need to make dashed again
      chart.legend.dispatch.on('legendClick', dashedAfterLegend )
      
      function dashedAfterLegend(){
        //to make dashed we need to make sure it is drawn first
        //not a js expert so might not be best way to handle
        window.setTimeout(function dashedDelay(){
          makeDashed(opts)
        }  , 400)
      }
      
      d3.select('#' + opts.id)
      .append('svg')
      .datum(data)
      .transition().duration(500)
      .call(chart);
      
      nv.utils.windowResize(chart.update);
      return chart;
          },%s);
        };
      %s
      </script>
      "
      ,
      #here is where you can type your line styling function
      "function(){ makeDashed( opts ) } "
      
      # here is the part that was in afterScript but moved to work with shiny
      #see this article for help on dashed d3 lines
      #http://www.d3noob.org/2013/01/making-dashed-line-in-d3js.html
      ,"
      function makeDashed( opts ){
        // select all the lines with d3 both main plot and focus
        // see this article for help on dashed d3 lines
        // http://www.d3noob.org/2013/01/making-dashed-line-in-d3js.html
        d3.select('#' + opts.id).selectAll('.nv-linesWrap .nv-group')
          .filter(function(g){return g.key== 'psavert'})
          .selectAll('.nv-line')
            .style('stroke-dasharray', ('3, 3'))
      }
      "
      
      ))
      p7