How to display Plotly R plot on Angular UI

[kmaheshkulkarni]

Issue: We use R as a backend and Angular for the frontend. We analyze the data in R and send a final output of data in JSON format to Angular. Then in Angular, we give import that data in plotly.js for plotting graphs.
But The statistical plots were incorrect because R plotly provides the functionality to use statistical functions directly for plotting and that’s why the plot becomes editable in a statistical way but plotly js does not support statistical functions and the plots are displayed in a simple line or bar graph. R plotly can also embed ggplot (a package used to plot analytical plots) as ggplotly but this functionality is provided only by R, not by Plotly JS.

Solutions that are tried :
a. Write the plotly code in R and return the plot’s HTML to Angular. Use inner HTML or iframe to
embed the HTML code. But Angular does accept JavaScript code in HTML.
b. Write the plotly code in R and return plotly json from R. directly assign the JSON to angular plotly
object. Not worked as R return the code in HTML widget form.
c. Write the plotly code in R and post the plot on URL of the widget present in Angular. Attach a link
to the box/widget where we need to show the graph and make it accessible from R. Not possible in
Angular to make a URL out of a widget.
d. How to show these statistical graphs in Angular UI


I Hope you will solve these issue. Thank you in advance.

[cpsievert]

Thanks to @jcheng5 for pointing me in the right direction here...

Here's an outline of how this could work for htmlwidgets generally:

1. Make sure all of the widget’s JS/CSS dependencies are part of the base page. This includes the htmlwidgets.js file from the htmlwidgets package.

2. Insert the widget’s HTML into the page (if the widget is named x, use the result of as.character(htmltools::as.tags(x)))

3. Call HTMLWidgets.scheduleStaticRender()

NOTE: For plotly, getting (1) right can be tricky. At least currently, I think this should work if you include all the dependencies when you run htmltools::renderDependencies(p$dependencies) on a plotly object p.

[cpsievert]

Closing since this is more of a development question rather than something that I can address in plotly directly

[jcheng5]

Does htmltools::renderDependencies(p$dependencies) give you something different than htmltools::renderDependencies(htmltools::findDependencies(htmltools::as.tags(p)))? If so, use the latter.

[cpsievert]

Does htmltools::renderDependencies(p$dependencies) give you something different than htmltools::renderDependencies(htmltools::findDependencies(htmltools::as.tags(p)))?

Yes, good point, that adds the htmlwidgets.js file. I think that should also include dependencies under inst/htmlwidgets/plotly.yaml, but there currently aren't any listed there.

[kmaheshkulkarni]

Thanks, @cpsievert, @jcheng5 for your reply. We'll try it and then back to you. We hope this will work better.