add new demo of htmlwidgets::onRender()

Author: cpsievert

demo/00Index

@@ -13,6 +13,7 @@ crosstalk-highlight-epl               Exploring English Premier League performac
 crosstalk-highlight-epl-2             A 'wormchart' version of the epl demo
 crosstalk-filter-lines                Using crosstalk's filter_select() to filter lines
 crosstalk-filter-dynamic-axis         Using crosstalk's filter_select() to dynamically change the y-axis
+custom-javascript                     Using htmlwidgets::onRender() to add custom interactivity features (e.g google search on click)
 rotate                                Using htmlwidgets::onRender() to rotate the camera of a 3D graph
 ternary                               A basic ternary plot
 sf-mapbox-data                        Mapping sf objects with mapbox

demo/custom-javascript.R

@@ -0,0 +1,98 @@
+library(plotly)
+library(htmlwidgets)
+
+mtcars$url <- paste0(
+  "http://google.com/#q=", 
+  rownames(mtcars)
+)
+
+p <- plot_ly(mtcars, x = ~wt, y = ~mpg) %>%
+  add_markers(customdata = ~url)
+
+# open google search (on click)
+onRender(p, "
+  function(el, x) {
+    el.on('plotly_click', function(d) {
+      var url = d.points[0].customdata;
+      window.open(url);
+    });
+  }
+")
+
+# annotate graph (on click)
+onRender(p, "
+  function(el, x) {
+    el.on('plotly_click', function(d) {
+      var ann = {
+        text: d.points[0].customdata,
+        x: 0,
+        y: 0,
+        xref: 'paper',
+        yref: 'paper',
+        yshift: -40,
+        showarrow: false
+      }
+      Plotly.relayout(el.id, {annotations: [ann]})
+    });
+  }
+")
+
+# annotate on hover
+onRender(p, "
+  function(el, x) {
+    el.on('plotly_hover', function(d) {
+      var ann = {
+        text: d.points[0].customdata,
+        x: 0,
+        y: 0,
+        xref: 'paper',
+        yref: 'paper',
+        yshift: -40,
+        showarrow: false
+      }
+      Plotly.relayout(el.id, {annotations: [ann]})
+    });
+  }
+")
+
+# combine highlight() api with custom javascript
+mtcars %>%
+  highlight_unit() %>%
+  plot_ly(x = ~wt, y = ~mpg, customdata = ~url) %>%
+  highlight(color = "red") %>%
+  onRender("
+  function(el, x) {
+    el.on('plotly_click', function(d) {
+      var ann = {
+        text: d.points[0].customdata,
+        x: 0,
+        y: 0,
+        xref: 'paper',
+        yref: 'paper',
+        yshift: -40,
+        showarrow: false
+      }
+      Plotly.relayout(el.id, {annotations: [ann]})
+    });
+  }
+  ")
+
+# inspect different plotly.js events via browser console
+# see also https://plot.ly/javascript/plotlyjs-events/
+onRender(p, "
+  function(el, x) {
+    el.on('plotly_hover', function(d) {
+      console.log('hover', d)
+    });
+    el.on('plotly_click', function(d) {
+      console.log('click', d)
+    });
+    el.on('plotly_selected', function(d) {
+      console.log('selected', d)
+    });
+    el.on('plotly_relayout', function(d) {
+      console.log('relayout', d)
+    });
+  }"
+)
+