javascript - How to make 3 levels drilldown plot in R highcharter (possible other packages) - Stack Overflow

admin 管理员组

文章数量: 1086019

today i started my adventure with highcharter package. I'm interested in drilldown plots.

(fast check what i want to create without r)

.7.2/highslide-software/highcharts/tree/master/samples/highcharts/drilldown/basic/

R code with working example of drilldown plot with 2 levels.

library("dplyr")
library("purrr")
library("highcharter")

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


ds <- list.parse3(df)
names(ds) <- NULL
str(ds)
hc <- highchart() %>%
  hc_chart(type = "column") %>%
  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(
    name = "Things",
    colorByPoint = TRUE,
    data = ds
  )


dfan <- data_frame(
  name = c("Cats", "Dogs", "Cows", "Sheep", "Pigs"),
  value = c(4, 3, 1, 2, 1)
)
dffru <- data_frame(
  name = c("Apple", "Organes"),
  value = c(4, 2)
)
dfcar <- data_frame(
  name = c("Toyota", "Opel", "Volkswage"),
  value = c(4, 2, 2)
)
second_el_to_numeric <- function(ls){
  map(ls, function(x){
    x[[2]] <- as.numeric(x[[2]])
    x
  })
}
dsan <- second_el_to_numeric(list.parse2(dfan))
dsfru <- second_el_to_numeric(list.parse2(dffru))
dscar <- second_el_to_numeric(list.parse2(dfcar))
hc <- hc %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "animals",
        data = dsan
      ),
      list(
        id = "fruits",
        data = dsfru
      ),
      list(
        id = "cars",

        data = dscar
      )
    )
  )
hc

My aim is to create drilldown plots with more than 2 levels. I know this is possible (On javascrip Highchart page there is 3 level example but written in js).

library("dplyr")
library("purrr")
library("highcharter")


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


ds <- list.parse3(df)
names(ds) <- NULL
str(ds)


hc <- highchart() %>%
  hc_chart(type = "column") %>%
  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(
    name = "Things",
    colorByPoint = TRUE,
    data = ds
  )


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

)
dffru <- data_frame(
  name = c("Apple", "Oranges"),
  value = c(4, 2)
)
dfcar <- data_frame(
  name = c("Toyota", "Opel", "Volkswage"),
  value = c(4, 2, 2),
  drilldown = tolower(name)
)


dfOpel <- data_frame(
  name = c("Insygnia", "Corsa"),
  value = c(1,2)
)


second_el_to_numeric <- function(ls){
  map(ls, function(x){
    x[[2]] <- as.numeric(x[[2]])
    x
  })
}
dsan <- second_el_to_numeric(list.parse2(dfan))
dsfru <- second_el_to_numeric(list.parse2(dffru))
dscar <- second_el_to_numeric(list.parse3(dfcar))
names(dscar) <- NULL

dsOpel <- second_el_to_numeric(list.parse3(dfOpel))
names(dsOpel)

hc <- hc %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "animals",
        data = dsan
      ),
      list(
        id = "fruits",
        data = dsfru
      ),
      list(
        id = "cars",
        data = dscar
      )
    ),
#My idea of change.
    series2 = list(
      list(id = "toyota", data = dsOpel),
      list(id = "opel", data = dsOpel),
      list(id = "volkswage", data = dsOpel)
    )
  )


hc

In highcharter reference manual there is only example with 2 levels (.pdf)

today i started my adventure with highcharter package. I'm interested in drilldown plots.

(fast check what i want to create without r)

http://jsfiddle/gh/get/jquery/1.7.2/highslide-software/highcharts./tree/master/samples/highcharts/drilldown/basic/

R code with working example of drilldown plot with 2 levels.

library("dplyr")
library("purrr")
library("highcharter")

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


ds <- list.parse3(df)
names(ds) <- NULL
str(ds)
hc <- highchart() %>%
  hc_chart(type = "column") %>%
  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(
    name = "Things",
    colorByPoint = TRUE,
    data = ds
  )


dfan <- data_frame(
  name = c("Cats", "Dogs", "Cows", "Sheep", "Pigs"),
  value = c(4, 3, 1, 2, 1)
)
dffru <- data_frame(
  name = c("Apple", "Organes"),
  value = c(4, 2)
)
dfcar <- data_frame(
  name = c("Toyota", "Opel", "Volkswage"),
  value = c(4, 2, 2)
)
second_el_to_numeric <- function(ls){
  map(ls, function(x){
    x[[2]] <- as.numeric(x[[2]])
    x
  })
}
dsan <- second_el_to_numeric(list.parse2(dfan))
dsfru <- second_el_to_numeric(list.parse2(dffru))
dscar <- second_el_to_numeric(list.parse2(dfcar))
hc <- hc %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "animals",
        data = dsan
      ),
      list(
        id = "fruits",
        data = dsfru
      ),
      list(
        id = "cars",

        data = dscar
      )
    )
  )
