Multiple series in drilldown

Question

I am creating a drilldown graph in R and want one of the layers to be a line graph with multiple groups.

I have figured out how to create the line graph, but i can't seem to be able to drilldown from a single to a multiple series. If i link two series on the same id (got that idea from what I read on javascript), only the second series will appear.

Any idea on how to proceed?

Edit * Updated code

df <- data_frame(
  name = c("Animals", "Fruits", "Cars"),
  y = c(5, 2, 4),
  drilldown = tolower(name)
)

df

dfan <- data_frame(
  name = c("Cats", "Dogs", "Cows", "Sheep", "Pigs"),
  value = c(4, 3, 1, 2, 1)
)

dfru <- data_frame(
  name = c("Apple", "Pear", "Orange"),
  value = c(4, 3, 1)
)

dfcar <- data_frame(
  name = c("Toyota", "Opel", "Volkswagen"),
  value = c(4, 2, 2)
)

dfcar2 <- data_frame(
  name = c("Toyota", "Opel", "Volkswagen"),
  value = c(6, 7, 2)
)


car_series = merge(dfcar, dfcar2, by = "name")

hc <- highchart() %>%
  hc_chart(type = "column",
           events = list(
             click = JS(fn))) %>%
  hc_title(text = "Basic drilldown") %>%
  hc_xAxis(type = "category") %>%
  hc_legend(enabled = FALSE) %>%
  hc_plotOptions(
    series = list(
      boderWidth = 0,
      dataLabels = list(enabled = TRUE)
    )
  ) %>%
  hc_add_series(
    data = df,
    name = "Things",
    colorByPoint = TRUE
  )

hc <- hc %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "animals",
        data = list_parse2(dfan)
      ),
      list(
        id = "fruits",
        data = list_parse2(dfru)
      ),
      list(
        id = "cars",
        type = "line",
        data = list_parse2(car_series)
      )
    )
  )

hc


fn <-"function () {
var chart = Highcharts.charts[0];
var drilldown = this.drilldown;
var len = chart.series.length;
var name = null, 
categories = drilldown.categories, 
data = drilldown, 
type = drilldown.type;
chart.xAxis[0].setCategories(categories);
for(var i = 0; i < len; i++){
chart.series[0].remove();
}

if(data.series){
for( i = 0; i < data.series.length; i ++ ){
chart.addSeries({
name: data.series[i].name,
data: data.series[i].data,
type: data.series[i].type,
});
}
} else {
chart.addSeries({
name: name,
data: data,
type: type,

});
}
} 
"

When I click on each of the three rectangles in the first chart I get two boxplots and one line-graph (from the green cars rectangle). What is not correct about that? — IRTFM, Sep 10 '18 at 18:18
Hi, I want the line graph to have two lines, not one - I would like it to be a multiple series. — gulhamster, Sep 10 '18 at 21:32
I essentially want to do this in R: http://jsfiddle.net/49q18Lp3/ — gulhamster, Sep 11 '18 at 02:36

score 0 · Accepted Answer · answered Sep 12 '18 at 09:42

0

Actually, you just need to minify the code from example and paste it to the JS() R function on chart.events.drilldown event handler. Here is the code:

drilldown = JS("function(e) {if(!e.seriesOptions){var chart=this,drilldowns={'Animals':{name:'Animals',data:[['Cows',2],['Sheep',3]]},'Animals2':{name:'Animals',color:'#f00',data:[['Cows',22],['Sheep',13]]},'Fruits':{name:'Fruits',data:[['Apples',5],['Oranges',7],['Bananas',2]]},'Fruits2':{name:'Fruits',color:'red',data:[['Apples',15],['Oranges',17],['Bananas',22]]},'Cars':{name:'Cars',data:[['Toyota',1],['Volkswagen',2],['Opel',5]]},'Cars2':{name:'Cars',color:'#bada55',data:[['Toyota',11],['Volkswagen',21],['Opel',15]]}},series=[drilldowns[e.point.name],drilldowns[e.point.name+'2']];chart.addSingleSeriesAsDrilldown(e.point,series[0]);chart.addSingleSeriesAsDrilldown(e.point,series[1]);chart.applyDrilldown()}}")

