Need Help to understand more deeply plotly; Scatter Color Input

2022-11-14T23:00:00Z

It’s been a bit since I’m training on plotly hardly but I still don’t understand some concepts.

The context :
I have a Matrix indexed by date_time, on the scatterGL i scatter lines depending on the input of how many lines i want without a problem. As I want to add an input wich is color and x_axis range I struggle to make the graphic take the color input. To be more specific I fail to understand how to give the graph example x1 = color_input and x2 = color_input2

Here you’ll find the codes the first one plot without any input but the matrix and the second how I’m trying to add the color input. In this case a rgba value that is red and yellow, and I’m trying to use figure.update_traces(selector=color_curve) without success.

def plot_graph(MATRIX, x_text, y):
    fig = go.Figure()
    for i in MATRIX:
        fig.add_trace(go.Scattergl(x=MATRIX[f'{i}'], y=y, name=i, textposition='top right', mode='lines+markers'))

    fig.add_trace(
        go.Scattergl(x=x_text, y=y, mode='text', name="Comments", text=x_text,
                     textfont=dict(size=10, color='#000000'),
                     textposition='top right', xaxis='x1'))
    fig.update_yaxes(minor_ticks="inside")
    fig.update_xaxes(minor_ticks="inside")
    for i in range(len(MATRIX)):

        if i == 0:
            fig.update_layout(
                xaxis=dict(gridcolor='#C5C5C5', nticks=10),
                yaxis=dict(gridcolor='#C5C5C5', nticks=10, autorange="reversed"))
        elif i == 1:
            fig.update_layout(xaxis2=dict(overlaying='x',
                                          side="top", position=0.985,
                                          showgrid=False))
        elif i == 2:
            fig.update_layout(xaxis3=dict(overlaying='x',
                                          side="top", position=0.97,
                                          showgrid=False))
        elif i == 3:
            fig.update_layout(xaxis4=dict(overlaying='x',
                                          side="bottom", position=0.035,
                                          showgrid=False))
        elif i == 4:
            fig.update_layout(xaxis5=dict(overlaying='x',
                                          side="bottom", position=0.020,
                                          showgrid=False))
        elif i == 5:
            fig.update_layout(xaxis6=dict(overlaying='x',
                                          side="bottom", position=0.005,
                                          showgrid=False))
    fig.update_layout(legend=dict(orientation="h", yanchor="bottom", y=1.04, xanchor="right", x=1),
                      margin=dict(l=0, r=0, t=150, b=0), xaxis=dict(side='top'))
    fig.update_layout(autosize=False, width=600, height=1200, plot_bgcolor="#FFFFFF")
    return fig.show()

def plot_graph_setting(MATRIX, y, x_text, border, color):
    figure = go.Figure()
    mnemonics = list(MATRIX)[0:6]
    y = y
    borders.update(border)
    color_curve.update(color)

    j = 1
    for key in mnemonics:
        figure.add_trace(go.Scattergl(x=MATRIX[key], y=y, mode='lines+markers', name=key, textposition='top right'
                                      , xaxis='x' + str(j)))
        j += 1

    figure.add_trace(
        go.Scattergl(x=x_text, y=y, mode='text', name="Comments", text=x_text,
                     textfont=dict(size=18, color='#000000'),
                     textposition='top right', xaxis='x1'))
    figure.update_yaxes(minor_ticks="inside")
    figure.update_xaxes(minor_ticks="inside")
    figure.update_traces(selector=color_curve)
    for i in range(len(mnemonics)):

        if i == 0:
            figure.update_layout(
                xaxis=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), range=borders[mnemonics[i]],
                           gridcolor='#C5C5C5', nticks=10),
                yaxis=dict(gridcolor='#C5C5C5', nticks=10, autorange="reversed"))

        elif i == 1:
            figure.update_layout(xaxis2=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                             side="top", position=0.985, range=borders[mnemonics[i]], showgrid=False))
        elif i == 2:
            figure.update_layout(xaxis3=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                             side="top", position=0.97, range=borders[mnemonics[i]], showgrid=False))
        elif i == 3:
            figure.update_layout(xaxis4=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                             side="bottom", position=0.035, range=borders[mnemonics[i]],
                                             showgrid=False))
        elif i == 4:
            figure.update_layout(xaxis5=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                             side="bottom", position=0.020, range=borders[mnemonics[i]],
                                             showgrid=False))
        elif i == 5:
            figure.update_layout(xaxis6=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                             side="bottom", position=0.005, range=borders[mnemonics[i]],
                                             showgrid=False))

    figure.update_layout(legend=dict(orientation="h", yanchor="bottom", y=1.04, xanchor="right", x=1),
                         margin=dict(l=0, r=0, t=150, b=0), xaxis=dict(side='top'))

    figure.update_layout(autosize=False, height=1200, width=600, plot_bgcolor="#FFFFFF")
    return figure.show()

