We Keep Coding

Copy content of variable into clipboard when rendering html with voila and Jupyter Hub (injecting JS via Ipython??)

I am rendering an Html page out of a jupyter notebook stored in a server using Jupyter HUB.
When using voila I would like to create a button that will copy into the clipboard the content of a particular variable (text).
The most simple example to reproduce the situation would be as follows.
I try to inject JS via Ipython using the code that I got here: (Copy output of a JavaScript variable to the clipboard)
A button should fire the code and put the text into the clipboard. But it does not.
import ipywidgets as widgets
from IPython.display import display, HTML, Javascript
mybtn = widgets.Button(description='copy to clipboard',button_style='success')
def mybtn_event_handler(change):
display(Javascript('''var cb = document.getElementById("cb");
cb.value = 'asdfasdfasdfasdfasdfasdf';
cb.style.display='block';
cb.select();
document.execCommand('copy');
cb.style.display='none';'''))
mybtn.on_click(mybtn_event_handler)
display(mybtn)
This does not work in a jupyter hub. I guess because actually you are not running the code in the local machine.
Any idea how to deal with this situation?
Actually this problem is encountered in other situations in which with Ipython you can interact with the local browser when rendering a notebook with voila locally. For instance using the webbrowser module to open a new tab is easy but it does not work the moment the notebook is run in the jupyter HUB.
Any idea?
NOTE: The code does not produce an error, in the log simply appears: <IPython.core.display.Javascript object>
NOTE2: ran locally actually this code does not work, it produces:
Javascript error adding output!
TypeError: Cannot set property 'value' of null
See your browser Javascript console for more details.

According to documentation - you should wrap your onclick method output with widgets.Output(). So in order to run some Javascript with a button click you should do something like this:
import ipywidgets as widgets
from IPython.display import display, HTML, Javascript
mybtn = widgets.Button(description='copy to clipboard',button_style='success')
output = widgets.Output()
display(mybtn, output)
def mybtn_event_handler(b):
with output:
display(Javascript('''console.log("Success");'''))
mybtn.on_click(mybtn_event_handler)

Display / Render an HTML file inside Jupyter Notebook on Google Colab platform

I am using Google Colab to work create maps with Python 3.0 and I have done so using Basemaps. I am next trying to create similar maps using Google Maps. There are two python packages that I have located namely gmaps and gmplot. It seems as if gmaps requires a google API but gmplot does not hence I am using gmplot.
With gmplot, I am able to create a file 'my_map.html' which if I download to my local desktop, I can open in a browser and see the map correctly.
However I would like to see the map in the notebook output cell without downloading to the local machine. The following image is a screenshot of what I have tried ... there is no error, but no display either.
is there some command like %matplotlib inline that i need execute to be able to display the contents of the file in the output cell? or is there a better solution

Try full path to your file: /content/my_map.html
The code should be:
import IPython
IPython.display.HTML(filename='/path/to/your/filename')

Please Try Following code:
from IPython.display import IFrame
IFrame(src='path/to/your/filename.html', width=900, height=600)
It did work for me. :)

This solution is not working for me if the html contains images located on colab or in your (mapped) google-drive:
IPython.display.HTML('<img src="/content/elmo_1.jpg">') # can't find image
IPython.display.HTML('<img src="/content/gdrive/My Drive/elmo_1.jpg">') # can't find image
IPython.display.HTML('<img src="/content/gdrive/My%20Drive/elmo_1.jpg">') # can't find image
It works, however, with standard url:
IPython.display.HTML('<img src="https://github.com/blablabla/elmo_1.jpg?raw=1">')

Colab won't display local file images in html. You need to convert a png file to base64
encoded = base64.b64encode(open(png_file_name, "rb").read())
And show image using
<img src=f"data:image/png;base64,{encoded.decode('utf-8')}" alt="" width="600" height="400">

How to access static image when using Plotly python API

Following the plotly tutorial on getting static images through the python api.
When I execute:
import plotly as py
py.offline.plot(data,
show_link=False,
image_filename='pandas-bar-chart-binned',
image='png')
My browser auto opens and I get both an HTML file in my parent directory and an image of the chart downloads from the browser, which is to be expected from the docs.
But if I execute:
import plotly as py
py.offline.plot(data,
show_link=False,
image_filename='pandas-bar-chart-binned',
image='png',
auto_open=False)
The HTML file is generated in my parent directory, but no image is produced. If I store it as a variable, I get a string that represents the location of the HTML file.
Is there a save_as function for offline, as there is for image?
import plotly as py
py.plotly.image.save_as(data, filename='pandas-bar-chart-binned.png')
I have found a handful of suggestions, but they all seem to point back to opening up a browser rather than saving directly through the file system.

export pdf using plotly python

I generate a plotly graph using this:
import plotly.plotly as py
import plotly.graph_objs as go
fig = go.Figure(data=data, layout=layout)
plot_url = py.plot(fig, filename='stacked-bar')
I tried generating a pdf using:
from xhtml2pdf import pisa
result_file = open('report.pdf', "w+b")
pisa_status = pisa.CreatePDF(
url,
dest=result_file)
result_file.close()
But I end up getting a pdf file with the url on it instead of the graph.
How can I export the plotly graph into a pdf? One the webpage, when I click the export button I am able to generate a jpeg and png but not a pdf. Also, I'm unable to control the size of the graph when exporting the, how can I control the size? Stretch out the graph making it a little wider.
Thanks.

The APIs have now changed, so I thought I'd post an update..
The new way of doing it is to use plotly.io.write_image
Here is an example:
plotly.io.write_image(fig, 'output_file.pdf', format='pdf')
The following formats are supported: png, jpg (or jpeg), webp, svg, pdf

According to documentation for offline usage https://plot.ly/python/offline/ you can export images with:
plotly.plotly.image.save_as(figure, 'my_plot.png')
But to export pdf you have to have a paid account. Using free account you can export only png or jpg formats (100 API calls a day). But not pdfs.
In case if you stack with the error like:
exceptions.PlotlyError(return_data['error'])
than there is a chance that you have some authentication problems to access Plotly API. Make sure you have an account and configure you ~/.plotly/.credentials with correct user name and api_key (you can find it in profile settings).
To control the size of the graph you need to setup your layout accordingly.

Is it possible to upload Bokeh plots to wordpress.com site?

I want to start doing data visualisation with Bokeh and upload it to my wordpress, and so I generated some html like so
from bokeh.plotting import figure,output_file,save
from bokeh.embed import file_html
output_file("line.html")
p=figure(plot_width=400,plot_height=400)
p.circle([1,2,3,4,5],[6,7,2,5,4],size=20,color='navy',alpha=0.5)
save(p)
I then attempted to embed the plot by pasting the saved html into wordpress.com's "HTML" tab when making a new post, and it simply erases it.
This same method works perfectly on blogger.
Is there any way to get past this for wordpress?
Thanks!

You might try the EmbedIt plugin: http://www.matteoionescu.com/wordpress/embed-html/. Just copy the entirety of your Bokeh-generated html file to a "snippet", and embed the snippet in your wordpress post.
I got it to work on my service-hosted wordpress site (not wordpress.com). The plot and tools work fine, but the left edge of the plot always appears in the center of the page (so the plot itself is not centered).
Worth a shot, but as Big red said, javascript might not be allowed at all.