Update the vignettes

XD-DENG · Aug 2, 2016 · 2166ef6 · 2166ef6
1 parent 408cb3c
commit 2166ef6
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 170 deletions.
diff --git a/vignettes/Capture.png b/vignettes/Capture.png
diff --git a/vignettes/intro.Rmd b/vignettes/intro.Rmd
@@ -1,170 +1,117 @@
----
-title: "Introduction to ECharts2Shiny"
-author: "Xiaodong DENG"
-date: "July 26, 2016"
-output: rmarkdown::html_vignette
-vignette: >
-  %\VignetteIndexEntry{Introduction to ECharts2Shiny}
-  %\VignetteEngine{knitr::rmarkdown}
-  \usepackage[utf8]{inputenc}
----
-
-As an R package, *ECharts2Shiny* can help embed the interactive charts plotted by [*ECharts*](/~https://github.com/ecomfe/echarts) library into our *Shiny* application. Currently, we can support eight types of charts, including
-
-- Pie charts
-- Line charts
-- Bar charts
-- Scatter plots
-- Radar chart
-- Gauge
-- Word Cloud
-- Heat Map
-
-It's strongly recommended to visit **[examples](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples)** for diverse examples so that you can know how much this package can help you and the details of how to use the functions. In this vignette, we would mainly introduce the basic usage of **ECharts2Shiny**.
-
-### Contents
-- [How to Install](#how-to-install)
-- [Features](#features)
-- [Examples](#examples)
-- [Note](#note)
-- [License](#license)
-
-
-## How to Install
-
-From CRAN,
-```{r, eval=FALSE}
-install.packages("ECharts2Shiny")
-```
-
-For the latest development version, please install from GitHub
-```{r, eval=FALSE}
-library(devtools)
-install_github("XD-DENG/ECharts2Shiny")
-```
-
-## Features
-
-**Easy to Use**: Only 3-4 lines are needed to insert an interactive chart into our Shiny application.
-
-**Diverse Charts**: This package can support most of your needs for data visualization, including *word cloud* and *heat map*.
-
-**Customisable**: As rich options as possible are kept, including the 'grid' option in the original *ECharts* library. Users can specify the line width, line type, point type, and point size etc, just like what we can do in normal R plotting functions.
-
-**Theme Options**: In line with the original ECharts library, users can select the theme for their interactive charts, including 'roma', 'shine', 'vintage', 'maracons', and 'infographic'. Users can select the theme of diverse fashion according to their needs and preference.
-
-
-
-## Examples
-
-**(For more examples, please refer to the `/examples` folder)**
-
-```{r, eval=FALSE}
-library(shiny)
-library(ECharts2Shiny)
-
-
-# Prepare sample data for plotting ---------------------------------------
-
-dat_1 <- c(rep("Type-A", 8),
-           rep("Type-B", 5),
-           rep("Type-C", 1))
-
-dat_2 <- data.frame(c(1, 2, 3, 1),
-                    c(2, 4, 6, 6),
-                    c(3, 2, 7, 5))
-names(dat_2) <- c("Type-A", "Type-B", "Type-C")
-row.names(dat_2) <- c("Time-1", "Time-2", "Time-3", "Time-4")
-
-
-# Server function ---------------------------------------------------------
-
-server <- function(input, output) {
-  
-  # Call functions from ECharts2Shiny to render charts
-  renderPieChart(div_id = "test_1",
-                 data = dat_1,
-                 radius = "70%",center_x = "50%", center_y = "50%")
-  
-  renderLineChart(div_id = "test_2", theme = "shine",
-                  data = dat_2)
-  
-  renderBarChart(div_id = "test_3", grid_left = '1%',
-                 data = dat_2)
-  
-  renderBarChart(div_id = "test_4", theme = "vintage",
-                 direction = "vertical", grid_left = "10%",
-                 data = dat_2)
-  
-  renderGauge(div_id = "test_5", gauge_name = "Finished Rate",
-              rate = 99.9)
-}
-
-
-# UI layout ---------------------------------------------------------------
-
-ui <- fluidPage(
-  # We HAVE TO to load the ECharts javascript library in advance
-  loadEChartsLibrary(),
-  loadEChartsTheme('shine'),
-  loadEChartsTheme('vintage'),
-  
-  fluidRow(
-    column(6,
-           tags$div(id="test_1", style="width: 80%;height:300px;"),  # Specify the div for the chart. Can also be considered as a space holder
-           deliverChart(div_id = "test_1")  # Deliver the plotting
-    ),
-    column(6,
-           tags$div(id="test_2", style="width:80%;height:300px;"),
-           deliverChart(div_id = "test_2")
-    )
-  ),
-  
-  fluidRow(
-    column(6,
-           tags$div(id="test_3", style="width:80%;height:300px;"),
-           deliverChart(div_id = "test_3")
-    ),
-    column(6,
-           tags$div(id="test_4", style="width:80%;height:300px;"),
-           deliverChart(div_id = "test_4")
-    )
-  ),
-  
-  fluidRow(
-    column(6,
-           tags$div(id="test_5", style="width:100%;height:400px;"),
-           deliverChart(div_id = "test_5")
-    ),
-    column(6
-    )
-  )
-)
-
-# Run the application
-shinyApp(ui = ui, server = server)
-```
-
-```{r, out.width = 800, echo = FALSE}
-knitr::include_graphics("Capture.png")
-```
-
-
-## Note
-
-For each type of charts, you need to prepare the data to be in specific format for **EChart2Shiny**. 
-
-For both line charts and bar charts, the data input should be a data.frame. Each column would be one category, and each row would be one observation.
-
-For word cloud, the data input should either be a data.frame containing two columns named "name" and "value", or be a vector containing all the lements users need to count and plot, like `c("a", "a", "b", "a", "b", "c")`.
-
-
-
-## License
-
-***ECharts2Shiny*** package itself is under GPL-2. 
-
-The ***ECharts*** JS library is under BSD license ([ECharts](/~https://github.com/ecomfe/echarts)).
-
-
-
+---
+title: "Introduction to ECharts2Shiny"
+author: "Xiaodong DENG"
+date: "July 26, 2016"
+output: rmarkdown::html_vignette
+vignette: >
+  %\VignetteIndexEntry{Introduction to ECharts2Shiny}
+  %\VignetteEngine{knitr::rmarkdown}
+  \usepackage[utf8]{inputenc}
+---
+
+As an R package, *ECharts2Shiny* can help embed the interactive charts plotted by [*ECharts*](/~https://github.com/ecomfe/echarts) library into our *Shiny* application. Currently, we can support 
+
+- Pie charts
+- Line charts
+- Bar charts
+- Scatter plots
+- Radar chart
+- Gauge
+- Word Cloud
+- Heat Map
+
+### Contents
+- [How to Install](#how-to-install)
+- [Examples](#examples)
+- [Note](#note)
+- [License](#license)
+
+
+## How to Install
+
+From CRAN,
+```{r, eval=FALSE}
+install.packages("ECharts2Shiny")
+```
+
+For the latest development version, please install from GitHub
+```{r, eval=FALSE}
+library(devtools)
+install_github("XD-DENG/ECharts2Shiny")
+```
+
+
+
+## Examples
+
+```{r, eval=FALSE}
+library(shiny)
+library(ECharts2Shiny)
+
+# Prepare sample data for plotting --------------------------
+dat <- data.frame(c(1, 2, 3),
+                  c(2, 4, 6))
+names(dat) <- c("Type-A", "Type-B")
+row.names(dat) <- c("Time-1", "Time-2", "Time-3")
+
+# Server function -------------------------------------------
+server <- function(input, output) {
+  # Call functions from ECharts2Shiny to render charts
+  renderBarChart(div_id = "test", grid_left = '1%', direction = "vertical",
+                 data = dat)
+}
+
+# UI layout -------------------------------------------------
+ui <- fluidPage(
+  # We MUST load the ECharts javascript library in advance
+  loadEChartsLibrary(),
+  
+  tags$div(id="test", style="width:50%;height:400px;"),
+  deliverChart(div_id = "test")
+)
+
+# Run the application --------------------------------------
+shinyApp(ui = ui, server = server)
+```
+
+```{r, out.width = 400, echo = FALSE}
+knitr::include_graphics("Capture.png")
+```
+
+
+**(For more examples, please refer to the `/examples` folder of the repo on GitHub)**
+
+### List of Examples (up to 2 August 2016)
+
+- [1. Basic](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-1%20Basic)
+- [2. Diverse Plots](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-2%20Diverse%20Plots)
+- [3. More Options in Basic Charts](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-3%20More%20Options)
+- [4. Scatter](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-4%20Scatter)
+- [5. Use Reactive Values as Data Input](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-5%20Use%20Reactive%20Values)
+- [6. Radar Chart](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-6%20Radar%20Chart)
+- [7. Word Cloud - Basic](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-7%20word%20cloud)
+- [8. Word Cloud - More Shapes](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-8%20word%20cloud%20-%20more%20shapes)
+- [9. Word Cloud - Use Vector as Data Input](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-9%20word%20cloud%20-%20Use%20vector%20as%20data%20input)
+- [10. Line Chart with Diverse Options](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-10%20Line%20Chart%20with%20diverse%20option)
+- [11. Scatter with point.type Argument](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-11%20Scatter%20with%20point.type)
+- [12. Step Line Chart](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-12%20Step%20Line%20Chart)
+- [13. Deal with Missing Values](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-13%20Deal%20with%20NA%20Values)
+- [14. Heat Map](/~https://github.com/XD-DENG/ECharts2Shiny/tree/master/examples/example-14%20Heat%20Map)
+
+
+## Note
+
+For each type of charts, you need to prepare the data to be in specific format for **EChart2Shiny**. 
+
+Please refer to the document of each function and the examples for details
+
+
+
+## License
+
+***ECharts2Shiny*** package itself is under GPL-2. 
+
+The ***ECharts*** JS library is under BSD license ([ECharts](/~https://github.com/ecomfe/echarts)).
+
+
+