Integrate Tableau into Shiny project with Javascript API

Question

I'm trying to put a Graph in a Shiny project I'm working on. I found that the most convenient way to do so is to use the Javascript API and the shinyjs package.

The Javascript API for Tableau is explained in detail here and my script looks like this. According to the instructions it is correct, and according to shinyjs the function name has to be preceded by "shinyjs."

   function  shinyjs.init() {
    var containerDiv document.getElementById("vizContainer"),
    url = "https://public.tableau.com/profile/daniel.cuartas#!/vizhome/Indicadores_25/Pregunta";
    var viz new tableau.Viz(containerDiv, url); 
}

And the chunk of code included in my Shiny ui.R is this

               ui = fluidPage(
             includeScript("https://public.tableau.com/javascripts/api/tableau-2.js"),
             useShinyjs(),
             extendShinyjs(script = "C:/Users/Antonia/Downloads/SaberDigital/init.js"),
             tags$div(id = 'vizContainer'),
                      js$init()

           )

I get back the next error:

Error : shinyjs: Error parsing the JavaScript file: SyntaxError: Unexpected identifier.

What is it I am doing wrong?

Answer 1

A few issues with your code:

1- You have to use tags$head(tags$script()) which tells the browser to load the script instead of includeScript which include the JS code.

2- The shinyjs expanding function must be written like this shinyjs.init = function() and to simplify I inlined it rather than having it in a separate file

3- The URL format to you viz must have this format https://public.tableau.com/views/YOUR-VISUALIZATION

4- The shinyjs.init function must be called by the server function, not the ui

shinyApp(ui = fluidPage(
  useShinyjs(),
  tags$head(tags$script(src="https://public.tableau.com/javascripts/api/tableau-2.js")),
  extendShinyjs(text = "
shinyjs.init = function(){
var containerDiv = document.getElementById('vizContainer');
url = 'https://public.tableau.com/views/Indicadores_25/Pregunta';
var viz = new tableau.Viz(containerDiv, url); 
}"),
  tags$div(id = 'vizContainer')),
      server = function(input, output, session){js$init()})