title: click event for nvd3 chart (as a custom output binding) in a shiny application
body: <p><strong>EDIT:</strong></p>
  
  <p>Solved the issue: <code>.useInteractiveGuideline(true)</code> changed to  <code>.useInteractiveGuideline(false)</code></p>
  
  <p><strong>ORIGINAL:</strong></p>
  
  <p>I am trying to modify the custom output binding <a href="https://github.com/jcheng5/shiny-js-examples/tree/master/output" rel="nofollow">example</a> using an NVD3 line chart with attaching a click event listener to the NVD3 chart. I modified the <code>linechart-bindings.js</code> file as follows. The only modification is this part of the code (the whole file is also copied below so you can see there i added the snippet):</p>
  
  <pre><code>    chart.lines.dispatch.on("elementClick", function( e ) {
          console.log(e);
      });
  </code></pre>
  
  <p>The app starts without problem, but there is no console log printout when i click the chart. Probably my approach is too simplistic and there is some obvious part missing. Any idea how to solve this?</p>
  
  <p>The full <code>linechar-bindings.js</code> file:</p>
  
  <pre><code>// Put code in an Immediately Invoked Function Expression (IIFE).
  // This isn't strictly necessary, but it's good JavaScript hygiene.
  (function() {
  
  // See http://rstudio.github.io/shiny/tutorial/#building-outputs for
  // more information on creating output bindings.
  
  // First create a generic output binding instance, then overwrite
  // specific methods whose behavior we want to change.
  var binding = new Shiny.OutputBinding();
  
  binding.find = function(scope) {
    // For the given scope, return the set of elements that belong to
    // this binding.
    return $(scope).find(".nvd3-linechart");
  };
  
  binding.renderValue = function(el, data) {
    // This function will be called every time we receive new output
    // values for a line chart from Shiny. The "el" argument is the
    // div for this particular chart.
  
    var $el = $(el);
  
    // The first time we render a value for a particular element, we
    // need to initialize the nvd3 line chart and d3 selection. We'll
    // store these on $el as a data value called "state".
    if (!$el.data("state")) {
      var chart = nv.models.lineChart()
        .margin({left: 100})
        .useInteractiveGuideline(true)
        .transitionDuration(350)
        .showLegend(true)
        .showYAxis(true)
        .showXAxis(true);
  
      chart.xAxis     //Chart x-axis settings
        .axisLabel('Time (ms)')
        .tickFormat(d3.format(',r'));
  
      chart.yAxis     //Chart y-axis settings
        .axisLabel('Voltage (v)')
        .tickFormat(d3.format('.02f'));
  
      chart.lines.dispatch.on("elementClick", function( e ) {
          console.log(e);
      });
  
      nv.utils.windowResize(chart.update);
  
      var selection = d3.select(el).select("svg");
  
      // Store the chart object on el so we can get it next time
      $el.data("state", {
        chart: chart,
        selection: selection
      });
    }
  
    // Now, the code that'll run every time a value is rendered...
  
    // Retrieve the chart and selection we created earlier
    var state = $el.data("state");
  
    // Schedule some work with nvd3
    nv.addGraph(function() {
      // Update the chart
      state.selection
        .datum(data)
        .transition(500)
        .call(state.chart);
      return state.chart;
    });
  };
  
  // Tell Shiny about our new output binding
  Shiny.outputBindings.register(binding, "shinyjsexamples.nvd3-linechart");
  
  })();
  </code></pre>