I tested in on my R Studio enviroment, and it works well.

Kind regards!

answered Sep 12 '18 at 09:42

daniel_s

3,635
1
8
24

Hi daniel, Thank you kindly for your reply, really appreciate it. I'm trying to do this for a larger dataset as well, and cannot define my df's in the function. Is there a way of writing a java script function to only deal with single / multi series. To feed either into the R highcharter 'main' graph or into the hc_drilldown argument? Thank you kindly! – gulhamster Sep 12 '18 at 12:01
Hi daniel, Thank you kindly for your reply, really appreciate it. I'm trying to do this for a larger dataset as well, and cannot define my df's in the function. Is there a way of writing a java script function to only deal with single / multi series. To feed either into the R highcharter 'main' graph or into the hc_drilldown argument? Thank you kindly! – gulhamster Sep 12 '18 at 12:05
Please try to implement it in the example you provided, then copy entire body of the `drilldown()` function (of course if it works in JSFiddle as you expecting), find some JS code online minifier, and convert the code. That's all. – daniel_s Sep 12 '18 at 12:09
Daniel, thank you so much for your help. One last question, I'm trying to use the data series name in the JS function (i.e. dfan, dfcar) instead of creating the data series in the JS function, just putting data:dfan does not work. kind regards – gulhamster Sep 12 '18 at 22:00
It depends on how you tried to do it. I suspect It's not working because it's just a string, so if you're trying to concat that string with some R syntax, it doesn't give you expected effect. The way out of the problem is by using `paste()` R method, which takes n arguments, and concat it to one string. For example, if you would define the `names` array with names, you can just access it like that: `drilldown = JS(paste("function(e) {if(!e.seriesOptions){var chart=this,drilldowns={", names[1][1], ":{name:", names[1][1] ... [...]` etc. – daniel_s Sep 13 '18 at 11:57
Hi Daniel, I have tried to implement this solution without any luck. I am trying to implement the following logic in my R highcharts, if(data.series){ for( i = 0; i < data.series.length; i ++ ){ this.addSeries({ name: data.series[i].name, data: data.series[i].data, type: data.series[i].type, }); } } else { this.addSeries({ name: name, data: data, type: type, });} }' but I have not been able to make it work, do you have any suggestions? Thank you kindly. – gulhamster Sep 25 '18 at 06:35
What kind of problem do you exactly have? Could you try to inspect your chart and let me know if you have any errors in browsers console? – daniel_s Sep 25 '18 at 07:31
I've updated my chart with the following: hc_chart(type = "column", events = list( click = JS(fn))) where fn equals the if statement i posted in above comments. But When i try and run the final graph with the below code, only the first series of the line graph shows. – gulhamster Sep 25 '18 at 22:47
series = merge(dfcar, dfcar2, by = "name") hc %>% hc_drilldown( allowPointDrilldown = TRUE, series = list( list( id = "animals", data = list_parse2(dfan) ), list( id = "cars", type = "line", data = list_parse2(series) ) ) ) – gulhamster Sep 25 '18 at 22:51
Could you provide me with whole code of your R project? – daniel_s Sep 26 '18 at 10:59
Hi Daniel, I have updated the original post with the code. Your original answer does work, and thank you for that. However, would like to use the format in the original post and use a java function in the click event (or drilldown) that deals with if the series is multiple or single. I would like to do this because it easier when i then go on to use larger data sets and more layers. Thank you kindly for your help, highly appreciated. – gulhamster Sep 26 '18 at 22:18
You JS code has many syntax errors, and will not work at all because of that. I highly recommend you to see on this topic: https://stackoverflow.com/questions/24563824/highcharts-drill-down-to-multiple-series and try to refactor the code to your needs in R. – daniel_s Sep 27 '18 at 09:10

Multiple series in drilldown

1 Answers1

Linked