I finished the plot with a strange result. When showing one line it is currect. But if setting the visibility if multiple elements are shown the lines seems strange. Does anyone know the possible reason for this?
here is how I create the plot：
all_stock_prices = px.line(data_frame = df,
x='TIMESTAMP', y='VALUE', color='NAME_UNIT',
title="Line plot of can_result over time"
)
graphJSON = json.dumps(all_stock_prices, cls=PlotlyJSONEncoder)
output_file_path = 'app/plot_data_subset.csv'
df.to_csv(output_file_path, index=False)
return jsonify(json.loads(graphJSON))
Hi timesmelody. It’s a bit hard to tell what is going on from this screenshot. Can you share your data in the example?
My first thought is that the issue is related to the the auto-adjustment of the x and y limits to fit all the data that is making it seem like the display is off. Since we can’t see the x axis of the second screenshot it’s hard to confirm. But for example, if you have both traces on, then I would first manually zoom in on the plot to the x and y ranges that match your first picture. Does it match or still look different?
Hi GallopingNarwhal,
Thanks for your reply! I am not sure whether I interpret your words correct or not, but I would like to tell you how I do to get the pictures: If I draw with just one line, it show like this:
If I draw with choosing more than one elements and the graph will automatially become like this:
I know the x and y axis changes, but I have no idea why this would make the graph like this. Since Each value in x axis should always corraspond to one y value. The only reason I would think of is the way of connecting the points is different from having just one line. But what causes this and how to solve this? Do you have any ideas about the possible reasons?
Thanks!
So I’ve never seen something quite like this occur before, but it appears to be a sorting issue along the x-axis, though the best fix is to change your data type.
In your first plot, the Timestamp is in chronological order. However, in your second screenshot, the x axis is not in order (as you can see by the boxed ‘46’ minute timestamps):
. Once that is in a datetime format, you can format the ticks if you want a specific style for the timestamp value. This will also result in your timestamp data being appropriately spaced (which is important if your data sampling isn’t regular)
^^ That should solve it for you. It appears that w/ the timestamp being a string, that second trace being applied is reordering the x-axis for you. Notice how your “state_BMS” trace has all values on the left hand side. The x axis is reorder such that timestamps that are Nan for state_BMS are to the right side. This causes your “current_BMS” points to be connected oddly
due to the x-axis order (causing the back and forth horizontal lines).
1 Like
Ah, I should have taken another look at your code first. your issue might be with the JSON dump. Test your code with a simple all_stock_prices.show() . If that plot doesn’t have the same problem, then the issue is likely in how the JSON dump (and your eventual display). Somewhere in that process your timeseries data is no longer treated as a timeseries. I’m not super educated on that area, but you might be able to fix it with by including a sort of the x-axis. However, that wouldn’t result in the x-axis being to scale (EX: timestamp ticks having the same time gap).
The time format is the problem lies, thank you!
1 Like
