Skip to content
Advertisement

How to plot hour:min time in ISO 8601 time format?

I am trying to plot temperature data points according to their time recording.

JavaScript

Note: as you have mentioned t is represented without hour, the reason is that temp been collected in hour:second.

t is a string representing the date and time in ISO 8601 format (ref: datetime.datetime.isoformat()) and temp is a floating number. The plot should be in a way that t in x-axis (represented as hour:min) and temp in y-axis (represented in celcius). I want to keep the variables as lists and plot a graph without using Pandas but PyQtGraph library.

I tried the following:

JavaScript

After running the above code, I got a traceback: numpy.core._exceptions._UFuncNoLoopError: ufunc 'fmin' did not contain a loop with signature matching types (dtype('<U18'), dtype('<U18')) -> None

I know that there is a problem with t since its values are str which they should be same type as of temp (note: temp values should always stay float). I am not sure how to fix it.

I am using PySide6 and PyQtGraph, where Python is the language used. For this, I also tried to just plot the two variables using matplotlib library. I did the following:

JavaScript

Advertisement

Answer

A few assumptions:

  • You mean hour:minutes and not hour:seconds as written. If differently, please clarify your point
  • The time string is wrong: according to ISO 8601 hours and minutes should be two-character string chunks. You have to first clean the string list. I’ve done it manually since a Python script for that is out-of-scope
  • I’ve used a slight different temp array just for displaying some variability in the graph. Completely negligible

That said, the proposed way is:

  • Convert the iso strings into timestamp (float) values. This will be handled by pyqtgraph to plot numbers.
  • Convert the full ISO strings into strings with format HH:MM as you require and that you’ll use as axis ticks. You have two choices that are in-code explained (please, read comments)
  • Get the x-axis from the PlotWidget and use the setTick property to set your custom ticks. To do so, you have to create a list of tuple with two values, the underlying numeric data and the custom string data

Here is the code:

JavaScript

And here is the result:

enter image description here

For more advanced strategies, such as sub-classing AxisItem for custom tickStrings generator, please refer to this answer

Edit 1: Ticks downsamples

Note that you can downsample the ticks tuple in order to show less major/minor (in the example major only are present) ticks. As for instance, if you want to show one tick every 2 timestamps:

JavaScript

The result:

enter image description here

User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement