Overlapping Time Series lines in Dash graph

Dash Python
1

Hello,

I just want to plot a basic time series line chart with datetimes on the x axis and temperatures on the y axis. I thought this would be easy, but I’m missing something because when I plot it when mode=‘lines’, I get:

linegraph_messedup
linegraph_messedup.PNG1350×256 24.2 KB

but, when I just change the mode to ‘markers,’ I get:

linegraph_markers
linegraph_markers.PNG1346×252 17.8 KB

I’ve tried several things and nothing will work. I don’t understand what I’m doing wrong. Does someone have a solution?

Here’s my code: My x & y axes are just two columns from a pandas dataframe–one with floats and one with datetimes.

> html.Div(className='col-lg-10', 
		children=[
			dcc.Graph(
				id='weekgraph',
				figure={
					'data': [
						go.Scatter(x=lineX, y=lineY, mode='markers')
					],
					'layout': go.Layout(
							xaxis={'title': 'Date'},
							yaxis={'title': 'Temperature'},
							margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
							legend={'x': 0, 'y': 1}
					)
				}, animate=False, style={'height': '25vh', 'width':'80vw'}
			),
		], style={'padding-top': '30px'})
2

Hi! Lines from right to left looking very strange! Is your dataframe sorted by date?Not sure, but maybe it is trying to plot data in that order as it is in dataframe?

3

Hi,

Indeed your code is correct. The error should be in your data. We see that your plot goes “4 points by 4 points” and then go back to the beginning of your timeserie. As roman said, your dataframe is not sorted by date. What are exactly lineX and lineY?

1 Like
6

That did it! I thought I was sorting it, but I was using a pandas dataframe in the following manner:

recent.sort_values(by=‘Date’)
lineX = recent[‘Date’]
lineY = recent[‘AvgTemp’]

I have to save the sorted data to a new dataframe for the sort to take effect, I didn’t think it worked that way. so I changed it to:

recent = recent.sort_values(by=‘Date’)
lineX = recent[‘Date’]
lineY = recent[‘AvgTemp’]

and now it works!!

Thank you both for clearing that up for me–I wondered why that wasn’t fixing it!

8

I thought was sorting this correctly, but that’s exactly where my mistake was! See my response to @GwendalD below. Thank you!

9

Quite a bit off topic, but many function of pandas have the inplace=True argument, i.e

df.sort_values(inplace=True)
df = df.sort_values()

are equivalent.

2 Likes