I have a working code for the following:
There are 3 dropdown menus.
- to select an X value
- to select a Y value
- to select a graph type (Bar chart, Line chart, or Bubble chart).
Here is my json file:
{
"Names": {
"0": "Alice",
"1": "Robert",
"2": "Garry",
"3": "Nate",
"4": "Karen",
"5": "Nick"
},
"Address": {
"0": "21 Main St",
"1": "19 Third St",
"2": "4 Church St",
"3": "5 High St",
"4": "9 Elm St",
"5": "06 Washingtom St"
},
"AreaCode": {
"0": "777",
"1": "421",
"2": "768",
"3": "345",
"4": "888",
"5": "123"
}}
Here is a python file:
import pandas as pd
import plotly.graph_objects as go
import numpy as np
df_data = pd.read_json("test.json")
button_x_list = []
button_y_list = []
button_graphs_list = []
colnames=df_data.keys()
for col in colnames:
button_x_list.append(
dict(
method="update",
label=col,
visible=True,
args=[
{"x": [df_data[col]]},
{"xaxis": {"title": col}},
],
)
)
button_y_list.append(
dict(
method="update",
label=col,
visible=True,
args=[
{"y": [df_data[col]]},
{"yaxis": {"title": col}},
],
)
)
button_graphs_list.append(
dict(
args=["type", "line"],
label="Line",
method="restyle"
)
)
button_graphs_list.append(
dict(
args=["type", "bar"],
label="Bar",
method="restyle"
)
)
button_graphs_list.append(
dict(
args=["type", "bubble"],
label="Bubble",
method="restyle"
)
)
button_x_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_x_list,
pad={"r": 15, "t": 10},
x=0.03,
y=1.08,
)
button_y_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_y_list,
pad={"r": 15, "t": 10},
x=0.23,
y=1.08,
)
button_graphs_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_graphs_list,
pad={"r": 15, "t": 10},
x=0.46,
y=1.08,
)
annotation_x = dict(
text="X:",
showarrow=False,
x=0,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
annotation_y = dict(
text="Y:",
showarrow=False,
x=0.2,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
annotation_graphs = dict(
text="Graph:",
showarrow=False,
x=0.4,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
fig = go.Figure(go.Scatter(x=df_data["Names"], y=df_data["AreaCode"], mode="markers"))
fig.update_layout(
updatemenus=[button_x_dict, button_y_dict, button_graphs_dict], annotations=[annotation_x, annotation_y, annotation_graphs],
title="Plotly Demo",
xaxis={"title":"Names"}, yaxis={"title":"AreaCode"}
)
fig.show()
It works well but there is one thing I’m trying to change.
Here I’m hardcoding the initial type of the graph(Scatter) and the values(df_data["Names"] and df_data["AreaCode"]):
fig = go.Figure(go.Scatter(x=df_data["Names"], y=df_data["AreaCode"], mode="markers"))
What I want instead is an empty graph, and only after the user selects all the parameters from the dropdown menus, then the values are displayed on the graph.
Is there a way to do so without creating additional dependencies?
I’ve seen Plotly FigureWidget but it doesn’t work as it creates an additional dependency.
>Solution :
How about something like this?
fig = go.Figure(go.Scatter(x=pd.Series(dtype=object), y=pd.Series(dtype=object), mode="markers"))
That way it starts out with an empty series. In my full code (below) I also added a blank button to the drop down with null data so the user doesn’t think they’re actually looking at Names, AreaCode, or Address. Lastly I started out with the x-axis and y-axis unlabeled (blank string).
import pandas as pd
import plotly.graph_objects as go
import numpy as np
df_data = pd.read_json("test.json")
button_x_list = []
button_y_list = []
button_graphs_list = []
colnames = df_data.keys()
null_x = dict(
method="update",
label="",
visible=True,
args=[
{"x": ["" for _ in range(len(df_data))]},
{"xaxis": {"title": ""}},
],
)
null_y = dict(
method="update",
label="",
visible=True,
args=[
{"y": ["" for _ in range(len(df_data))]},
{"yaxis": {"title": ""}},
],
)
button_x_list.append(null_x)
button_y_list.append(null_y)
for col in colnames:
button_x_list.append(
dict(
method="update",
label=col,
visible=True,
args=[
{"x": [df_data[col]]},
{"xaxis": {"title": col}},
],
)
)
button_y_list.append(
dict(
method="update",
label=col,
visible=True,
args=[
{"y": [df_data[col]]},
{"yaxis": {"title": col}},
],
)
)
button_graphs_list.append(dict(args=["type", "line"], label="Line", method="restyle"))
button_graphs_list.append(dict(args=["type", "bar"], label="Bar", method="restyle"))
button_graphs_list.append(
dict(args=["type", "bubble"], label="Bubble", method="restyle")
)
button_x_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_x_list,
pad={"r": 15, "t": 10},
x=0.03,
y=1.08,
)
button_y_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_y_list,
pad={"r": 15, "t": 10},
x=0.23,
y=1.08,
)
button_graphs_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_graphs_list,
pad={"r": 15, "t": 10},
x=0.46,
y=1.08,
)
annotation_x = dict(
text="X:",
showarrow=False,
x=0,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
annotation_y = dict(
text="Y:",
showarrow=False,
x=0.2,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
annotation_graphs = dict(
text="Graph:",
showarrow=False,
x=0.4,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
fig = go.Figure(
go.Scatter(x=pd.Series(dtype=object), y=pd.Series(dtype=object), mode="markers")
)
fig.update_layout(
updatemenus=[button_x_dict, button_y_dict, button_graphs_dict],
annotations=[annotation_x, annotation_y, annotation_graphs],
title="Plotly Demo",
xaxis={"title": ""},
yaxis={"title": ""},
)
fig.show()
Here is what it looks like initially:
