I have created a chart using R code. Normally I store such charts as png files and they are easily loaded on a page in Sparkle. This time I created an enhanced chart, using the R package known as plotly. This chart has some embedded html code that lets the viewer of the chart interact with it dynamically. The resulting file is an html file rather than a png file. I can load the file in a web browser and it works perfectly.
My question is whether I can embed this dynamic chart, contained in an html file, on a page in Sparkle. I tried the embed function unsuccessfully, but I don’t really understand that function very well.
If I read you correctly Phil try this…
Place an Embedded container on your Sparkle canvas and then go over to the top right where Sparkle asks for your embedded content. Before you paste the Plotly code first place “<iframe> "then your Plotly code" </iframe>” and save and see if that works for you.
The “<iframe>” will allow you to place inline html or in your case a html Plotly page.
Thanks for your suggestion. I tried it as you specified, but was unsuccessful. When I published the site there was only a small transparent box where the plotly chart was supposed to be.
@Phil, I’m wondering if it s a SSL Certificate issue? Plotly would be SSL(ed) and if you are not then that is where the issue could lie?
In todays online world SSL Certificates are a must and when you don’t have one against the domain name you will have issues arising, and issues with search engine ranking.
I updated my domain SSL certificate and it is now secure. I was not worrying about that previously because my site involves no logins, credit cards, online purchasing, etc. But this has not solved the problem. I reinserted the embed content, republished the test site and the plotly chart was still not displayed.
@Phil, Mmmm ok I’m somewhat stumped now it what could be going wrong? Do you have a link that I can go and have a look at to see if I can see what the issue could be?
@Phil, I see what you mean plus that is a real lot of code!.. Tried for a while to see if I could get it to work, but a question… Is what you are showing me straight from Plotly or is the embedded code? From reading their documentation (https://help.plot.ly/embed-graphs-in-websites/) you can generate a html snippet of the chart you create and that is what we need to place in Sparkle within an <iframe>
I generated the chart (not yet dynamic) with the R function ggplot(). Then I converted the chart to a plotly dynamic chart with the ggplotly() function. Finally I saved the ggplotly() output in the file ggplotly_test.html using the saveWidget() function in the htmlwidgets package.
@Phil, I’ve never used Plotly but thank you for your details in how you got to where you are. Have you also tried it the way the Plotly help section instructs you in how too embed into a website?
You can publish that html file to your server (using a third party ftp app or via the web host file manager), and then integrate it in a page from a Sparkle embed.
where you replace URL with the address of the page on your server. An easy way to break this code is to use textedit (and many Mac editors) that replace the straight quotes with curly ones, so it’s probably best to first paste it into the settings of the Sparkle embed element.
The 100%'s in the code inform Sparkle that the content is flexible, so you’ll get the resize handles in the page, however if the linked page code isn’t responsive that won’t be very useful and the content will scroll if it doesn’t fit, once the page is published.