1

I am trying to show a table(or probably another plot) in a separate div element when one of the bars on the HighCharts bar plot is clicked. I am using rCharts from Shiny package to create a HighCharts plot.

In my experimentation till now, I came across two possible psths.

Path 1

I tried to make use of click function in the HighCharts bar/column plot API. I tried doing this.

observe({  
    output$plot <- renderChart2({
                       a <- hPlot(x="id",y="sequence",data=myData,type="column")
                       a$tooltip( animation = 'true', formatter = "#! function() {return '<b>' + 'Frequency of tag_id ' + this.x + '</b>' + ' is ' + this.y;} !#")
                       a$plotOptions(series = list(color = '#388E8E'),column = list(dataLabels = list(enabled = T, rotation = -90, align = 'right', color = '#FFFFFF', x = 4, y = 10),cursor = 'pointer', point=list(events = list(click = func))))
                 return(a)
        }) session$sendCustomMessage(type="data", rg1) )}

and for function func (which is supposed to invoke when a bar is clicked)

func <- "#! function() {
        Shiny.addCustomMessageHandler('data', function(rg1) {
                var data1 = rg1.series            
                $('.container_subcat').highcharts({
                        chart: {
                                type: 'column',
                        }
                        xAxis: { categories:(data1) },
                title: {
                                text: 'Monthly Average Rainfall'
                },
                series: [{  data :(data1)
                        }]
                }); 
})} !#"

I am sure that is not the way to bind data, but I added a lot of code to the above code after looking into several online sources. None of my attempts make me smile. Also, I think if I should proceed in this way, I need to change the data into Java script readable format from R dataframe (rg1 above is a dataframe), but no clue when and where should the conversion be done.

Path 2

I used session$sendCustomMessage() and Shiny.addCustomMessageHandler() functions.

server.R -> app.js

In server.R: observe({ session$sendCustomMessage(type="newdata", data })

In app.js: Shiny.addCustomMessageHandler("newdata", function(data1) { ... });

chart.js -> server.R

In app.js: Shiny.onInputChange("select", this.data.ele);

In server.R: current <- input$select

The above mechanism works fine with all the buttons or other UI elements we have in HTML. But, I am trying to achieve the same mechanism when a bar on the barplot is clicked. I have no clue how to extract each bar from the barplot and use it like we used it in current <- input$select. So, it's basically establishing the communication between the HighCharts UI element(which inturn is shiny/rCharts element) and the server to get the data when an element is clicked.

I came across Shiny input and output bindings and had hard time understanding them and not sure whether they are useful in my particular situation. Can someone walk me through a method/solution which can solve my problem.

Shiva
  • 789
  • 6
  • 15

1 Answers1

0

In case any one is looking for answer, head over to this question, the method using paste works like charm and passes data to the javascript function.

Community
  • 1
  • 1
Shiva
  • 789
  • 6
  • 15