hc

My aim is to create drilldown plots with more than 2 levels. I know this is possible (On javascrip Highchart page there is 3 level example but written in js).

library("dplyr")
library("purrr")
library("highcharter")


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


ds <- list.parse3(df)
names(ds) <- NULL
str(ds)


hc <- highchart() %>%
  hc_chart(type = "column") %>%
  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(
    name = "Things",
    colorByPoint = TRUE,
    data = ds
  )


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

)
dffru <- data_frame(
  name = c("Apple", "Oranges"),
  value = c(4, 2)
)
dfcar <- data_frame(
  name = c("Toyota", "Opel", "Volkswage"),
  value = c(4, 2, 2),
  drilldown = tolower(name)
)


dfOpel <- data_frame(
  name = c("Insygnia", "Corsa"),
  value = c(1,2)
)


second_el_to_numeric <- function(ls){
  map(ls, function(x){
    x[[2]] <- as.numeric(x[[2]])
    x
  })
}
dsan <- second_el_to_numeric(list.parse2(dfan))
dsfru <- second_el_to_numeric(list.parse2(dffru))
dscar <- second_el_to_numeric(list.parse3(dfcar))
names(dscar) <- NULL

dsOpel <- second_el_to_numeric(list.parse3(dfOpel))
names(dsOpel)

hc <- hc %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "animals",
        data = dsan
      ),
      list(
        id = "fruits",
        data = dsfru
      ),
      list(
        id = "cars",
        data = dscar
      )
    ),
#My idea of change.
    series2 = list(
      list(id = "toyota", data = dsOpel),
      list(id = "opel", data = dsOpel),
      list(id = "volkswage", data = dsOpel)
    )
  )


hc

