CODEWITHSUNDEEP
rhighchartsdrilldown
gulhamster
gulhamster

Reputation: 21

Multiple series in drilldown

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,

});
}
} 
"

Upvotes: 1

Views: 446

Answers (2)

tibblah
tibblah

Reputation: 25

The JS syntax provided by @daniel_s is the solution to this problem. However, this syntax does not allow for dynamic data inputs into the drilldown series, which OP indicates was required, and which I imagine other R users would also require.

For this reason, I provide the following complete code block, which generates a multi series drilldown using different series types, as seen below.

Multiseries drilldown in highcharter

df <- data_frame(
  name = c("Animals", "Fruits", "Cars"),
  y = c(5, 2, 4),
  drilldown = c('animals','','')
)
dfan1 <- data_frame(
  name = c("Cats", "Dogs", "Cows", "Sheep", "Pigs"),
  value = c(4, 3, 1, 2, 1)
)
dfan2 <- data_frame(
  name = c("Cats", "Dogs", "Cows", "Sheep", "Pigs"),
  low = c(3.5,2.5,.5,1.5,.5),
  high= c(4.5,3.5,1.5,2.5,1.5)
)
list1 <- toString(
  lapply(
    1:nrow(dfan1), function(n) {
      paste0("['",dfan1[n,'name'],"',",dfan1[n,'value'],"]")
    }
  )
)
list2 <- toString(
  lapply(
    1:nrow(dfan2), function(n) {
      paste0("['",dfan2[n,'name'],"',",dfan2[n,'low'],",",dfan2[n,'high'],"]")
    }
  )
)
hc <- highchart() %>%
  hc_title(text = "Basic multi series 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_chart(events = list(
    drilldown = JS(paste0(
      "function(e) {
        if(!e.seriesOptions){
        var chart=this,
        drilldowns={
          'Animals':{
            name:'Animals',
            data:[",list1,"],
            type:'bar'
          },
          'Animals2':{
            name:'Animals',color:'#f00',
            data:[",list2,"],
            type:'errorbar'
          }
      },

      series=[drilldowns[e.point.name],drilldowns[e.point.name+'2']];
      chart.addSingleSeriesAsDrilldown(e.point,series[0]);
      chart.addSingleSeriesAsDrilldown(e.point,series[1]);
      chart.applyDrilldown()
      }}"
    )
    )
  ))
hc

Upvotes: 0

daniel_s
daniel_s

Reputation: 3732

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!

Upvotes: 0

Related Questions