Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Hoover events python offline mode

Hi there,

I’m trying to replicate the Capturing Hover Events example ( [https://plot.ly/python/hover-events/]) in a python notebook. I added the javascript code in a custom.js and also the css presented in a custom.css presented. In online mode, I manage to replicate the example and capture hoover events and display images when hoovering the bars. But in offline mode, there is only the bar chart that is displayed without the custum hoover events. I guess it is something related with the javascript code and that it should be adapted for offline mode but I really don’t know javascript. Is there anyone who knows what could I do ?

Here’s the python code I used (just an adaptation of the example for offline mode)


from IPython.display import display, HTML
import plotly.graph_objs as go
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import os

init_notebook_mode(connected=True)

data = [
    go.Bar(
        x=['Bob Dylan', 'The Beatles', 'David Bowie', 'Randy Newman', 'The Rolling Stones', 'Madonna', 'Frank Sinatra', 'The Beach Boys', 'Marvin Gaye', 'Prince', 'The Kinks', 'Elvis Presley', 'Tom Waits', 'U2', 'The Clash', 'Johnny Cash', 'Kate Bush', 'The Supremes', 'The Smiths', 'Al Green', 'Pulp', 'Chuck Berry', 'Elvis Costello and the Attractions', 'Neil Young', 'Stevie Wonder', 'Ray Charles', 'The Pogues', 'Grace Jones', 'Bill Withers', 'The Who', 'Paul Simon', 'Roy Orbison', 'Arctic Monkeys', 'Bruce Springsteen', 'The Police', 'Rod Stewart', 'Steve Earle'],
        y=[24, 19, 9, 8, 8, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
        name='Number of songs per artist'
    )
]

layout = go.Layout(
    title="Number of songs listed in the Guardian's<br><em>Top 1,000 Songs to Hear Before You Die</em> per artist with 4 or more songs",
    font=dict(
        family='Georgia, serif',
        color='#635F5D'
    ),
    plot_bgcolor='#EFECEA'
)
fig = go.Figure(data=data, layout=layout)
plot_url_local = plot(fig)
os.path.split(plot_url_local)[1]
local_export = '<iframe id="plot" src="' + str(plot_url_local) + '" seamless></iframe>'

display(HTML(local_export ))
display(HTML('<img id="hover-image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">'))

I work on python 2.7., plotly 2.0.15, and jupyter 4.3.0.

Thanks for your advice