Skip to contents

Google Annotation Chart with R annotationchart gvisAnnotationChart

Source: R/gvisAnnotationChart.R
gvisAnnotationChart.Rd

gvisAnnotationChart charts are interactive time series line charts that support annotations. Unlike the gvisAnnotatedTimeLine, which uses Flash, annotation charts are SVG/VML and should be preferred whenever possible.

Usage

gvisAnnotationChart(
  data,
  datevar = "",
  numvar = "",
  idvar = "",
  titlevar = "",
  annotationvar = "",
  date.format = "%Y/%m/%d",
  options = list(),
  chartid
)

Arguments

data

a data.frame. The data has to have at least two columns, one with date information (datevar) and one numerical variable.

datevar

column name of data which shows the date dimension. The information has to be of class Date or POSIX* time series.

numvar

column name of data which shows the values to be displayed against datevar. The information has to be numeric.

idvar

column name of data which identifies different groups of the data. The information has to be of class character or factor.

titlevar

column name of data which shows the title of the annotations. The information has to be of class character or factor. Missing information can be set to NA. See section 'Details' for more details.

annotationvar

column name of data which shows the annotation text. The information has to be of class character or factor. Missing information can be set to NA. See section 'Details' for more details.

date.format

if datevar is of class Date then this argument specifies how the dates are reformatted to be used by JavaScript.

options

list of configuration options, see:

https://developers.google.com/chart/interactive/docs/gallery/annotationchart#Configuration_Options

The parameters can be set via a named list. The parameters have to map those of the Google documentation.

  • Boolean arguments are set to either TRUE or FALSE, using the R syntax.

  • Google API parameters with a single value and with names that don't include a "." are set like one would do in R, that is options=list(width=200, height=300). Exceptions to this rule are the width and height options for gvisAnnotatedTimeLine and gvisAnnotationChart. For those two functions, width and height must be character strings of the format "Xpx", where X is a number, or "automatic". For example, options=list(width="200px", height="300px").

  • Google API parameters with names that don't include a ".", but require multivalues are set as a character, wrapped in "[ ]" and separated by commas, e.g. options=list(colors="['#cbb69d', '#603913', '#c69c6e']")

  • Google API parameters with names that do include a "." present parameters with several sub-options and have to be set as a character wrapped in "{ }". The values of those sub-options are set via parameter:value. Boolean values have to be stated as 'true' or 'false'. For example the Google documentaion states the formating options for the vertical axis and states the parameter as vAxis.format. Then this paramter can be set in R as:options=list(vAxis="\{format:'#,###%'\}").

  • If several sub-options have to be set, e.g. titleTextStyle.color, titleTextStyle.fontName and titleTextStyle.fontSize, then those can be combined in one list item such as:options=list(titleTextStyle="\{color:'red', fontName:'Courier', fontSize:16\}")

  • paramters that can have more than one value per sub-options are wrapped in "[ ]". For example to set the labels for left and right axes use:options=list(vAxes="[\{title:'val1'\}, \{title:'val2'\}]")

  • gvis.editor a character label for an on-page button that opens an in-page dialog box enabling users to edit, change and customise the chart. By default no value is given and therefore no button is displayed.

For more details see the Google API documentation and the R examples below.
chartid

character. If missing (default) a random chart id will be generated based on chart type and tempfile.

Value

gvisAnnotationChart returns list of class

"gvis" and "list". An object of class "gvis" is a list containing at least the following components:

type

Google visualisation type

chartid

character id of the chart object. Unique chart ids are required to place several charts on the same page.

html

a list with the building blocks for a page

header

a character string of a html page header: <html>...<body>,

chart

a named character vector of the chart's building blocks:

jsHeader

Opening <script> tag and reference to Google's JavaScript library.

jsData

JavaScript function defining the input data as a JSON object.

jsDrawChart

JavaScript function combing the data with the visualisation API and user options.

jsDisplayChart

JavaScript function calling the handler to display the chart.

jsFooter

End tag </script>.

jsChart

Call of the jsDisplayChart function.

divChart

<div> container to embed the chart into the page.

caption

character string of a standard caption, including data name and chart id.

footer

character string of a html page footer: </body>...</html>, including the used R and googleVis version and link to Google's Terms of Use.

References

Google Chart Tools API: https://developers.google.com/chart/interactive/docs/gallery/annotationchart

See also

See also print.gvis, plot.gvis for printing and plotting methods. Further see reshape for reshaping data, e.g. from a wide format into a long format.

Author

Markus Gesmann markus.gesmann@gmail.com, Diego de Castillo decastillo@gmail.com

Examples


## Please note that by default the googleVis plot command
## will open a browser window and requires Internet
## connection to display the visualisation.


data(Stock)
Stock
#>          Date  Device  Value          Title                      Annotation
#> 1  2008-01-01 Pencils   3000           <NA>                            <NA>
#> 2  2008-01-02 Pencils  14045           <NA>                            <NA>
#> 3  2008-01-03 Pencils   5502           <NA>                            <NA>
#> 4  2008-01-04 Pencils  75284           <NA>                            <NA>
#> 5  2008-01-05 Pencils  41476 Bought pencils             Bought 200k pencils
#> 6  2008-01-06 Pencils 333222           <NA>                            <NA>
#> 7  2008-01-01    Pens  40645           <NA>                            <NA>
#> 8  2008-01-02    Pens  20374           <NA>                            <NA>
#> 9  2008-01-03    Pens  50766           <NA>                            <NA>
#> 10 2008-01-04    Pens  14334   Out of stock Ran out of stock of pens at 4pm
#> 11 2008-01-05    Pens  66467           <NA>                            <NA>
#> 12 2008-01-06    Pens  39463           <NA>                            <NA>
A1 <- gvisAnnotationChart(Stock, datevar="Date",
                           numvar="Value", idvar="Device",
                           titlevar="Title", annotationvar="Annotation",
                           options=list(displayAnnotations=TRUE,
                            legendPosition='newRow',
                            width=600, height=350)
                           )
plot(A1)

## Two Y-axis
A2 <- gvisAnnotationChart(Stock, datevar="Date",
                           numvar="Value", idvar="Device",
                           titlevar="Title", annotationvar="Annotation",
                           options=list(displayAnnotations=TRUE, 
                            width=600, height=350, scaleColumns='[0,1]',
                            scaleType='allmaximized')
                          )
plot(A2)



## Colouring the area below the lines to create an area chart
A3 <- gvisAnnotationChart(Stock, datevar="Date",
                           numvar="Value", idvar="Device",
                           titlevar="Title", annotationvar="Annotation",
                           options=list(
                             width=600, height=350,
                             fill=10, displayExactValues=TRUE,
                             colors="['#0000ff','#00ff00']")
                           )
                          
plot(A3)


## Data with POSIXct datetime variable
A4 <- gvisAnnotationChart(Andrew, datevar="Date/Time UTC",
                            numvar="Pressure_mb",
                            options=list(scaleType='maximized')
                            )

plot(A4)

# Change background to blue
A5 <- gvisAnnotationChart(Stock, datevar="Date",
              numvar="Value", idvar="Device",
              titlevar="Title", annotationvar="Annotation",
              options=list(
                displayAnnotations=TRUE,
                  chart = "{chartArea:{backgroundColor:'#003b70'}}",
                            legendPosition='newRow',
                            width=600, height=350))
                            
plot(A5)