Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Plotly-Generate JSON in R, save and reuse in html/javascript

It there a simple example of how to:

  1. Export the plotly json file from an R plotly plot
  2. Save this file
  3. Reuse this file to generate a plot in a webpage using the plotly.js library

I have generated the a json file for a plot (p1):

json<-plotly_json(p1,FALSE)
write(json,'test.json')

But I have been unable to generate the plot in a simple html/java script test. I have been able to generate plots in html/javascipt, just not from a json file saved from R. This seems simple but I am new to html and clearly am missing something obvious.

like image 474
user3633239 Avatar asked Jul 03 '26 22:07

user3633239


1 Answers

I think I finally have what the OP and I was looking for.

The below function outputs two files.

  1. Javascript file containing everything you need from Plotly
  2. Optional HTML file with appropriate code to draw the plot.
rm(list = ls())


library(tidyverse)
library(stringi)
library(plotly)


plotly_to_js <- function(

  plotly.object
  , div.id = 'plot1'
  , output.html = FALSE
  , output.file = NULL
  , output.dir = NULL
  , output.url = NULL

){

  if(is.null(output.file)){
    output.file <- div.id %s+% '.js'
  }

  if(is.null(output.dir)){
    js.filename <- getwd() %s+% '/' %s+% output.file
  }else{
    js.filename <- output.dir %s+% '/' %s+% output.file
  }

  if(is.null(output.url)){
    output.url <- div.id %s+% '.html'
  }


  json <- plotly_json(plotly.object,FALSE)

  js.output <-
    "(function(){ \n
        window.PLOTLYENV={'BASE_URL': 'https://plotly.com'}; \n
        \n
        var gd = document.getElementById('%div.id%') \n
        var resizeDebounce = null; \n

        function resizePlot() { \n
          var bb = gd.getBoundingClientRect(); \n
          Plotly.relayout(gd, { \n
            width: bb.width, \n
              height: bb.height \n
            }); \n
          } \n

          Plotly.plot(gd,  \n
              %json%
           \n
                  ); \n
           }()); \n
  "

  js.output <- gsub('%div.id%', div.id, js.output)
  js.output <- gsub('%json%', json, js.output)

  fileConn<-file(js.filename)
    writeLines(js.output, fileConn)
  close(fileConn)

  if(output.html){

    output.html <-
      "<html> \n
        <head> \n
            <meta charset=\"utf-8\"/> \n
        </head> \n

        <body> \n
        \n
          <script src='https://cdn.plot.ly/plotly-latest.min.js'></script> \n
        \n
        <div id=\"%div.id%\" style=\"width: 100%; height: 100%;\" class=\"plotly-graph-div\"></div> \n
        <script type=\"text/javascript\" src=\"%js.filename%\"></script> \n

        </body>\n
        </html>\n"

    output.html <- gsub('%div.id%', div.id, output.html)
    output.html <- gsub('%js.filename%', js.filename, output.html)

    fileConn <- file(output.url)
      writeLines(output.html, fileConn)
    close(fileConn)

  }

}



x <- c(1:100)
random_y <- rnorm(100, mean = 0)
data <- data.frame(x, random_y)

fig <- plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines')

plotly_to_js (
  fig
  , output.html = TRUE
)

like image 115
imgschatz Avatar answered Jul 05 '26 12:07

imgschatz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!