Ok, So I want to go one step further. I don't know if it is possible with a dash.
I want to create a form ( probably WTForm from Flask ).
The form should have date and annotation/comments section.
When someone submits a form, it will save to the database.
Then dash will read it and show on the graph.
My graph looks like that:
On the x-axis will be date from FlaskForm representing Event that it was stored in the database, and annotation will be showed in the graph itself when I hover to that exact date
Something similar to this one:
And now, can you please tell me if it's possible? What tools should I use it? It's just a concept, but I think will be helpful for everyone.
In plotly you can display text using annotation. Example:
import plotly.plotly as py
import plotly.graph_objs as go
trace1 = go.Scatter(
x=[0, 1, 2, 3, 4, 5, 6, 7, 8],
y=[0, 1, 3, 2, 4, 3, 4, 6, 5]
)
trace2 = go.Scatter(
x=[0, 1, 2, 3, 4, 5, 6, 7, 8],
y=[0, 4, 5, 1, 2, 2, 3, 4, 2]
)
data = [trace1, trace2]
layout = go.Layout(
showlegend=False,
annotations=[
dict(
x=2,
y=5,
xref='x',
yref='y',
text='max',
showarrow=True,
arrowhead=7,
ax=0,
ay=-40
)
]
)
fig = go.Figure(data=data, layout=layout)
iplot(fig)
Ref : https://plot.ly/python/text-and-annotations
Hope that answers your question. Also refer to mode='lines+markers+text' in scatter plot(Adding Text to Data in Line and Scatter Plots section of plotly doc)
Pretty late here, but check out dbc.Input from dash-bootstrap-components.
https://dash-bootstrap-components.opensource.faculty.ai/l/components/input
There are form types, inputs, etc.
How I would do it is add a few inputs, etc. as well as a submit button. The submit button would trigger the function that creates the graphs, adds the relevant things, and returns the figure to the graph.
Related
I am trying to mark the last value of the line chart with a big red dot in plotly express python, could someone please help me?
I am successful in building the line chart but not able to annotate the dot.
Below is my dataframe and I want the last value in the dataframe to be annotated.
Below is the line chart created and I want my chart to be similar to the second image in the screenshot
Code I am working with:
fig = px.line(gapdf, x='gap', y='clusterCount', text="clusterCount")
fig.show()
The suggestion from gflavia works perfectly well.
But you can also set up an extra trace and associated text by addressing the elements in the figure directly instead of the data source like this:
fig.add_scatter(x = [fig.data[0].x[-1]], y = [fig.data[0].y[-1]])
Plot 1
Complete code:
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
gapdf = pd.DataFrame({
'clusterCount': [1, 2, 3, 4, 5, 6, 7, 8],
'gap': [-15.789, -14.489, -13.735, -13.212, -12.805, -12.475, -12.202, -11.965]
})
fig = px.line(gapdf, x='gap', y='clusterCount')
fig.add_scatter(x = [fig.data[0].x[-1]], y = [fig.data[0].y[-1]],
mode = 'markers + text',
marker = {'color':'red', 'size':14},
showlegend = False,
text = [fig.data[0].y[-1]],
textposition='middle right')
fig.show()
You could overlay an additional trace for the last data point with plotly.graph_objects:
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
gapdf = pd.DataFrame({
'clusterCount': [1, 2, 3, 4, 5, 6, 7, 8],
'gap': [-15.789, -14.489, -13.735, -13.212, -12.805, -12.475, -12.202, -11.965]
})
fig = px.line(gapdf, x='gap', y='clusterCount')
fig.add_trace(go.Scatter(x=[gapdf['gap'].iloc[-1]],
y=[gapdf['clusterCount'].iloc[-1]],
text=[gapdf['clusterCount'].iloc[-1]],
mode='markers+text',
marker=dict(color='red', size=10),
textfont=dict(color='green', size=20),
textposition='top right',
showlegend=False))
fig.update_layout(plot_bgcolor='white',
xaxis=dict(linecolor='gray', mirror=True),
yaxis=dict(linecolor='gray', mirror=True))
fig.show()
I am creating a line scatter plot using plotly python API. There are old and new data plotted in y-axis with the date in the x-axis.I would like to center the graph such that one part of the graph is old data and another half of the graph is new data. How can this be done in plotly?In the attached image, the blue one represents old and orange represents new data. How old and new can be centered such that one part of the graph is old data and another half of the graph is new data?
Plotly_Line_Scatterplot
Building on the manual axes example from the Plotly documentation:
import plotly.plotly as py
import plotly.graph_objs as go
xold=[5, 6, 7, 8]
yold=[3, 2, 1, 0]
xnew=[10, 11, 12, 13, 14, 15, 16, 17, 18]
ynew=[0, 1, 2, 3, 4, 5, 6, 7, 8]
oldData = go.Scatter(xold, yold)
newData = go.Scatter(xnew, ynew)
data = [oldData, newData]
lenOld = max(xold) - min(xold)
lenNew = max(xnew) - min(xnew)
lenX = 2*max(lenOld,lenNew)
layout = go.Layout(
xaxis=dict(
range=[min(xnew)-lenX/2, min(xnew)+lenX/2]
)
)
fig = go.Figure(data=data, layout=layout)
plot_url = py.plot(fig, filename='axes-range-manual')
For simplicity I have used integers as x-values rather than using dates but the same principle will apply.
Please note, I don't have plotly installed at present so I haven't tested this code.
I have made a scatterplot using Plotly (python), and i want to connect the dots using something similar to geom_smooth() function.
Something like below image :
You should be able to do it by setting the shape='spline' when defining the line. here is the plotly example
trace2 = go.Scatter(
x=[1, 2, 3, 4, 5],
y=[6, 8, 7, 8, 6],
mode='lines+markers',
name="'spline'",
text=["tweak line smoothness<br>with 'smoothing' in line object"],
hoverinfo='text+name',
line=dict(
shape='spline'
)
)
See an example here: plotly line charts
In the minimal example below, how can I highlight, say, the highest point by changing its fill color to red? I know in this case it's easy enough just to draw over the old glyph: p.circle(3, 8, fill_color='red'), but my actual plot is more complicated. So I'm hoping to change something inside the variable r instead, if this is possible.
from bokeh.plotting import figure, output_file, show
output_file("dimensions.html")
p = figure(plot_width=700)
p.plot_height = 300
r = p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)
show(p)
If you want just one circle to be a different color, then there are only two options:
send all the colors:
p.circle(x, y, color=["blue", "blue", "red", "blue", "blue"], size=10)
Have separate renderers:
p.circle([1, 2, 4, 5], [2, 5, 2, 7], color="blue", size=10)
p.circle(x=3, y=8, color="red", size=10)
There was some exciting new work recently added to GH master to make a start for adding "computed transforms" so in the near future it should be possible to define a custom color mapper for a single glyph, but that functionality does not exist yet as of version 0.11.1
Note from maintainers: The specifics of this question concern the bokeh.charts API which is obsolete and was removed several years ago. In modern Bokeh, specify toolbar_location:
p = figure(toolbar_location=None)
OBSOLETE:
I don't seem to be able to remove the toolbar from a bokeh Bar chart. Despite setting the tools argument to None (or False or '') I always end up with the bokeh logo and a grey line, e.g. with this code:
from bokeh.charts import Bar, output_file, show
# prepare some data
data = {"y": [6, 7, 2, 4, 5], "z": [1, 5, 12, 4, 2]}
# output to static HTML file
output_file("bar.html")
# create a new line chat with a title and axis labels
p = Bar(data, cat=['C1', 'C2', 'C3', 'D1', 'D2'], title="Bar example",
xlabel='categories', ylabel='values', width=400, height=400,
tools=None)
# show the results
show(p)
However, when I try the same with a bokeh plot, it works perfectly fine and the toolbar is gone, e.g. with this code:
from bokeh.plotting import figure, output_file, show
output_file("line.html")
p = figure(plot_width=400, plot_height=400, toolbar_location=None)
# add a line renderer
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2)
show(p)
Does anyone know what I'm doing wrong?
If you want to remove the logo and the toolbar you can do:
p.toolbar.logo = None
p.toolbar_location = None
Hope this resolves your problem
On any Bokeh plot object you can set:
p.toolbar_location = None