Generate another plot from data obtained from hovering over the one graph and a pandas dataframe

📊 Plotly Python
1

I have generated a bar graph from a pandas dataframe. I have another dataframe and on hovering over the graph I get the info and there is a common field between the hover info and another dataframe.

So what I want is that whenever I hover over the graph, I shall get a graph as a modal (a dialog box/popup window that is displayed on top of the current page) generated from the hover info of the previous graph and that second dataframe.

Is it possible to achieve through python in plotly? If not then is it possible to have a hyperlink type something such that whenever we click on the hovered part it redirects to a page and show us the desired plot which we want to het as a modal using the same informations.

I’m stuck at this for about a week. Kindly help.

Thanks.

2

You can use the component property hoverData of your graph as an input in a callback function.
https://dash.plotly.com/interactive-graphing

3

Thanks @atharvakatre but it will update the current graph on which we are hovering.

What I want is that new graph which we can generate after hovering would come as a modal or if possible then that particular hovered part act as a hyperlink and then on clicking it takes me to another page where we can show that another graph.

Is that possible through python in plotly ?

1 Like
4

@Ahriman01 if you are using dbc.Modal you can use the is_open prop to toggle the modal.

In the below example I have displayed the same figure inside the modal as well, but you can change it by adding another output to the callback function to the figure id “modal_graph” and returning the figure based on the x and y value from the hoverData.

modal on hoverData
modal on hoverData1440×844 3.29 MB 

import plotly.express as px
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

modal = html.Div(
    [
        dbc.Modal(
            [
                dbc.ModalHeader("Modal Header"),
                dbc.ModalBody([
                    html.H4(id='hover_info'),
                    dcc.Graph(
                        id='modal_graph',
                        figure=fig
                    )
                ]),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
            centered=True
        ),
    ]
)

app.layout = dbc.Container([
    dbc.Row([
        html.H2('Dash is Awesome!')
    ]),
    dbc.Row([
        dbc.Col(
            dcc.Graph(
                id='my_graph',
                figure=fig
            )
        )
    ],justify='center'),
    modal
])

@app.callback(
    Output("modal", "is_open"),
    Output("hover_info","children"),
    [Input("my_graph", "hoverData"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(hover_data,close_button, is_open):
    if hover_data or close_button:
        x = hover_data['points'][0]['x']
        y = hover_data['points'][0]['y']
        text = "x = "+str(x)+" & y = "+str(y)
        return not is_open,text
    return is_open,None

if __name__ == "__main__":
    app.run_server(debug=True,port=8006)