Can I somehow make a report in Plotly where the left side will be a text, which changes on a slider pick, and the right side is my chart? The way without using dash and too much javascript is preferred.
It should look like this:
Can I somehow make a report in Plotly where the left side will be a text, which changes on a slider pick, and the right side is my chart? The way without using dash and too much javascript is preferred.
It should look like this:
For people still looking for an answer:
Some plotly.graph_objects basics first:
Plotly figure is made up of 3 parts: Data (trace to be plotted), Layout (on which data is to be plotted), Frame (Data + Layout to be used for looping)
To answer your question to include text on the left side you will have to write the text as a annotation (layout). To include two charts on right use subplots (data). To update them with slider pick you will have to update them with Frame. Each frame will have Data+Layout which corresponds to that slider position.
Generic code flow:
Let's assume:
#Import plotly graph object
import plotly.graph_objects as go
#Getting different dates
dates = df['Dates'].unique().tolist()
#Plotting first instance
data=[]
#Fig 1
data_dict1 = {{
"x": list(df["X"]),
"y": list(df["Y1"]),
"type":"scatter"},
"ncol":2,"nrow":1 #Subplot location
}
#Fig 2
data_dict2 = {
"x": list(df["X"]),
"y": list(df["Y2"]),
"type":"scatter",
"ncol":2,"nrow":2 #Subplot location
}
data = [data_dict1,data_dict2] #combining both plots
#Layout and slider
layout = {
"sliders" : [{
#Enter required slider layout
,"steps": [] #should include this line in slider
}],
"annotations":[ {
#Input required annotations
}]
} # layout ends
#making Frames
frames =[]
for date in dates:
frame = {"data": [], "name": str(date),"layout":{"annotations":[]}} # Saving each data frame
dataset = df[df[Dates]==date] #subsetting data for a date
# Create charts for this subset data
#Fig 1
data_dict1 = {{
"x": list(dataset["X"]),
"y": list(dataset["Y1"]),
"type":"scatter"},
"ncol":2,"nrow":1 #Subplot location
}
#Fig 2
data_dict2 = {
"x": list(dataset["X"]),
"y": list(dataset["Y2"]),
"type":"scatter",
"ncol":2,"nrow":2 #Subplot location
}
#Adding this data to frame
frame["data"] = [data_dict1,data_dict2]
# Creating lines to be displayed using annotations
annote1 = {
#Add data for line 1
}
annote2 = {
#Add data for line 2
}
annote3 = {
#Add data for line 3
}
annote4 = {
#Add data for line 4
}
#Adding all annotations lines to frame
frame["layout"]["annotations"] = [annote1,annote2,annote3,annote4]
#Combinig all frames
frames.append(frame)
#Updating slider step
slider_step = {
"label": date,
"method": "update"}
#Adding step to layout slider
layout["sliders"][0]["steps"].append(slider_step)
#Combine everything
fig = go.Figure(data =data,layout = layout, frames =frames)
#View in browser
plot(fig, auto_open=True)
Hope the logic flow is clear!