Using gantt chart with datetime

[nael]

Hi everyone
I’m trying to build a gantt chart but I don’t get what I expected.
Following the documentation, here is what I did.
I’ve got the following dataframe :

start end duration press label color
0 2022-10-22 00:00:00 2022-10-22 01:00:48 1970-01-01 01:00:48 WCINY_16 1303237XSW #31e374
1 2022-10-22 01:21:48 2022-10-22 03:21:00 1970-01-01 01:59:12 WCINY_16 1735973JET_1736247JET #c8fb49
2 2022-10-22 03:42:50 2022-10-22 06:06:34 1970-01-01 02:23:44 WCINY_16 54525 #434b
3 2022-10-22 06:28:24 2022-10-22 09:42:46 1970-01-01 03:14:22 WCINY_16 1341533XSW #16552c
4 2022-10-22 10:04:36 2022-10-22 15:55:00 1970-01-01 05:50:24 WCINY_16 1303237XSW #8d1032
5 2022-10-22 16:17:20 2022-10-22 18:13:03 1970-01-01 01:55:43 WCINY_16 1212583XSW #db8572
6 2022-10-22 18:33:51 2022-10-22 22:57:51 1970-01-01 04:24:00 WCINY_16 1735973JET_1736247JET #49e61c

And the chart :

<|{tp_ganttchart_description}|chart|type=bar|orientation=h|x[1]=duration|base[1]=start|y[1]=press|text[1]=label|color[1]=color|>

I get a gantt chart but the starting / ending date time does not make any sense. What am I missing ?

Regards,
Aurélien

[Florian Jacta]

Hi Aurélien,

I don’t think you are missing anything. Maybe the format of the dataframe is not good somehow.

This is my CSV file (gantt_chart.csv) based on your data.

,start,end,duration,press,label,color
0,2022-10-22 00:00:00,2022-10-22 01:00:48,1970-01-01 01:00:48,WCINY_16,1303237XSW,#31e374
1,2022-10-22 01:21:48,2022-10-22 03:21:00,1970-01-01 01:59:12,WCINY_16,1735973JET_1736247JET,#c8fb49
2,2022-10-22 03:42:50,2022-10-22 06:06:34,1970-01-01 02:23:44,WCINY_16,54525,#434b
3,2022-10-22 06:28:24,2022-10-22 09:42:46,1970-01-01 03:14:22,WCINY_16,1341533XSW,#16552c
4,2022-10-22 10:04:36,2022-10-22 15:55:00,1970-01-01 05:50:24,WCINY_16,1303237XSW,#8d1032
5,2022-10-22 16:17:20,2022-10-22 18:13:03,1970-01-01 01:55:43,WCINY_16,1212583XSW,#db8572
6,2022-10-22 18:33:51,2022-10-22 22:57:51,1970-01-01 04:24:00,WCINY_16,1735973JET_1736247JET,#49e61c

And this is the code I have to visualize the Gantt chart.

import pandas as pd
from taipy import Gui

tp_ganttchart_description = pd.read_csv(“gantt_chart.csv”)

Gui(‘<|{tp_ganttchart_description}|chart|type=bar|orientation=h|x[1]=duration|base[1]=start|y[1]=press|text[1]=label|color[1]=color|>‘).run()

On my end, the chart seems to look good. Please tell me if with this code and CSV file, the chart is showing properly.

If you need more specific charts for your use case, please also tell us. We will be happy to help you on that.

Florian
florian.jacta@taipy.io
Customer Success Engineer

[nael]

Hi Florian,
thanks for your insight.
I tried your code and it worked, so I digged a little
My conclusion is : if I pass my start/end timestamp as timestamp, it doesn’t work
if I pass them as str ( -_- ) it works
When you read the data through csv that’s what you get (str)

not sure that the expected behavior 😀

anywho, I’ve got my chart and I’m still in love with taipy <3

[nael]

Hi Florian
I juste noticed that I had the same issue on a line chart.
I sent you an email with the code

Regards
Aurélien

[Florian Jacta]

The problem on the line chart and Gantt chart comes from the timezone given to the columns for dates. Taipy tries to convert automatically data depending on the timezone given in the data frames and the timezone of the web client. This is creating a delay for the dates that are displayed on the chart.

df[‘column_date’] = df[‘column_date’].dt.tz_localize(‘UTC’)

This code will localize the dates of a column to have the ‘UTC’ timezone and avoid delays on charts.

[Author]

Posts