In highcharter reference manual there is only example with 2 levels (https://cran.r-project/web/packages/highcharter/highcharter.pdf)

• javascript
• r
• highcharts
• drilldown

Share Improve this question Follow asked Jul 4, 2016 at 22:13 M. SiwikM. Siwik 49788 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

If you want a multilevel drilldown you have to set id of the drilldown to the data point just like in the pure js highcharts.

Example: http://jsfiddle/6LXVQ/2/ and the most important part:

drilldown: {
        series: [{
            id: 'animals',
            name: 'Animals',
            data: [{
                name: 'Cats',
                y: 4,
                drilldown: 'cats'
            }, ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {

            id: 'cats',
            data: [1, 2, 3]
        }]
    }

You can see here that your data points are not only numbers but objects which containts link to the drilldown series.

An example using Highcharter - simplified but you should get the idea:

hc <- highchart() %>%
    hc_chart(type="column") %>%
    hc_xAxis(type="category") %>%
    hc_add_series(
        name = "Things",
        data = list(
            list(
                name = "Animals",
                y = 10,
                drilldown = "animals"
            )
        )
    ) %>%

    hc_drilldown(
        series = list(
            list(
                name = "Animals",
                id = "animals",
                data = list(
                    list(
                        name = "Cats",
                        y = 2,
                        drilldown = "cats"
                    )
                )
             ),
             list(
                 name = "Cats",
                 id = "cats",
                 data = list(list(name = "white cats", y = 2), list(name = "black cats", y = 3), list(name = "red cats",y = 4))
             )
         )
     )
hc

The important aspect about these drilldowns is the key. The key for the drilldown is [name, value, drilldown] or [name, y, drilldown] (since they're mostly column drilldowns.

df = data_frame(name = dataframe$NAMES,
               y = dataframe$VALUES,
               drilldown = tolower(name))

All data referenced should have the same layout (barring the last one which does not open into a new set of data). And this layout should be of the pattern of the key--names, values, and drilldown id's. Drilldown id's are used as reference key's for the next step of drill downs.

There's the initial data which forms the first set of columns and has ID's for the next set. The next set is the second layer and has ID's for the third set in its data. The third set forms the third layer.

Example: In a data set for pets, birds and amphibians: Pets next layer is Cats, Dogs, Hamsters, Fish. There is also an ID attached with every name in Pets. Cats will pull in tabby, brown, black, tom through that ID. Dogs will pull in Bulldog, pug, lab corgi from its ID's and the same with hamsters.

#LAYER ONE OF DRILLDOWN
animalsdf = data_frame(name = animals$NAMES,
               y = animals$VALUES,
               drilldown = tolower(paste(name,'id')))

#Example of drilldown ID's here: 'pets id', 'birds id', 'amphibians id'

animalsds = list_parse(animalsdf)

names(animalsds) = NULL

#LAYER TWO OF DRILLDOWN
petsdf = data_frame(name = typeofpets$NAMES,
               y = typeofpets$VALUES,
               drilldown = tolower(paste(name,'id')))

birdsdf = data_frame(name = typeofbirds$NAMES,
               y = typeofbirds$VALUES,
               drilldown = tolower(paste(name,'id')))

amphibiansdf = data_frame(name = typeofamphibians$NAMES,
               y = typeofamphibians$VALUES,
               drilldown = tolower(paste(name,'id')))

petsds <- second_el_to_numeric(list_parse2(petsdf))
birdsds <- second_el_to_numeric(list_parse2(birdsdf))
amphibiansds <- second_el_to_numeric(list_parse2(amphibiansdf))

#LAYER THREE OF DRILLDOWN

#FOR PETS

catsdf = data_frame(name = typeofcats$NAMES,
               y = typeofcats$VALUES,
               drilldown = tolower(paste(name,'id')))

dogsdf= data_frame(name = typeofdogs$NAMES,
               y = typeofdogs$VALUES,
               drilldown = tolower(paste(name,'id')))

hamstersdf = data_frame(name = typeofhamsters$NAMES,
               y = typeofhamsters$VALUES,
               drilldown = tolower(paste(name,'id')))


catsds <- second_el_to_numeric(list_parse2(catsdf))
dogsds <- second_el_to_numeric(list_parse2(dogsdf))
hamstersds <- second_el_to_numeric(list_parse2(hamstersdf))

#FOR BIRDS
flightlessbirdsdf = data_frame(name = flightlessbirds$NAMES,
               y = flightlessbirds$VALUES,
               drilldown = tolower(paste(name,'id')))

flyingbirdsdf = data_frame(name = flyingbirds$NAMES,
               y = flyingbirds$VALUES,
               drilldown = tolower(paste(name,'id')))

flightlessbirdsds <- second_el_to_numeric(list_parse2(flightlessbirdsdf))
flyingbirdsds <- second_el_to_numeric(list_parse2(flyingbirdsdf))

#FOR AMPHIBIANS

largeamphibiansdf = data_frame(name = largeamphibians$NAMES,
               y = flyingbirds$VALUES,
               drilldown = tolower(paste(name,'id')))

smallamphibiansdf = data_frame(name = smallamphibians$NAMES,
               y = smallamphibians$VALUES,
               drilldown = tolower(paste(name,'id')))

largeamphibiansds <- second_el_to_numeric(list_parse2(largeamphibiansdf))
smallamphibiansds <- second_el_to_numeric(list_parse2(smallamphibiansdf))

#HIGHCHART STARTS

hc <- highchart() %>%
hc_chart(type = "column") %>% 
hc_title(text = "Drilldown") %>%
hc_subtitle(text = "XYZ") %>%
hc_xAxis(type = "category") %>%
hc_legend(enabled = FALSE) %>%
hc_plotOptions(
  series = list(
    boderWidth = 0,
    dataLabels = list(enabled = TRUE)
  )
) %>%
hc_add_series(
  name = "Category",
  colorByPoint = TRUE,
  data = animalsds
)  %>%
hc_drilldown(
  allowPointDrilldown = TRUE,
  series = list(
    list(
      id = "pets id",
      data = petsds,
      keys = list('name','y','drilldown')
    ),
    list(
      id = "birds id",
      data = birdsds,
      keys = list('name','y','drilldown')
    ),
    list(
      id = "amphibians id",
      data = amphibiansds,
      keys = list('name','y','drilldown')
    ),
    list(
      id = "cats id",
      data = catsds,
    ),
    list(
      id = "dogs id",
      data = dogsds
    ),
    list(
      id = "hamsters id",
      data = hamstersds
    ),
    list(
      id = "flightless birds id",
      data = flightlessbirdsds
    ),
    list(
      id = "flying birds id",
      data = flyingbirdsid
    ),
    list(
      id = "large amphibians id",
      data = largeamphibiansds
    ),
    list(
      id = "small amphibians id",
      data = smallamphibiansds
    )
)) %>% hc_tooltip(valueDecimals = 2)

本文标签： javascriptHow to make 3 levels drilldown plot in R highcharter (possible other packages)Stack Overflow