Chart loading data incorrectly?

Dash Python
1

I’m building a webapp where some data is fed in real time on a chart from a Database.

However, i’m facing an issue and i can’t find a way to fix it: when i load a new datapoint which is distant (in terms of time) from the last datapoint, my chart gets bugged and it won’t load data correctly (see my screenshot)

pic
pic.png1115×351 11.7 KB

Is there a way to fix this problem? Here is my code:

df = pd.DataFrame(list(db.tst.find({})))


    trace = Scatter(
        y=df['num'],
        x=df['time'],
        line=Line(
            color='#42C4F7'

        ),
    )

    layout = Layout(
        height=450,
        xaxis=dict(
            range=[0, 200],
            showgrid=False,
            showline=False,
            zeroline=False,
            fixedrange=False,
            title='Time'
        ),
        
        margin=Margin(
            t=45,
            l=50,
            r=50
        )
    )

    return Figure(data=[trace])
2

@Dev20 What happens when you zoom in on the x-axis near those narrow vertical lines? It looks to me that the points are probably being ploted correctly but the scale is off because the large distance between the actual data represents > 99% of the time shown in the graph.

If that is the case, you could try setting the xaxis range manually to only show the latest data or you could separate the data into meaningful chunks and let the user choose a chunk using a Dropdown menu.

1 Like
3

Hey! Thanks for your answer! Yes, indeed, if i zoom a lot, the data seems to be charted normally. The problem is that i had this problem with a bar chart too. I don’t know why, but i expected my chart to ‘connect’ to the last datapoint and start charting again from there, instead of having that huge jump. I think the issue could be somehow related to the timestamp on the X-axis. I’ll try to set the xaxis range manually, as you said :slight_smile:

4

@Dev20 With bar graphs, you can set layout = go.Layout(xaxis=dict(type='category')) to prevent all of that space from being ploted in between the importand bits and I just realized now that you can do the same thing with a scatter trace. So I think that would solve your issue

5

Hey! Thanks again! I edited the code, it looks like this:

      df = pd.DataFrame(list(db.tst.find({})))


        trace = Scatter(
            y=df['num'],
            x=df['time'],
            line=Line(
                color='#42C4F7'

            ),
        )
    layout = go.Layout(xaxis=dict(type='category'))

After adding data to my DB again, here is what it looks like:

pic
pic.png1162×303 13.4 KB

6

@Dev20, it looks like plotly is still making the xaxis as a date. Did you make sure to add layout=layout to the call to go.Figure (i.e go.Figure(data=[trace], layout=layout)). Can you post your entire code (or a smaller reproducible example)?

1 Like
7

Sorry for the late answer! Here is the whole code:

def gen_chart(interval):

df = pd.DataFrame(list(db.tst.find({})))


trace = Scatter(
    y=df['num'],
    x=df['time'],
    line=Line(
        color='#42C4F7'

    ),
)
layout = Layout(xaxis=dict(type='category'))


return Figure(data=[trace])
8

@Dev20, yeah it looks like that last line is the problem. The layout is being defined but not included in the chart. Changing that line to return Figure(data=[trace], layout=layout) should fix things.

1 Like
9

It fixed my problem, indeed! Thanks, thanks, thanks, thanks, thank you!