From 1d7bd46827172a04ffd6ea4ddb89f77c75af86ea Mon Sep 17 00:00:00 2001 From: pvictor Date: Mon, 18 Feb 2019 20:29:51 +0100 Subject: [PATCH] first vignette --- .gitignore | 1 + DESCRIPTION | 13 +- R/apexcharter.R | 6 +- vignettes/.gitignore | 2 + vignettes/starting-with-apexcharts.Rmd | 205 +++++++++++++++++++++++++ 5 files changed, 221 insertions(+), 6 deletions(-) create mode 100644 vignettes/.gitignore create mode 100644 vignettes/starting-with-apexcharts.Rmd diff --git a/.gitignore b/.gitignore index df49c56..c1d434b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +inst/doc .Rproj.user .Rhistory .RData diff --git a/DESCRIPTION b/DESCRIPTION index 5625726..610631b 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,5 +1,5 @@ Package: apexcharter -Version: 0.0.2.910 +Version: 0.0.3.900 Title: Create Interactive Chart with the JavaScript 'ApexCharts' Library Description: Provides an 'htmlwidgets' interface to 'apexcharts.js'. Authors@R: c( @@ -15,9 +15,14 @@ Imports: htmlwidgets, magrittr, rlang, - ggplot2 + ggplot2, + scales +Suggests: + testthat, + dplyr, + knitr, + rmarkdown RoxygenNote: 6.1.1 URL: https://github.com/dreamRs/apexcharter BugReports: https://github.com/dreamRs/apexcharter/issues -Suggests: - testthat +VignetteBuilder: knitr diff --git a/R/apexcharter.R b/R/apexcharter.R index b1beab9..adbca1d 100644 --- a/R/apexcharter.R +++ b/R/apexcharter.R @@ -41,11 +41,13 @@ apexchart <- function(ax_opts = list(), auto_update = TRUE, width = NULL, height package = 'apexcharter', elementId = elementId, sizingPolicy = htmlwidgets::sizingPolicy( - defaultWidth = "90%", - defaultHeight = "90%", + defaultWidth = "100%", + defaultHeight = "100%", viewer.defaultHeight = "100%", viewer.defaultWidth = "100%", knitr.figure = FALSE, + knitr.defaultWidth = "100%", + knitr.defaultHeight = "350px", browser.fill = TRUE, viewer.suppress = FALSE, browser.external = TRUE, diff --git a/vignettes/.gitignore b/vignettes/.gitignore new file mode 100644 index 0000000..097b241 --- /dev/null +++ b/vignettes/.gitignore @@ -0,0 +1,2 @@ +*.html +*.R diff --git a/vignettes/starting-with-apexcharts.Rmd b/vignettes/starting-with-apexcharts.Rmd new file mode 100644 index 0000000..4df42a7 --- /dev/null +++ b/vignettes/starting-with-apexcharts.Rmd @@ -0,0 +1,205 @@ +--- +title: "Starting with ApexCharts" +author: "Victor Perrier" +date: "`r Sys.Date()`" +output: rmarkdown::html_vignette +vignette: > + %\VignetteIndexEntry{Starting with ApexCharts} + %\VignetteEngine{knitr::rmarkdown} + %\VignetteEncoding{UTF-8} +--- + +```{r setup, include = FALSE} +knitr::opts_chunk$set( + collapse = TRUE, + comment = "#>" +) +``` + +The objective of this vignette is to show how to quickly build data visualizations with the ApexCharts JavaScript library, as well as to give an overview of the different graphics available. + +Data used are from `ggplot2` package, data manipulation will be done with the `dplyr` package. + + +```{r} +library(ggplot2) +library(dplyr) +library(apexcharter) +``` + + +## Bar charts + +Simple bar charts can be created with: + +```{r} +data("mpg") +n_manufac <- count(mpg, manufacturer) + +apex(data = n_manufac, type = "column", mapping = aes(x = manufacturer, y = n)) +``` + +Flipping coordinates can be done by using `type = "bar"`: + +```{r} +apex(data = n_manufac, type = "bar", mapping = aes(x = manufacturer, y = n)) +``` + + +To create a dodge bar charts, use aesthetic `fill` : + +```{r} +n_manufac_year <- count(mpg, manufacturer, year) + +apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year)) +``` + +For stacked bar charts, specify option `stacked` in `ax_chart` : + +```{r} +apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year)) %>% + ax_chart(stacked = TRUE) +``` + + + +## Line charts + +Simple line charts can be created with (works with `character`, `Date` or `POSIXct`): + +```{r} +data("economics") +economics <- head(economics, 100) + +apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) +``` + + +To represent several lines, use a `data.frame` in long format and the `group` aesthetic: + +```{r} +economics_long <- economics_long %>% + group_by(variable) %>% + slice(1:100) + +apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) +``` + + +Create area charts with `type = "area"`: + +```{r} +apex(data = economics_long, type = "area", mapping = aes(x = date, y = value01, fill = variable)) %>% + ax_chart(stacked = TRUE) %>% + ax_dataLabels(enabled = FALSE) +``` + + + + + +## Scatter charts + +Simple bar charts can be created with: + +```{r} +apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg)) +``` + +Color points according to a third variable: + +```{r} +apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, fill = cyl)) +``` + +And change point size using `z` aesthetics: + +```{r} +apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, z = scales::rescale(qsec))) +``` + + + + +## Pie charts + +Simple pie charts can be created with: + +```{r} +poll <- data.frame( + answer = c("Yes", "No"), + n = c(254, 238) +) + +apex(data = poll, type = "pie", mapping = aes(x = answer, y = n)) +``` + + + +## Radial charts + +Simple radial charts can be created with (here we pass values directly in `aes`, but you can use a `data.frame`) : + +```{r} +apex(data = NULL, type = "radialBar", mapping = aes(x = "My value", y = 65)) +``` + + +Multi radial chart (more than one value): + +```{r} +fruits <- data.frame( + name = c('Apples', 'Oranges', 'Bananas', 'Berries'), + value = c(44, 55, 67, 83) +) + +apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value)) + +``` + + + +## Radar charts + +Simple radar charts can be created with: + +```{r} +mtcars$model <- rownames(mtcars) + +apex(data = head(mtcars), type = "radar", mapping = aes(x = model, y = qsec)) +``` + +With a grouping variable: + +```{r} +# extremely complicated reshaping +new_mtcars <- reshape( + data = head(mtcars), + idvar = "model", + varying = list(c("drat", "wt")), + times = c("drat", "wt"), + direction = "long", + v.names = "value", + drop = c("mpg", "cyl", "hp", "dist", "qsec", "vs", "am", "gear", "carb") +) + +apex(data = new_mtcars, type = "radar", mapping = aes(x = model, y = value, group = time)) +``` + + +## Heatmap + +Create heatmap with : + +```{r} +txhousing2 <- txhousing %>% + filter(city %in% head(unique(city)), year %in% c(2000, 2001)) %>% + rename(val_med = median) + +apex(data = txhousing2, type = "heatmap", mapping = aes(x = date, y = scales::rescale(val_med), group = city)) %>% + ax_dataLabels(enabled = FALSE) %>% + ax_colors("#008FFB") +``` + + +