I need to use javascript-visualization packages in R like plotly and dygraphs and show the generated plots in my web page. The generated plot needs to be updated whenever the user interacts with other HTML elements in the webpage.
I have considered and have been disappointed in the Shiny server way to integrate the UI with plotting because it limits the developer's way of having full control over the UI using javascript, otherwise it's great.
Until now I have found that I can embed the htmlwidgets file in an IFrame to show the plot, but as discussed in this post: Embedding an R htmlwidgets into existing webpage, and in general, Iframes are considered bad practice, and thus would like to do this: Answer to the above-linked question.
But the problem is that every time I regenerate a plot using plotly or dygraph and save them using saveWidget() function of htmlwidgets package the generated plot file has a different id for the div of the plot generated. How can I embed a div present in an external HTML file(with srcs to even more html/css/js files) whose id is changing every time I generate the plot file?
I would suggest I frame to pass form and using Shiny. That would not result in recreating the wheel effort in using a ready made server.
Related
I have a system build in PHP where I take a pdf and place it as a background and then on a second layer place text on top of it with coordinates. This makes that managing the two different parts are easy. Because the initial pdf is difficult to reproduce in html. So html2pdf is not an option. I tried it but because of all the different lines and sections and text the library cannot manage it.
Base PDF example
Because of reasons I am now looking to replicate this functionality in javascript. So I was wondering if something similar is possible in jsPDF. Or any other library.
After a long and tedious search I found that PDF-LIB is what I needed. They allow to pull in a existing pdf and alter it by writing ontop of it.
I did experience some issues with pulling in the pdf but that can be solved. It was mostly because of fetch() method. But they allow Base64 inport.
I am working on a custom widget for Jupyter Notebook. The widget does not automatically load when a user opens their notebook, due mainly to the widget state not being found in the kernel. The feature at hand is to display an image instead, until the notebook loads.
I have determined that a cell containing the following:
from IPython.display import Image
img = Image(filename="eggsnspam.png", width=500)
display(img)
will reload its image properly when the user loads the notebook.
The widget has code in it to generate a PNG "snapshot" image of the widget. I want to show this image such that:
When the user loads the notebook and the widget state is not available, the user sees the serialized image.
When the user runs the cell that generates the widget, the user sees the widget and not the image.
I have tried researching several ways of dynamically showing or hiding the image, but nothing has worked. I believe the most promising untried approach is to show the Image and the widget at the same location in the output cell, rendering the widget in front of the Image in the Z order. However I don't know how to lay out the two to accomplish this.
It is necessary to manage this in the widget JS and/or Python code, and not from code cells in the notebook. Additionally, the widget has no background attribute, and I have not yet learned how to create one. (Discussions prior to my involvement in this project liked the idea of setting the background to the desired image.)
The jp_doodle canvas widget has a "snapshot" feature
which stores an image of the canvas. I think you could
use it do do what you are describing.
Please see:
https://nbviewer.jupyter.org/github/AaronWatters/jp_doodle/blob/master/notebooks/Feature%20demonstrations/Snapshot.ipynb
from the jp_doodle widget implementation
https://github.com/AaronWatters/jp_doodle
which has many examples of displaying images in canvases.
I'm using dc.js to develop crossfilter charts. Such as rowcharts, barcharts, etc. I'm trying to figure out of how to screen shot the whole page so a user can save and email with all their filters as a gif file. I'm using html2canvas js file to screen shot the whole page. The challenge is that I have to use IE11 and I'm aware its limitation (implement promise.js and polyfill.min.js). As a test, i created a button that will screenshot the page and append the body. The screenshot appears but I dont see any dc charts and the title or text appear different vs my actual page. It seems that it screenshot without any css changes or html2canvas.js file doesn't read SVGs. Im not sure if i'm doing this correctly. Is there a specific way in order to have the charts appear in the screenshot and how to make html2canvas recognize external CSS file or dc.js charts? Is that possible or are there any other js library similar to html2canvas that can capture the whole page with dc.js charts in them?
Please I need help. Deadline is coming and I'm still researching on this.
I have three embedded data ED1, ED2, ED3 in my survey. They are numbers generated by math operations. I want to use those embedded data to show the respondents a pie chart based on the calculated embedded data values.
Could you help me how can i do that by using JavaScript in Qualtrics.
Thank you
You can add javascript libraries to Qualtrics by either embedding it in your template (preferred) or the html for one of your questions. From there, it's matter of selecting your preferred charting library (e.g., chart.js), linking it to your template, pulling your embedded data variables, and letting your selected library work it's magic.
The details are going to depend on which library you select.
I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?
Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.
You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.
The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.