Blazor Gantt Chart Example - Airline Flight Scheduler
This sample demonstrates visualizing the airline tracking system using a Gantt chart. It is useful for tracking and finding detailed airlines information.
Flight Info | ID | Status | Landing Time | Gate | Origin | Destination | Departure Time | Arrival Time | Aircraft |
|---|
Delta Airlines | 1 | ||||||||
DL100 | 2 | LANDED | -5.00 Min | B2 | JFK | ATL | 06/10/2024 02:00 | 06/10/2024 05:00 | Boeing 737 |
DL101 | 3 | SCHEDULED | A2 | ATL | JFK | 06/10/2024 09:00 | 06/10/2024 11:00 | Boeing 737 | |
DL102 | 4 | CANCELLED | JFK | MIA | 06/10/2024 05:00 | 06/10/2024 08:00 | Boeing 737 | ||
United Airlines | 5 | ||||||||
UA100 | 6 | SCHEDULED | C1 | JFK | ORD | 06/10/2024 08:00 | 06/10/2024 11:00 | Boeing 777 | |
UA101 | 7 | DELAYED | -10.00 Min | D3 | ORD | JFK | 06/10/2024 04:00 | 06/10/2024 07:00 | Boeing 777 |
UA102 | 8 | ON TIME | D4 | JFK | LAX | 06/10/2024 20:00 | 06/10/2024 23:00 | Boeing 777 | |
American Airlines | 9 | ||||||||
AA100 | 10 | SCHEDULED | D1 | JFK | DFW | 06/10/2024 09:00 | 06/10/2024 12:00 | Airbus A320 | |
AA101 | 11 | DELAYED | -10.00 Min | E3 | DFW | JFK | 06/10/2024 14:00 | 06/10/2024 17:00 | Airbus A320 |
AA102 | 12 | ON TIME | E4 | JFK | ORD | 06/10/2024 16:00 | 06/10/2024 19:00 | Airbus A320 | |
Southwest Airlines | 13 | ||||||||
SW100 | 14 | SCHEDULED | E1 | JFK | LAS | 06/10/2024 10:00 | 06/10/2024 13:00 | Boeing 737 | |
SW101 | 15 | CANCELLED | LAS | JFK | 06/10/2024 15:00 | 06/10/2024 18:00 | Boeing 737 | ||
SW102 | 16 | ON TIME | F4 | JFK | BWI | 06/10/2024 20:00 | 06/10/2024 23:00 | Boeing 737 | |
JetBlue Airways | 17 | ||||||||
JB100 | 18 | SCHEDULED | F1 | JFK | MCO | 06/10/2024 11:00 | 06/10/2024 14:00 | Airbus A321 | |
JB101 | 19 | DELAYED | -10.00 Min | G3 | MCO | JFK | 06/10/2024 12:00 | 06/10/2024 15:00 | Airbus A321 |
JB102 | 20 | ON TIME | G4 | MCO | JFK | 06/10/2024 16:00 | 06/10/2024 19:00 | Airbus A321 | |
Alaska Airlines | 21 | ||||||||
AS100 | 22 | SCHEDULED | G1 | SEA | SFO | 06/10/2024 09:00 | 06/10/2024 12:00 | Boeing 737 | |
AS101 | 23 | CANCELLED | SEA | JFK | 06/10/2024 11:00 | 06/10/2024 14:00 | Boeing 737 | ||
AS102 | 24 | ON TIME | H4 | JFK | SFO | 06/10/2024 19:00 | 06/10/2024 22:00 | Boeing 737 | |
British Airways | 25 | ||||||||
BA100 | 26 | SCHEDULED | H1 | JFK | LHR | 06/10/2024 07:00 | 06/10/2024 14:00 | Boeing 787 | |
BA101 | 27 | ON TIME | I3 | LHR | JFK | 06/10/2024 16:00 | 06/10/2024 23:00 | Boeing 787 | |
BA102 | 28 | ON TIME | I4 | LHR | JFK | 06/10/2024 20:00 | 06/11/2024 05:00 | Boeing 787 | |
Lufthansa | 29 | ||||||||
LH100 | 30 | SCHEDULED | I1 | JFK | FRA | 06/10/2024 10:00 | 06/10/2024 17:00 | Airbus A340 | |
LH101 | 31 | ON TIME | J3 | FRA | JFK | 06/10/2024 12:00 | 06/10/2024 19:00 | Airbus A340 | |
LH102 | 32 | ON TIME | J4 | FRA | JFK | 06/10/2024 15:00 | 06/10/2024 22:00 | Airbus A340 | |
Qatar Airways | 33 | ||||||||
QR100 | 34 | ON TIME | 25 | DOH | JFK | 06/10/2024 09:00 | 06/10/2024 16:00 | Airbus A350 | |
QR101 | 35 | LANDED | +5.00 Min | 26 | DOH | JFK | 06/10/2024 12:00 | 06/10/2024 14:30 | Airbus A350 |
QR102 | 36 | LANDED | -5.00 Min | 27 | DOH | JFK | 06/10/2024 15:00 | 06/10/2024 17:30 | Airbus A350 |
QR103 | 37 | LANDED | +5.00 Min | 28 | JFK | DOH | 06/10/2024 18:00 | 06/10/2024 20:30 | Airbus A350 |
Jun 10,2024 | Jun 11,2024 |
00:00 | 02:00 | 04:00 | 06:00 | 08:00 | 10:00 | 12:00 | 14:00 | 16:00 | 18:00 | 20:00 | 22:00 | 00:00 | 02:00 | 04:00 | 06:00 | 08:00 | 10:00 | 12:00 | 14:00 | 16:00 | 18:00 | 20:00 | 22:00 |
This sample includes several components for customization purposes. The Gantt chart taskbar, timeline, taskbar labels, and tooltip have been customized using various styles.
- SfSidebar - This component is used for the filter options set in mobile mode.
- SfDropDownList - This component is used to get the airline name, origin, and destination for searching purposes.
- SfButton - This component is used to filter and clear input values purposes.
- SfTextBox - This component is used to get the flight code for searching purposes.
- SfDateRangePicker - This component is used to get the flight arrival date and departure date range for searching purposes.