Thanks everyone for the time and the attention.

HI @adwge , I did not understand what you are trying to achieve and the code you posted is not the best to understand

Maybe you could try to create a MRE?

(post deleted by author)

import dash
import pandas as pd
from dash import html, dash_table, dcc
import dash_mantine_components as dmc
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import numpy as np
import plotly.graph_objects as go

d = {"WOB": [0.076, 0.229, 0.749, 0.106, 0.296, 0.362, 0.565, 0.458, 0.078, 0.080, 0.973, 0.288, 0.957, 0.729, 0.337,
             0.900, 0.517, 0.154, 0.667, 0.916, 0.829, 0.079, 0.746, 0.693, 0.055, 0.755, 0.175, 0.315, 0.055, 0.281,
             0.625],
     "TORQ": [0.712, 0.039, 0.635, 0.239, 0.734, 0.477, 0.347, 0.189, 0.989, 0.946, 0.462, 0.755, 0.316, 0.652, 0.341,
              0.456, 0.387, 0.16, 0.655, 0.734, 0.277, 0.641, 0.044, 0.052, 0.962, 0.361, 0.607, 0.065, 0.824, 0.2,
              0.282, ]}
df = pd.DataFrame(data=d)
y = ["2022-04-14 15:33:46", "2022-04-14 15:33:48", "2022-04-14 15:33:50", "2022-04-14 15:33:53", "2022-04-14 15:33:55",
     "2022-04-14 15:33:57", "2022-04-14 15:33:59", "2022-04-14 15:34:01", "2022-04-14 15:34:03", "2022-04-14 15:34:05",
     "2022-04-14 15:34:07", "2022-04-14 15:34:09", "2022-04-14 15:34:11", "2022-04-14 15:34:13", "2022-04-14 15:34:15",
     "2022-04-14 15:34:17", "2022-04-14 15:34:19", "2022-04-14 15:34:21", "2022-04-14 15:34:23", "2022-04-14 15:34:25",
     "2022-04-14 15:34:27", "2022-04-14 15:34:29", "2022-04-14 15:34:31", "2022-04-14 15:34:33", "2022-04-14 15:34:35",
     "2022-04-14 15:34:37", "2022-04-14 15:34:39", "2022-04-14 15:34:41", "2022-04-14 15:34:43", "2022-04-14 15:34:45",
     "2022-04-14 15:34:47"]

app = dash.Dash(name="Mudlogging", suppress_callback_exceptions=True, update_title=None)
app.title = 'PyViewer - LIVE '
app.layout = html.Div(children=[
    dcc.Interval(id='my-interval', interval=30000),
    dmc.Group(position="center", grow=True, direction="column",
              children=[
                  dmc.MultiSelect(label="Fluide",
                                  data=["WOB", "TORQ"],
                                  id='dropdown-value1-live',
                                  searchable=True,
                                  persistence=False),
                  dmc.Group(direction="column", position="center", spacing="xs",
                            children=[
                                dmc.Select(label="Select memonic",
                                           data=["WOB", "TORQ"],
                                           id="select-fluide",
                                           style={"width": 200}, ),
                                dmc.ColorPicker(id=f"color-value-fluide",
                                                format="rgba", size="xs", ),
                                dmc.Group(direction="row",
                                          children=[
                                              dmc.NumberInput(label="Min", id="min-input", value=5, size="xs",
                                                              style={"width": 110}),
                                              dmc.NumberInput(label="Max", id="max-input", value=10, size="xs",
                                                              style={"width": 110}),
                                          ]),
                                dmc.Button("Submit", id="submit-changes"),
                                dcc.Graph(id='gr1-live',
                                          figure=go.Figure(
                                              layout=dict(autosize=False, height=1200, width=600, plot_bgcolor="white",
                                                          legend=dict(orientation="h", yanchor="bottom", y=1.04,
                                                                      xanchor="right", x=1),
                                                          margin=dict(l=0, r=0, t=150, b=0), xaxis=dict(side='top')),
                                          ))
                            ]),
              ])
])


