Adding form to Dash/Plotly app

Question

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.

Answer 1

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)

Answer 2

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.