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!

Installing and using plotly.js and dashboard.ly alongside ipython Jupiter installation

Hi all,

I currently have a local Python environment setup with the pandas and plotly libraries.

I’ve noticed that the plotly Python library doesn’t feature any of the interactive tooltips when you hover over a graph produced in the Jupiter notebook.

Therefore I assume i need to install the llotly.js library and send data from pandas dataframes to a HTML document and inside that HTML make reference to the .js library.

Can you please outline the process how I would get from having data I can graph using the plotly library (python API in Jupiter notebook) to having an interactive graph which makes use of the. Js plotly library.

Then secondly I’m assuming this can be done as well (install the dashboard.ly library locally) - because it is also on github.

How does one install the dashboard library locally and then get from data displayed in the python notebook to being displayed on a dashboard.

Do you have to: ipython > HTML/js/CSS files > upload or point to the file paths to add to daahboard?

(End result is I want to analyse data in Jupiter and then present or visualise it using the interactivity of the .js library for tooltips and the utility of the daahboard library to easily group related graphs.

Many thanks

Hmm. Strange. All plotly graphs should be interactive by default inside a Jupyter Notebook.

Which plotly command have you tried?

Just plot and iplot for a histogram the most basic examples I could find in
the documentation

Etienne,

If all graphs are meant to be interactive inside the Jupiter notebook them
does that mean the python module calls on the plotly.js JavaScript library
to plot the data and make it interactive inside the notebook.

Secondly does that mean that instead of a workflow to put data analysis on
a dashboard needing to be: graph pandas data in ipython > send to js plotly
library > somehow add to daahboard it could change to 1. Plot data in
ipython with pandas then > add to local installation of dashboardly ( I
assume you can have a local installation now it’s open sourced)? - though
I’m not sure how the dashboard would work if you would have to point to
file names in HTML to get them to appear on the dashboard

In general the Python API is just an interface for using plotly.js to make graphs. Plots will always be rendered using plotly.js. There are two options using the Python API, normal (online) mode, or offline mode. You can find more information about offline mode here: https://plot.ly/python/offline/.
In general the online mode will send plot details that you’ve specified in Python to our servers, which will render your plot for you and host it on the Plotly cloud. Thus you can access these after you sign in at plot.ly/organize.
In offline mode, the plots are rendered locally, and in order to embed these plots onto a local dashboard, or other webpages, you’d need to extract the html responsible for generating the plot (which can be found in a div tag) and place this code into the appropriate place in your dashboard html.

Thanks Yandev and Kevin,

Yandev thanks for explaining that the output into the python notebook is
infact from the plotly.js library.

Can you please explain how I can install dashboardly locally if that’s
possible.

Then you mention the need to output or extract the HTML for a given plot
from a div to be able to then put it on a web page or in a dashboardly
dashboard. can you give and example or further explain this process.

I’ve been looking at the github documentation for dashboardly I’m not sure

  1. how to install dashboardly or 2) how to output graphs from ipython to
    HTML to then push to the dashboard template (where is this template)?

There are some instructions here: https://github.com/plotly/dashboards

Thanks Yandev,

Yes there are some instructions there for a static dashboard template
however I’d like to be able to setup what’s over here in this repository…
how ever I can’t find any instructions on installing it.

However in the case of either repositories repositories I don’t understand
how they work locally when they keep asking for a URL of a graph you want
to display on your dashboard?

Both in the dashboard demo on plotly website and all the example demos it
just says sign up for an account, create a graph, add a URL and taaddaa you
have a dashboard.

Are the URLs able to be replaced with local html file paths or can you
extract the JavaScript with a command and place it in your own html
template?

I’d like to be able to drag and drop graphs created on my local machine
onto various dashboards