javascript - Custom Output In Shiny -

i trying connect heatmap , dendrogram rendered in r, depending on user input via shiny, inchlib javascript library. in order update heatmap when input changes need write custom output binding. i've studied tutorial , bunch of examples found on web somehow i'm not getting output.

ui.r

library(shiny) soucre("heatmapbinding.r") shinyui(    fluidpage(    ...        mainpanel(                       heatmapoutput("heatmap")        )            ) ) 

server.r

source("inchlibutils.r") shinyserver(function(input, output, session) { output$heatmap <- reactive({      if(input$get == 0)         return()      isolate({         data <- retrievedata()         hc.row <- hclust(dist(data), input$cluster.method)         hc.col <- hclust(dist(t(data)), input$cluster.method)         map <- inchlib(hc.row, hc.col, data)})   # nested list, json ready         # how wrote data file in correct json format         # javascript library pick later. of course not dynamic         # writelines(tojson(map), "heatmap.json")     }) }) 

heatmapbinding.r

library(shiny) heatmapoutput <- function(inputid, width="1000px", height="1200px") {     style <- sprintf("width: %s; height: %s;", validatecssunit(width), validatecssunit(height))      taglist(         singleton(tags$head(                         tags$script(src="scripts/jquery-2.0.3.min.js"),                         tags$script(src="scripts/kinetic-v5.0.0.min.js"),                         tags$script(src="scripts/inchlib-1.0.0.js"),                         tags$script(src="scripts/heatmap.js")                 )),         div(id=inputid, class="inchlib-heatmap", style=style,                 tag("div", list())         )     ) } 

heatmap.js

(function() {     var binding = new shiny.outputbinding();      binding.find = function(scope) {         return $(scope).find(".inchlib-heatmap");     };      binding.rendervalue = function(el, data) {        var $el = $(el);         // original javascript worked stand alone        $(document).ready(function() { //run when whole page loaded            window.inchlib = new inchlib({ //instantiate inchlib                target: "inchlib", //id of target html element                metadata: false, //turn off metadata                 max_height: 1200, //set maximum height of visualization in pixels                width: 1000, //set width of visualization in pixels                heatmap_colors: "greens", //set color scale clustered data                metadata_colors: "reds", //set color scale metadata            });            // originaly file loaded, want load data(frame)            // inchlib.read_data_from_file(heatmap.json)  //read input json file            if(data != null){                inchlib.read_data(data);                  //read input json data?                inchlib.draw();                           //draw cluster heatmap            }        };      };      //tell shiny our new output binding    shiny.outputbindings.register(binding, "shinyjsexamples.inchlib-heatmap");  })(); 

if i'm not mistaken don't need renderheatmap function in server.r defined because data json ready?

when i'm debugging javascript heatmap.js rendervalue function gets called right after page loaded, when there's no data available. , that's time function gets called. know r side of things work until output$heatmap (if write json file, file looks fine). , if debug javascript see right data getting loaded in.

i don't feel thoroughly understand custom output binding mechanism. big if point me in right direction.

thanks in advance

found working solution:

first of if data json ready mentioned above, indeed have no need renderheatmap sort of function in heatmapbinding.r.

the problem above more of html issue:

in heatmap.js initialize our inchlib heatmap follows:

   window.inchlib = new inchlib({ //instantiate inchlib                target: "inchlib", //id of target html element                metadata: false, //turn off metadata                 max_height: 1200, //set maximum height of visualization in pixels                width: 1000, //set width of visualization in pixels                heatmap_colors: "greens", //set color scale clustered data                metadata_colors: "reds", //set color scale metadata            }); 

the target element embodies id of html element wil displayed in. in heatmapoutput in heatmapbinding.r inputid argument of "heatmap" because server.r catches output$heatmap variable, id gets used in ui.r code: heatmapoutput("heatmap").

just changing target element in heatmap.js solves issue.

but of workaround , not general solution. should make renderheatmap sort of function in heatmapbinding.r pass along inputid (how able access id within function?) , use when initializing inchlib heatmap or rather issue should solve in javascript of inchlib?