Combining two plotly animation charts animation_frame is missing

Question

Someone asked similar question like this (How to plot two plotly figures with common animation_frame),but there is no answer.

I am plotting the two data frames with common animation frame.I combined the two plots and I observed that the animation frame is missing.My code is given below.

fig1 = px.line(df_cur_funct, x="sup(V)", y="Chip_Cur(uAmp)",#1st dataframe
            color="Device_ID", animation_frame="Temp(deg)"
           
          )
fig2 = px.line(df_cur_funct_mode1, x="sup(V)", y="Chip_Cur(uAmp)",#2nd dataframe
            color="Device_ID", animation_frame="Temp(deg)"
           
          )

fig3 = go.Figure(data=fig1.data + fig2.data) #combining fig1 and fig2
fig3.show()

Dummy data for 1st df_cur_funct

Device_ID   Die_Version Temp(deg)   sup(V)  Chip_Cur(uAmp)
NOISE_020   0x81        -40         1.6       159.801
NOISE_020   0x81        -30         1.8       162.197
NOISE_020   0x81        -20         2.0       164.386
NOISE_020   0x81        -10         2.5       173.200
NOISE_020   0x81         00         2.7       175.219

Dummy data for df_cur_funct_mode1

Device_ID   Die_Version Temp(deg)   sup(V)  Chip_Cur(uAmp)
NOISE_020   0x81        -40          2.5    173.200
NOISE_020   0x81        -30          2.7    175.219
NOISE_020   0x81        -20          3.6    184.786
NOISE_021   0x81        -10          2.5    172.552
NOISE_021   0x81         00          2.7    174.454

Any solution for this issue.

Answer 1

• this is really the same question as this scatter and line animated in same figure
• your sample data is problematic - does not form lines, so bulked it up
• key for this technique are dimensions are consistent

core solution

fig3 = go.Figure(
    data=fig1.data + fig2.data,
    frames=[
        go.Frame(data=fr1.data + fr2.data, name=fr1.name)
        for fr1, fr2 in zip(fig1.frames, fig2.frames)
    ],
    layout=fig1.layout,
)

fig3

full code

• includes bulking up data

import plotly.express as px
import pandas as pd
import io
import numpy as np

# sample data and bulk it up... (not enough sample data for a line)
r = np.random.RandomState(42)

df_cur_funct = pd.read_csv(
    io.StringIO(
        """Device_ID   Die_Version Temp(deg)   sup(V)  Chip_Cur(uAmp)
NOISE_020   0x81        -40         1.6       159.801
NOISE_020   0x81        -30         1.8       162.197
NOISE_020   0x81        -20         2.0       164.386
NOISE_020   0x81        -10         2.5       173.200
NOISE_020   0x81         00         2.7       175.219"""
    ),
    sep="\s+",
)

df_cur_funct = pd.concat([df_cur_funct for _ in range(5)]).pipe(
    lambda d: d.assign(
        **{
            c: r.uniform(d[c].min(), d[c].max(), len(d))
            for c in ["sup(V)", "Chip_Cur(uAmp)"]
        }
    )
)

df_cur_funct_mode1 = pd.read_csv(
    io.StringIO(
        """Device_ID   Die_Version Temp(deg)   sup(V)  Chip_Cur(uAmp)
NOISE_020   0x81        -40          2.5    173.200
NOISE_020   0x81        -30          2.7    175.219
NOISE_020   0x81        -20          3.6    184.786
NOISE_021   0x81        -10          2.5    172.552
NOISE_021   0x81         00          2.7    174.454"""
    ),
    sep="\s+",
)

df_cur_funct_mode1 = pd.concat([df_cur_funct_mode1 for _ in range(5)]).pipe(
    lambda d: d.assign(
        **{
            c: r.uniform(d[c].min(), d[c].max(), len(d))
            for c in ["sup(V)", "Chip_Cur(uAmp)"]
        }
    )
)


fig1 = px.line(
    df_cur_funct,
    x="sup(V)",
    y="Chip_Cur(uAmp)",  # 1st dataframe
    color="Device_ID",
    animation_frame="Temp(deg)",
)
fig2 = px.line(
    df_cur_funct_mode1,
    x="sup(V)",
    y="Chip_Cur(uAmp)",  # 2nd dataframe
    color="Device_ID",
    animation_frame="Temp(deg)",
)

fig3 = go.Figure(
    data=fig1.data + fig2.data,
    frames=[
        go.Frame(data=fr1.data + fr2.data, name=fr1.name)
        for fr1, fr2 in zip(fig1.frames, fig2.frames)
    ],
    layout=fig1.layout,
)

fig3