update examples
This commit is contained in:
parent
65b565ad67
commit
dd39d9dd99
|
@ -0,0 +1,244 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
library(apexcharter)
|
||||||
|
library(dplyr)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Bar ---------------------------------------------------------------------
|
||||||
|
|
||||||
|
data("mpg", package = "ggplot2")
|
||||||
|
|
||||||
|
count(mpg, class) %>%
|
||||||
|
mutate(pct=n/sum(n)) %>%
|
||||||
|
apex(mapping = aes(class, pct), type = "column") %>%
|
||||||
|
ax_colors("#617a89") %>%
|
||||||
|
ax_labs(
|
||||||
|
title = "Seminal ggplot2 column chart example with percents",
|
||||||
|
subtitle = "Example taken from {hrbrthemes} readme"
|
||||||
|
) %>%
|
||||||
|
ax_yaxis(
|
||||||
|
title = list(text = "Weight (tons)"),
|
||||||
|
labels = list(
|
||||||
|
formatter = JS("function(value) {return Math.round(value * 100) + '%';}")
|
||||||
|
),
|
||||||
|
tickAmount = 6
|
||||||
|
) %>%
|
||||||
|
ax_xaxis(
|
||||||
|
title = list(text = "Fuel efficiency (mpg)")
|
||||||
|
) %>%
|
||||||
|
ax_title(
|
||||||
|
style = list(fontSize = "22px")
|
||||||
|
) %>%
|
||||||
|
ax_subtitle(
|
||||||
|
style = list(fontSize = "16px", color = "#BDBDBD")
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Line --------------------------------------------------------------------
|
||||||
|
|
||||||
|
data("economics_long", package = "ggplot2")
|
||||||
|
|
||||||
|
economics_long %>%
|
||||||
|
filter(variable %in% c("psavert", "uempmed")) %>%
|
||||||
|
mutate(variable = case_when(
|
||||||
|
variable == "psavert" ~ "Personal savings rate",
|
||||||
|
variable == "uempmed" ~ "Median duration of unemployment (in weeks)"
|
||||||
|
)) %>%
|
||||||
|
apex(aes(date, value, group = variable), type = "line") %>%
|
||||||
|
ax_legend(position = "bottom") %>%
|
||||||
|
ax_stroke(width = 1) %>%
|
||||||
|
ax_yaxis(
|
||||||
|
min = 0, max = 30,
|
||||||
|
tickAmount = 6,
|
||||||
|
labels = list(
|
||||||
|
formatter = htmlwidgets::JS("function(val) {return val.toFixed(0);}")
|
||||||
|
),
|
||||||
|
title = list(text = "Personal savings rate")
|
||||||
|
) %>%
|
||||||
|
ax_xaxis(type = "datetime", labels = list(format = "d MMM yy")) %>%
|
||||||
|
ax_tooltip(x = list(format = "dd MMM yyyy")) %>%
|
||||||
|
ax_labs(
|
||||||
|
title = "US economic time series",
|
||||||
|
subtitle = "Data from {ggplot2}"
|
||||||
|
) %>%
|
||||||
|
ax_title(
|
||||||
|
style = list(fontSize = "22px")
|
||||||
|
) %>%
|
||||||
|
ax_subtitle(
|
||||||
|
style = list(fontSize = "16px", color = "#BDBDBD")
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Scatter -----------------------------------------------------------------
|
||||||
|
|
||||||
|
data("gapminder", package = "gapminder")
|
||||||
|
|
||||||
|
|
||||||
|
gapminder %>%
|
||||||
|
filter(year == 2007) %>%
|
||||||
|
mutate(
|
||||||
|
gdpPercap = log(gdpPercap),
|
||||||
|
pop = sqrt(pop/pi)/1500
|
||||||
|
) %>%
|
||||||
|
apex(mapping = aes(gdpPercap, lifeExp, z = pop, group = continent, label = country), type = "scatter") %>%
|
||||||
|
ax_chart(zoom = list(
|
||||||
|
enabled = TRUE, type = "xy"
|
||||||
|
)) %>%
|
||||||
|
ax_yaxis(decimalsInFloat = 0, axisBorder = list(show = TRUE), axisTicks = list(show = TRUE)) %>%
|
||||||
|
ax_xaxis(tickAmount = 8, tooltip = list(enabled = FALSE)) %>%
|
||||||
|
ax_grid(xaxis = list(lines = list(show = TRUE))) %>%
|
||||||
|
ax_legend(position = "right") %>%
|
||||||
|
ax_markers(hover = list(sizeOffset = 0, size = 25)) %>%
|
||||||
|
ax_tooltip(custom = JS(paste(
|
||||||
|
"function({ series, seriesIndex, dataPointIndex, w }) {",
|
||||||
|
"console.log(w); return (",
|
||||||
|
"'<div>' +",
|
||||||
|
|
||||||
|
"'<div class = \"apexcharts-tooltip-title\">' +",
|
||||||
|
"w.config.series[seriesIndex].data[dataPointIndex].label",
|
||||||
|
"+ '</div>' +",
|
||||||
|
"'<div style = \"padding: 5px;\">' +",
|
||||||
|
"'<div class = \"apexcharts-tooltip-y-group\">' +",
|
||||||
|
|
||||||
|
"'<span class = \"apexcharts-tooltip-text-label\">' +",
|
||||||
|
"'Population: ' +",
|
||||||
|
"'</span>' +",
|
||||||
|
"'<span class = \"apexcharts-tooltip-text-value\">' +",
|
||||||
|
"Math.round(Math.pow(w.config.series[seriesIndex].data[dataPointIndex].z * 1500, 2) * Math.PI).
|
||||||
|
toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\") +",
|
||||||
|
"'</span>' +",
|
||||||
|
|
||||||
|
"'</br>' +",
|
||||||
|
|
||||||
|
"'<span class = \"apexcharts-tooltip-text-label\">' +",
|
||||||
|
"'GDP per capita: ' +",
|
||||||
|
"'</span>' +",
|
||||||
|
"'<span class = \"apexcharts-tooltip-text-value\">' +",
|
||||||
|
"Math.round(Math.exp(w.config.series[seriesIndex].data[dataPointIndex].x)) +",
|
||||||
|
"'</span>' +",
|
||||||
|
|
||||||
|
"'</br>' +",
|
||||||
|
|
||||||
|
"'<span class = \"apexcharts-tooltip-text-label\">' +",
|
||||||
|
"'Life expectancy: ' +",
|
||||||
|
"'</span>' +",
|
||||||
|
"'<span class = \"apexcharts-tooltip-text-value\">' +",
|
||||||
|
"w.config.series[seriesIndex].data[dataPointIndex].y +",
|
||||||
|
"'</span>' +",
|
||||||
|
|
||||||
|
|
||||||
|
"'</div>' +",
|
||||||
|
"'</div>' +",
|
||||||
|
|
||||||
|
"'</div>'",
|
||||||
|
");",
|
||||||
|
"}", sep = "\n"
|
||||||
|
)))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Heatmap -----------------------------------------------------------------
|
||||||
|
|
||||||
|
data("vaccines", package = "highcharter")
|
||||||
|
|
||||||
|
apex(vaccines, aes(year, state, fill = count), type = "heatmap") %>%
|
||||||
|
ax_chart(animations = list(enabled = FALSE)) %>%
|
||||||
|
ax_dataLabels(enabled = FALSE) %>%
|
||||||
|
ax_legend(
|
||||||
|
formatter = JS(
|
||||||
|
"function(seriesName, opts) {
|
||||||
|
if (seriesName == 'Missing') return null; else return seriesName;
|
||||||
|
}"
|
||||||
|
)
|
||||||
|
) %>%
|
||||||
|
ax_stroke(width = 0) %>%
|
||||||
|
ax_plotOptions(
|
||||||
|
heatmap = heatmap_opts(
|
||||||
|
radius = 0,
|
||||||
|
enableShades = FALSE,
|
||||||
|
colorScale = list(
|
||||||
|
ranges = list(
|
||||||
|
list(
|
||||||
|
from = 0,
|
||||||
|
to = 0.001,
|
||||||
|
name = "Missing",
|
||||||
|
color = "#FFF"
|
||||||
|
),
|
||||||
|
list(
|
||||||
|
from = 0.001,
|
||||||
|
to = 4,
|
||||||
|
name = "low",
|
||||||
|
# color = "#000004"
|
||||||
|
color = "#FDE725"
|
||||||
|
),
|
||||||
|
list(
|
||||||
|
from = 4,
|
||||||
|
to = 70,
|
||||||
|
name = "mid-low",
|
||||||
|
# color = "#781C6D",
|
||||||
|
color = "#35B779"
|
||||||
|
),
|
||||||
|
list(
|
||||||
|
from = 70,
|
||||||
|
to = 290,
|
||||||
|
name = "mid-high",
|
||||||
|
# color = "#ED6925",
|
||||||
|
color = "#31688E"
|
||||||
|
),
|
||||||
|
list(
|
||||||
|
from = 290,
|
||||||
|
to = 3000,
|
||||||
|
name = "high",
|
||||||
|
# color = "#FCFFA4",
|
||||||
|
color = "#440154"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
) %>%
|
||||||
|
ax_annotations(
|
||||||
|
xaxis = list(
|
||||||
|
list(
|
||||||
|
x = 1963, x2 = 1963.1,
|
||||||
|
strokeDashArray = 0,
|
||||||
|
opacity = 1,
|
||||||
|
borderColor = "firebrick",
|
||||||
|
fillColor = "firebrick",
|
||||||
|
label = list(
|
||||||
|
borderColor = "firebrick",
|
||||||
|
|
||||||
|
style = list(color = "#FFF", background = "firebrick"),
|
||||||
|
text = "Vaccine Intoduced",
|
||||||
|
orientation = "horizontal",
|
||||||
|
position = "bottom",
|
||||||
|
offsetY = 10
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
) %>%
|
||||||
|
ax_labs(
|
||||||
|
title = "Infectious Diseases and Vaccines",
|
||||||
|
subtitle = "Data from {highcharter}"
|
||||||
|
) %>%
|
||||||
|
ax_title(
|
||||||
|
style = list(fontSize = "22px")
|
||||||
|
) %>%
|
||||||
|
ax_subtitle(
|
||||||
|
style = list(fontSize = "16px", color = "#BDBDBD")
|
||||||
|
)
|
||||||
|
|
|
@ -86,39 +86,58 @@ apexchart() %>%
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)) %>%
|
)) %>%
|
||||||
# ax_colors("#008FFB") %>%
|
ax_legend(
|
||||||
|
formatter = JS(
|
||||||
|
"function(seriesName, opts) {
|
||||||
|
if (seriesName == 'Missing') return null; else return seriesName;
|
||||||
|
}"
|
||||||
|
)
|
||||||
|
) %>%
|
||||||
|
# ax_colors("#008FFB") %>%
|
||||||
ax_plotOptions(
|
ax_plotOptions(
|
||||||
heatmap = heatmapOpts(
|
heatmap = heatmap_opts(
|
||||||
|
radius = 0,
|
||||||
|
enableShades = FALSE,
|
||||||
colorScale = list(
|
colorScale = list(
|
||||||
ranges = list(
|
ranges = list(
|
||||||
list(
|
list(
|
||||||
from = 0,
|
from = 0,
|
||||||
|
to = 0.001,
|
||||||
|
name = "Missing",
|
||||||
|
color = "#FFF"
|
||||||
|
),
|
||||||
|
list(
|
||||||
|
from = 0.001,
|
||||||
to = 4,
|
to = 4,
|
||||||
name = "low",
|
name = "low",
|
||||||
color = "#000004"
|
# color = "#000004"
|
||||||
|
color = "#FDE725"
|
||||||
),
|
),
|
||||||
list(
|
list(
|
||||||
from = 4,
|
from = 4,
|
||||||
to = 70,
|
to = 70,
|
||||||
name = "mid-low",
|
name = "mid-low",
|
||||||
color = "#781C6D"
|
# color = "#781C6D",
|
||||||
|
color = "#35B779"
|
||||||
),
|
),
|
||||||
list(
|
list(
|
||||||
from = 70,
|
from = 70,
|
||||||
to = 290,
|
to = 290,
|
||||||
name = "mid-high",
|
name = "mid-high",
|
||||||
color = "#ED6925"
|
# color = "#ED6925",
|
||||||
|
color = "#31688E"
|
||||||
),
|
),
|
||||||
list(
|
list(
|
||||||
from = 290,
|
from = 290,
|
||||||
to = 3000,
|
to = 3000,
|
||||||
name = "high",
|
name = "high",
|
||||||
color = "#FCFFA4"
|
# color = "#FCFFA4",
|
||||||
|
color = "#440154"
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
) %>%
|
) %>%
|
||||||
ax_xaxis(type = "category", categories = unique(vaccines$year))
|
ax_xaxis(type = "category", categories = unique(vaccines$year))
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue