title: Shiny Custom Output Binding
body: <p>I'm trying to bind a Line Charts from c3.js to a custom output in Shiny. For some reason, its not plotting the charts.
  Here is My code:</p>
  
  <p>linechart-binding.js</p>
  
  <pre><code>var binding = new Shiny.OutputBinding();
  
  binding.find = function(scope) {
    return $(scope).find(".nvd3-linechart");
  };
  
  binding.renderValue = function(el, messages) {
    var $el = $(el);  
  
    c3.generate({
     bindto: '#chart',
     data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 550, 204, 104, 404, 145, 245],
                  ['data3', 450, 420, 410, 440, 415, 425],
                  ['data4', 350, 320, 310, 340, 315, 325],
                  ['data5', 250, 220, 210, 240, 215, 225],
                  ['data6', 150, 120, 110, 140, 115, 125]
          ]
      }
  });
  
  };
  
  Shiny.outputBindings.register(binding, "shinyjsexamples.nvd3-linechart");
  </code></pre>
  
  <p>global.R</p>
  
  <pre><code>source("linechart.R")
  </code></pre>
  
  <p>server.R</p>
  
  <pre><code>shinyServer(function(input, output, session) {
  
    output$mychart &lt;- renderLineChart({
      Return a data frame. Each column will be a series in the line chart.
      data.frame(
        Sine = sin(1:100/10 + input$sinePhase * pi/180) * input$sineAmplitude,
        Cosine = 0.5 * cos(1:100/10),
        "Sine 2" = sin(1:100/10) * 0.25 + 0.5
      )
    })
  })
  </code></pre>
  
  <p>ui.R</p>
  
  <pre><code>shinyUI(fluidPage(
    tags$h2("JavaScript output binding example"),
    fluidRow(
      column(width=6,
        p("This Shiny app is an adaptation of the",
          a(href="http://nvd3.org/examples/line.html", "Simple Line Chart"),
          "example for the",
          a(href="http://nvd3.org/", "NVD3.js"),
          "JavaScript charting library."
        ),
        p("Source code:",
          a(href="https://github.com/jcheng5/shiny-js-examples/tree/master/output", "@jcheng5/shiny-js-examples/output"))
      )
    ),
    fluidRow(
      column(width=12,
        lineChartOutput("chart")
      ),
      column(width=3,
        sliderInput("sinePhase", "Sine phase", -180, 180, 0, step=10,
          animate=animationOptions(interval=100, loop=TRUE)),
        sliderInput("sineAmplitude", "Sine amplitude", -2, 2, 1, step=0.1,
          animate=animationOptions(interval=100, loop=TRUE))
      )
    )
  ))
  </code></pre>
  
  <p>linechart.R</p>
  
  <pre><code>library(shiny)
  
  # To be called from ui.R
  lineChartOutput &lt;- function(inputId, width="100%", height="400px") {
    style &lt;- sprintf("width: %s; height: %s;",
      validateCssUnit(width), validateCssUnit(height))
  
    tagList(
      # Include CSS/JS dependencies. Use "singleton" to make sure that even
      # if multiple lineChartOutputs are used in the same page, we'll still
      # only include these chunks once.
      singleton(tags$head(
        tags$script(src="d3/d3.v3.min.js"),
        tags$script(src="c3.min.js"),
        tags$link(rel="stylesheet", type="text/css", href="c3.min.css"),
        tags$script(src="linechart-binding.js")
      )),
      div(id=inputId, class="nvd3-linechart", style=style)
    )
  }
  
  # To be called from server.R
  renderLineChart &lt;- function(expr, env=parent.frame(), quoted=FALSE) {
    # This piece of boilerplate converts the expression `expr` into a
    # function called `func`. It's needed for the RStudio IDE's built-in
    # debugger to work properly on the expression.
  
    installExprFunction(expr, "func", env, quoted)
  
    function() {
      dataframe &lt;- func()
  
  #     mapply(function(col, name) {
  # 
  #       values &lt;- mapply(function(val, i) {
  #         list(x = i, y = val)
  #       }, col, 1:nrow(dataframe), SIMPLIFY=FALSE, USE.NAMES=FALSE)
  # 
  #       list(key = name, values = values)
  #       
  #     }, dataframe, names(dataframe), SIMPLIFY=FALSE, USE.NAMES=FALSE)
      data = func();
     }
  }
  </code></pre>
  
  <p>I'm not passing any data from server to java script, just trying out to use c3.js as custom output to shiny. I have put in data in javascript file(linechart-binding.js). This might be something simple but I cannot figure it out.</p>