How to do to display loading status animation on the Chart

Dash Python
1

Hi Everyone,

I have a script to display chart with respect to drop down selection interval. I would like to display loading animation when view chose the selection. Is it possible to implement this? If so, pls advise to me. My function to display the chart is as follows:

def display_chart_v(csv_file_1, start_time_str, v_num, tm, v_limit):
    df = pd.read_csv(csv_file_1, na_values=['NAN'])
    df['TS'] = pd.to_datetime(df['TS'])
    df = df[df['TS'] >= start_time_str]
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=df["TS"], y=abs(df[f'v{v_num}_x']), name='Max X', yaxis='y', line=dict(color="red")))
    fig.add_trace(go.Scatter(x=df["TS"], y=abs(df[f'v{v_num}_y']), name='Max Y', yaxis='y', line=dict(color="orange")))
    fig.add_trace(go.Scatter(x=df["TS"], y=abs(df[f'v{v_num}_z']), name='Max Z', yaxis='y', line=dict(color="greenyellow")))
    fig.add_trace(go.Scatter(x=df["TS"], y=[v_limit] * len(df), mode='lines', name=f'Limit ({v_limit}mm/s)', line=dict(color='greenyellow', dash='dash')))
    fig.update_layout(
        title=f"V{v_num} - Maximum Vibration (mm/s) [1min interval]",
        title_x=0.5, title_y=0.85,
        yaxis=dict(title="Max. Vibration Velocity (mm/s)", side="left", range=[0, v_limit + 3], zeroline=False,
                   gridcolor='lightgrey',
                   mirror=True, showline=True, linecolor='grey', ticks='outside'),
        xaxis=dict(gridcolor='lightgrey', side="bottom", showline=True, linecolor='grey', linewidth=1, mirror=True,
                   ticks='outside'),
        legend=dict(orientation="h", y=-0.30),
        plot_bgcolor='rgba(0, 0, 0, 0)',  # Set the background to transparent
        template=tm
    )
    return fig

Thanks in advance.
Rgds,
Thein

2 Likes
2

You can try adding dcc.Loading to the layout.

Also, I would not recommend that you read the csv file in your display_chart_v function. You will have to read the file every time the callback is triggered. If possible, read it on the page load and store the df.to_dict('records') in a dcc.Store. If the csv file is large then I would suggest storing the actual DataFrame object in dcc.Store with ServersideOutputTransform.

1 Like
3

Hi PyGuy, you’re awesome. You foresee the potential hiccups even before seeing my whole code. Thanks a lot for your suggestions, dcc.Loading works fine, this is exactly what I need it.

Yes, indeed I got an a bit of an issue with loading the big file, it takes about a few seconds. I have a several tabs with several charts. Besides, data are coming in every 1 minute, so within my knowledge, I understand as need to reload the whole file, every minute. I will study more on your suggestions of dcc.Store and ServersideOutputTransform. Actually I am learning Python and Plotly under six months. Here is one of the page I’m talking about.. This one use one common dropdown and single callback for all tabs. The data are updates in every minutes and callback also takes every minutes.

I understand as it may load faster if I use individual dropdowns and/or individual call backs. This is the page with individuals..

If you have better suggestions, kindly please.

Best regards,
Thein

1 Like
4

@thein999 Glad that worked for you. If you have live data coming in every minute you can look at using dcc.Interval to trigger a callback to save the new data in dcc.Store and then have your display_chart_v function read the data from the dcc.Store.

You can also look into @Emil solution for updating traces on a graph without generating a new graph object here and on StackOverflow.

Also, great job on your dashboard! Impressive for only using python and plotly for six months.

1 Like
5

@PyGuy thanks a lot for your valuable suggestions. I’ll try it out what you recommended and will report back to you about the progress. It looks like, huge job for me.

Actually my dashboards are just copy and paste from Google, chat GPT and from YouTube, my input may be only 10%. Big help gets from @adamschroeder you tube channel, especially YouTube video about MultiplePage App. Here’s what I make from that video, thanks a lot to Adam.

Best regards,
Thein

6

That is Impressive, @thein999 . Good job on building such an amazing app, especially with only 6 months of learning. Is the whole app build 100% with Dash?

image
image1333×798 30.7 KB

7

Not all by me @adamschroeder . Thanks to you, YouTube, Chat GPT and Google. Yes, it is 100% built with Dash and used Ngrok to do the server pointing to my domain. Actually I do not know much about other applications.

I have a privilege that lots of live data are coming to me all the time, it is a just a matter of how am I going to present these data to my clients. And all of my clients are satisfied and impressed with my works, which keeps me motivated to continue learning to improve.

Best regards,
Thein