mjs_add_mouseover: Adds a custom rollover to a metricsgraphics chart

In metricsgraphics: Create Interactive Charts with the JavaScript 'MetricsGraphics' Library

Description

MetricsGraphics charts allow for custom rollovers. mjs_add_mouseover lets you add a custom rollover to a metricsgraphics object. You must be familiar with javascript and D3 idioms since you are supplying a javascript function as a parameter.

Since targeting is done by element id, you will need to add a special string - {{ID}} - to the target element selector so metricsgraphics can add the unique object identifier to the selector. See Examples for basic usage.

Usage

mjs_add_mouseover(mjs, func)

Arguments

mjs	metricsgraphics plot object
func	text for javascript function to be used for the custom rollover. See Details for usage.

Value

metricsgraphics object

Note

you need to use d.point.THING vs d.THING when trying to add mouseovers to a metricsgraphics scatterplot.

Examples

set.seed(1492)
dat <- data.frame(date=as.Date('2009-01-01') + 0:9,
                  value=rnorm(10, 0, 2))
dat %>%
  mjs_plot(x=date, y=value) %>%
  mjs_line() %>%
  mjs_axis_x(xax_format = "date") %>%
  mjs_add_mouseover("function(d, i) {
                $('{{ID}} svg .mg-active-datapoint')
                    .text('custom text : ' + d.date + ' ' + i);
                 }")

# slightly different for scatterplots

dat <- data.frame(value=rnorm(n=30, mean=5, sd=1),
                  value2=rnorm(n=30, mean=4, sd=1),
                  test = c(rep(c('test', 'test2'), 15)))

dat %>%
  mjs_plot(x = value, y = value2) %>%
  mjs_point() %>%
  mjs_add_mouseover("function(d, i) {
                $('{{ID}} svg .mg-active-datapoint')
                    .text('custom text : ' + d.point.test + ' ' + i);
                 }")

metricsgraphics documentation built on May 1, 2019, 8:07 p.m.