Integration with R Shiny

This tutorial will help you integrate Flexmonster into an R Shiny application. It is based on the how to build a Shiny app guide.

Prerequisites

• R
• Shiny package
  Invoke R and install Shiny with the following command:

  install.packages("shiny")

Run a sample R Shiny project from GitHub

Step 1. To get our sample project, download it as ZIP or clone it with the following command:

git clone https://github.com/flexmonster/pivot-r-shiny

Step 2. Invoke R and navigate to the pivot-r-shiny/ project folder:

setwd('<path_to_project>/pivot-r-shiny')

Step 3. Run your application from the R program:

library(shiny)
runApp()

The application will be automatically opened in your browser.

If you encounter any errors at this step, refer to the troubleshooting section.

Integrate Flexmonster into an R Shiny project

Step 1. Create a new folder (e.g., shinyapp/) with index.html and app.r files inside.

Now you can start configuring the index.html.

Step 2. In the index.html file, include the flexmonster.js file:

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

Step 3. Create a <div> container for Flexmonster:

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>

Step 4. Add a script to embed the component:

<script src="https://cdn.flexmonster.com/flexmonster.js"></script> 
<div id="pivotContainer">The component will appear here</div>
<script>
    const pivot = new Flexmonster({
          container: "pivotContainer",
          componentFolder: "https://cdn.flexmonster.com/",
          toolbar: true
    });
</script>

Step 5. Configure a report:

<div id="pivotContainer">The component will appear here</div>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<script type="text/javascript">
    const pivot = new Flexmonster({
        container: "pivotContainer", 
        componentFolder: "https://cdn.flexmonster.com/",
        toolbar: true, 
        report: {
            dataSource: {
                type: "json",
                filename: "data/data.json"
            }
        }
    });
</script>

Now the index.html is ready to be used, and we will proceed to configure the app.r file.

Step 6. In the app.r file, import Shiny into your application:

library(shiny)

Step 7. Create a simple server function:

server <- function(input, output) {

}

Step 8. Define the user interface by calling the htmlTemplate() function with the path to the index.html as a parameter:

ui <- htmlTemplate("index.html")

Step 9. Add the shinyApp() function that uses the ui object and the server function to build a Shiny app object:

shinyApp(ui, server)

Step 10. Invoke R and navigate to the shinyapp/ project folder:

setwd('<path_to_project>/shinyapp')

Step 11. Run your application from the R program:

library(shiny)
runApp()

The application will be automatically opened in your browser.

If you encounter any errors at this step, refer to the troubleshooting section.

Troubleshooting

This section provides solutions to the errors you might encounter while completing this tutorial. If your error is not listed here, visit our troubleshooting page.

Error: No Shiny application exists at the path

If you followed the tutorial and got this error, ensure the working directory of the R program is set to the project folder (e.g., ~/pivot-r-shiny/).

Alternatively, if you are using macOS or Ubuntu/Linux, you can open the terminal in the project folder and try one of the following:

• Start the R program with the following command:

  R

  Then run the app using the commands described in step 11 of the integration process.
• Run the app directly from the terminal with one of the following commands:

  R -e "shiny::runApp()"

  or

  Rscript app.r

Next steps

• Connect to your data source
• Configure Flexmonster
• Update Flexmonster
• Customize Flexmonster