Dash figure not filling the graph area

Dash Python
1

I’m making an application that plays a video of a sim alongside the data that was collected during the run. I’ve done this successfully for 2 other graphs, however the ecg graph is compressing itself to a small portion of the allotted space (see image)

image
image964×475 15.4 KB

Initially I assumed this was a refresh rate issue. I have reduced the graph update speed to every 5 seconds and I’m still seeing this issue.
Relevant code below:

                if len(ECG.index) == 0:                                      #This way we only read the data at the beginning and not each time
                    ECG = pd.read_csv("assets/Session/Project1/ECG.csv")                        
                    relativetimes = [np.float64(i)-seconds[0] for i in ECG['Timestamp'].tolist()]
                    ecgtimestamps = [str(int(i // 60)) + ":" + "{:.1f}".format(i % 60) for i in relativetimes]
                else:
                    e = 2   #exists as debug point
                for i in range(0, len(relativetimes)-1):
                    if relativetimes[i] >= currentDTime:           #currentDTims is the time of the video
                        row = i
                        break
                showSet = ECG.loc[0:i]  # currently showing all values up to the moment
                relShowTimes = relativetimes[0:i+1]
                showTSs = ecgtimestamps[0:i+1]
                ecgvals = [ecgtimestamps[x] for x in range(0, len(ecgtimestamps)-1, 100)]  # only showing every 100 time stamps
                # Create a scatter plot object for the data. 
                ecg = pgo.Scatter(x=showTSs, y=showSet['Sample'], mode='lines', name='ECG')
                # Remake the ECG figure with the new data set
                FECG = pgo.Figure(data=[ecg],
                                    layout=pgo.Layout(
                                        xaxis=dict(range=[0, len(showSet.index)],  
                                                   tickangle=60,
                                                   # 60 degree tilt on the ticks looks good and adds space
                                                   tickvals=ecgvals, ticktext=ecgvals,  # show ticks only at peaks
                                                   gridcolor=gridlines),
                                        yaxis=dict(range=[min(showSet.Sample.values),
                                                          # y max and min are set to the data max and min
                                                          max(showSet.Sample.values)],
                                                   gridcolor=gridlines),
                                        margin=dict(l=30, r=20, t=5, b=20),  # Experimentally found margins
                                        template=theme, paper_bgcolor=paper)
                                    )
2

showTSs is a list of strings: ecgtimestamps = [str(int(i // 60)) + ":" + "{:.1f}".format(i % 60) for i in relativetimes] but you are setting the x-axis range as an int: axis=dict(range=[0, len(showSet.index)]) My guess is if you comment out the x-axis range it will work as expected or instead of commenting out the range try range=[showTSs[0], showTSs[-1]], instead, which should set the ends of the range to the first and last x-axis values.

xaxis=dict(range=[showTSs[0], showTSs[-1]],  
           tickangle=60,
           # 60 degree tilt on the ticks looks good and adds space
           tickvals=ecgvals, ticktext=ecgvals,  # show ticks only at peaks
           gridcolor=gridlines),

If that does not work can you please provide an MRE?

1 Like
3

That did it! I’m confused though. I though range was supposed to be a literal set of min/max ints. Can you help me understand what that is supposed to be set to?

4

@DwilliamsTM, I looked at your code a little closer and yes are correct you can use ints in the range but I think the issue is actually because you are doing mod 60 when creating ecgtimestamps, which ultimately gets set as the x values in your figure: showTSs = ecgtimestamps[0:i+1]

I think the following may also work:

xaxis=dict(range=[0, len(showSet.index)%60],  
           tickangle=60,
           # 60 degree tilt on the ticks looks good and adds space
           tickvals=ecgvals, ticktext=ecgvals,  # show ticks only at peaks
           gridcolor=gridlines),
1 Like