@app.callback(
    Output("submit-changes", "n_clicks"),
    Output('gr1-live', 'figure'),
    Input("dropdown-value1-live", "value"),

    Input("select-fluide", "value"),
    Input("color-value-fluide", "value"),
    Input("min-input", "value"),
    Input("max-input", "value"),
    Input("submit-changes", "n_clicks"),
    prevent_initial_call=True
)
def update_figure(dropdown, selector_mnemonic, color, min_range, max_range, submit_setting):
    borders = {}
    color_curve = {}
    if dropdown is not None and submit_setting is None:
        fig = go.Figure()
        for i in dropdown:
            fig.add_trace(go.Scattergl(x=df[f'{i}'], y=y, name=i, textposition='top right', mode='lines+markers'))
        fig.update_yaxes(minor_ticks="inside")
        fig.update_xaxes(minor_ticks="inside")
        for i in range(len(dropdown)):

            if i == 0:
                fig.update_layout(
                    xaxis=dict(gridcolor='#C5C5C5', nticks=10),
                    yaxis=dict(gridcolor='#C5C5C5', nticks=10, autorange="reversed"))
            elif i == 1:
                fig.update_layout(xaxis2=dict(overlaying='x',
                                              side="top", position=0.985,
                                              showgrid=False))
            elif i == 2:
                fig.update_layout(xaxis3=dict(overlaying='x',
                                              side="top", position=0.97,
                                              showgrid=False))
            elif i == 3:
                fig.update_layout(xaxis4=dict(overlaying='x',
                                              side="bottom", position=0.035,
                                              showgrid=False))
            elif i == 4:
                fig.update_layout(xaxis5=dict(overlaying='x',
                                              side="bottom", position=0.020,
                                              showgrid=False))
            elif i == 5:
                fig.update_layout(xaxis6=dict(overlaying='x',
                                              side="bottom", position=0.005,
                                              showgrid=False))
        fig.update_layout(legend=dict(orientation="h", yanchor="bottom", y=1.04, xanchor="right", x=1),
                          margin=dict(l=0, r=0, t=150, b=0), xaxis=dict(side='top'))
        fig.update_layout(autosize=False, width=600, height=1200, plot_bgcolor="#FFFFFF")
        return None, fig
    elif submit_setting >= 1:
        figure = go.Figure()
        mnemonics = list(dropdown)[0:6]
        borders.update(selector_mnemonic=[min_range, max_range])
        color_curve[selector_mnemonic] = [color]

        j = 1
        for key in mnemonics:
            figure.add_trace(go.Scattergl(x=df[key], y=y, mode='lines+markers', name=key, textposition='top right'
                                          , xaxis='x' + str(j)))
            j += 1

        figure.update_yaxes(minor_ticks="inside")
        figure.update_xaxes(minor_ticks="inside")
        figure.update_traces(selector=color_curve)
        for i in range(len(mnemonics)):

            if i == 0:
                figure.update_layout(
                    xaxis=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), range=borders[mnemonics[i]],
                               gridcolor='#C5C5C5', nticks=10),
                    yaxis=dict(gridcolor='#C5C5C5', nticks=10, autorange="reversed"))

            elif i == 1:
                figure.update_layout(xaxis2=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                                 side="top", position=0.985, range=borders[mnemonics[i]],
                                                 showgrid=False))
            elif i == 2:
                figure.update_layout(xaxis3=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                                 side="top", position=0.97, range=borders[mnemonics[i]],
                                                 showgrid=False))
            elif i == 3:
                figure.update_layout(xaxis4=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                                 side="bottom", position=0.035, range=borders[mnemonics[i]],
                                                 showgrid=False))
            elif i == 4:
                figure.update_layout(xaxis5=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                                 side="bottom", position=0.020, range=borders[mnemonics[i]],
                                                 showgrid=False))
            elif i == 5:
                figure.update_layout(xaxis6=dict(tickfont=dict(color=color_curve[mnemonics[i]][0]), overlaying='x',
                                                 side="bottom", position=0.005, range=borders[mnemonics[i]],
                                                 showgrid=False))

        figure.update_layout(legend=dict(orientation="h", yanchor="bottom", y=1.04, xanchor="right", x=1),
                             margin=dict(l=0, r=0, t=150, b=0), xaxis=dict(side='top'))

        figure.update_layout(autosize=False, height=1200, width=600, plot_bgcolor="#FFFFFF")
        return submit_setting, figure
    elif dropdown is None or submit_setting is None:
        raise PreventUpdate
    return None


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

I’m using also DMC mantine components for the visual