on.click event + colour question about sunburstr

[timelyportfolio]

colour

In terms of colour, see #25 and let me know if you need any more help. I hope to get this better documented soon.

event handling

Also poorly documented, but I dispatch mouseover/mouseout and click with an array representing the path, so these can be accessed. I will include a quick example below. For a shiny example, see ?sunburstR::add_shiny.

library(sunburstR)

# read in sample visit-sequences.csv data provided in source
#   https://gist.github.com/kerryrodden/7090426#file-visit-sequences-csv
sequences <- read.csv(
  system.file("examples/visit-sequences.csv",package="sunburstR")
  ,header = FALSE
  ,stringsAsFactors = FALSE
)

sb <- sunburst(sequences)

sb$x$tasks <- list(
  htmlwidgets::JS(
"
function(){
  //debugger;

  this.instance.chart.on('click',function(d){
    alert(d);
  });
}
"    
  )
)

sb

[timelyportfolio]

@NovasTaylor this http://timelyportfolio.github.io/sunburstR/example_baseball.html contains another example of event handling

[tyjselina]

Hello, @timelyportfolio , in the example you gave above,
this.instance.chart.on('click',function(d){
alert(d);
})
If we want to direct to a url, would open.window statement work?

Another question is: for the above link, http://timelyportfolio.github.io/sunburstR/example_baseball.html,
I copied the code under title "Use sunburst event" to Rstudio, which doesn't give me the link for the hovered path. Do you have any idea about it? I appreciate your help.

Selina

[timelyportfolio]

@tyjselina,

window.open on.click

Yes, that should work fine, but you will need to generate the url unless it has been added in the data of the node. You could use a reference table or build it up as in lines. I know I have another non-sunburst example somewhere, but I could not find it. If you have trouble, post some code and I'll try to help.

use sunburst event error

I am not sure, since this still works for me. If you are not in rmarkdown, you will need to wrap the tagList with browsable or pipe tagList() %>% browsable().

browsable(
	tagList(
	  sb,
	  tags$div(id="games", style="margin-top:100px"),
	  tags$script(HTML(
	    sprintf(
	      '
	      var action = %s;
	      
	      function mouseovered(d){
	      var games = action.filter(function(evt){
	      return evt.event === d.join("-");
	      });
	      
	      var div = document.getElementById("games");
	      div.innerHTML = games.map(function(game){
	      return [
	      "<a href=\'http://gd2.mlb.com/components/game/mlb/year_2016/month_08/day_25/",
	      game.gameday_link,
	      "\'>",
	      game.gameday_link,
	      "</a><br/>"
	      ].join("");
	      }).join("\\n");
	      }
	      ',
        jsonlite::toJSON(action, auto_unbox=TRUE, dataframe="row")
      )
    ))
  )
)

[tyjselina]

Thanks, @timelyportfolio
For the example you showed me above, instead of Mouseover event, I want to have Click event on Sunburst chart to redirect me to a URL, I am trying to code as following:

sb$x$tasks <- list(htmlwidgets::JS(
'
function(){
this.instance.chart.on("click",clicked);

function clicked(d){
var games = action.filter(function(evt){
return evt.event === d.join("-");
});
window.open(games.map(function(){
return [
"<a href='http://gd2.mlb.com/components/game/mlb/year_2016/month_08/day_25/",
"'>",
"</a><br/>"
]
})
);
}
}
'
))
But this doesn't give me the click, so could you help me take a look?
Many thanks to your help!

Selina

[timelyportfolio]

I think this is "solved". Please reopen if not. Thanks for the issue.