linevis {linevis} | R Documentation |
Create a graph2d visualization
Description
linevis
lets you create rich and fully interactive graph2d visualizations.
graph2ds can be included in Shiny apps or R markdown documents.
linevis
Includes an extensive
API to manipulate a graph2d after creation, and supports getting data out of
the visualization into R. Based on the 'visjs'
graph2d JavaScript library.
To see the full details on what the graph2d can support, please read the
official documentation of visjs graph2d.
Usage
linevis(
data,
groups,
zoomFactor = 0.5,
fit = TRUE,
log_scale = FALSE,
options = list(),
width = NULL,
height = NULL,
elementId = NULL,
loadDependencies = TRUE,
timezone = NULL
)
Arguments
data |
A dataframe (or SharedData object for {crosstalk} support) containing the graph2d items.
Each item on the graph2d is represented by a row in the dataframe. |
groups |
A dataframe containing the groups data (optional). See the Groups section below for more details. buttons on the widget. |
zoomFactor |
How much to zoom when zooming out. A zoom factor of 0.5
means that when zooming out the graph2d will show 50% more content. For
example, if the graph2d currently shows 20 days, then after zooming out with
a |
fit |
If |
log_scale |
If |
options |
A named list containing any extra configuration options to
customize the graph2d. All available options can be found in the
official
graph2d documentation. Note that any options that define a JavaScript
function must be wrapped in a call to |
width |
Fixed width for graph2d (in css units). Ignored when used in a
Shiny app – use the |
height |
Fixed height for graph2d (in css units). It is recommended to not use this parameter since the widget knows how to adjust its height automatically. |
elementId |
Use an explicit element ID for the widget (rather than an automatically generated one). Ignored when used in a Shiny app. |
loadDependencies |
Whether to load JQuery and bootstrap
dependencies (you should only set to |
timezone |
By default, the linevis widget displays times in the local time of the browser rendering it. You can set linevis to display times in another time zone by providing a number between -15 to 15 to specify the number of hours offset from UTC. For example, use '0' to display in UTC, and use '-4' to display in a timezone that is 4 hours behind UTC. |
Value
A graph2d visualization htmlwidgets
object
Data format
The data
parameter supplies the input dataframe that describes the
items in the graph2d. The following is a subset of the variables supported
in the items dataframe. The full list of supported variables can be found in
the official
visjs documentation.
id
- A unique ID for the item. If not provided, then the row names will be used as IDs.title
- Add a title for the item, displayed when hovering the mouse over the item. The title can only contain plain text.group
- The ID of a group. When agroup
is provided, all items with the same group are placed on one line. A vertical axis is displayed showing the group names. See more details in the Groups section below.className
- A className can be used to give items an individual CSS style.style
- A CSS text string to apply custom styling for an individual item, for examplecolor: red;
.
Groups
The groups
parameter must be provided if the data items have groups
(i.e. if any of the items have a group
variable).
The following is a subset of the variables supported in
the groups dataframe. The full list of supported variables can be found in
the official
visjs documentation.
id
- (required) An ID for the group. The group will display all items having agroup
variable which matches this ID.content
- (required) The contents of the group. This can be plain text or HTML code.className
- A className can be used to give groups an individual CSS style.style
- A CSS text string to apply custom styling for an individual group label, for examplecolor: red;
.
id
and content
are the only required variables for each group,
while the rest of the variables are optional. If you include a variable that
is only used for some rows, you can use NA
for the rows where it's
not used. The groups data of a graph2d can either be set by supplying the
groups
argument to linevis()
, or by calling the
setGroups
function.
Getting data out of a graph2d in Shiny
When a graph2d widget is created in a Shiny app, there are four pieces of
information that are always accessible as Shiny inputs. These inputs have
special names based on the graph2d's ID. Suppose that a graph2d is created
with an outputId
of "mytime", then the following four input
variables will be available:
input$mytime_data
- will return a data.frame containing the data of the items in the graph2d. The input is updated every time an item is modified, added, or removed.input$mytime_ids
- will return the IDs (a vector) of all the items in the graph2d. The input is updated every time an item is added or removed from the graph2d.input$mytime_window
- will return a 2-element vector containing the minimum and maximum dates currently visible in the graph2d. The input is updated every time the viewable window of dates is updated (by zooming or moving the window).input$mytime_visible
- will return a list of IDs of items currently visible in the graph2d.
All four inputs will return a value upon initialization of the graph2d and every time the corresponding value is updated.
Extending linevis
If you need to perform any actions on the graph2d object that are not
supported by this package's API, you may be able to do so by manipulating the
graph2d's JavaScript object directly. The graph2d object is available via
document.getElementById("id").widget.graph2d
(replace id
with
the graph2d's ID).
This graph2d object is the direct widget that vis.js
creates, and you
can see the visjs documentation to
see what actions you can perform on that object.
Customizing the linevis look and style using CSS
To change the styling of individual items or group labels, use the
className
and style
columns in the data
or groups
dataframes.
When running a Shiny app, you can use CSS files to apply custom styling to
other components of the linevis widget.
Examples
## Not run:
#----------------------- Most basic -----------------
linevis()
#----------------------- Minimal data -----------------
df_data = data.frame(x = c('2014-06-11',
'2014-06-12',
'2014-06-13',
'2014-06-14',
'2014-06-15',
'2014-06-16'),
y = c(0,
1,
30000,
10,
150,
30000,
20,
20))
linevis(df_data)
#----------------------- Using groups -----------------
df_data = rbind(df_data, data.frame(x = c('2014-06-09', '2014-06-18'),
y = c(20, 20)))
df_data$group = c(rep(0, 6), 1, 1)
df_grp = data.frame(id = 0:1, content = c('ESR', 'threshold'),
className = c('grp1', 'grp2'))
linevis(df_data, df_grp)
#----------------------- Getting data out of the graph2d into Shiny -----------------
if (interactive()) {
library(shiny)
ui <- fluidPage(
linevisOutput("appts"),
div("Visible window:", textOutput("window", inline = TRUE)),
tableOutput("table")
)
server <- function(input, output) {
output$appts <- renderLinevis(
linevis(df_data)
)
output$window <- renderText(
paste(input$appts_window[1], "to", input$appts_window[2])
)
output$table <- renderTable(
input$appts_data
)
}
shinyApp(ui, server)
}
## End(Not run)