Blazor Gantt Chart Example - Airline Flight Scheduler
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 demonstrates how an airline tracking system can be customized to visualize and manage flight schedules using the Blazor Gantt Chart. Flight information, departures, arrivals, and layovers are plotted on the timeline to present a comprehensive schedule that can be analyzed at a glance.
- Custom taskbars visually represent flights, each styled with unique identifiers for easy recognition.
- Flights are organized hierarchically by airline or route, enabling structured and clear navigation.
- An interactive timeline provides real-time tracking of flight schedules, enhancing situational awareness.
- Responsive design ensures smooth and consistent experience across desktops, tablets, and mobile devices.
The demonstration focuses on stylistic customization applied to key chart elements, including the taskbar, timeline, taskbar labels and the tooltips. These adjustments showcase how branding, density, and emphasis can be tailored to match aviation monitoring requirements.
- SfSidebar - Used to present filter options in mobile view, enhancing accessibility and usability on smaller screens.
- SfDropDownList - Enables selection of airline name, origin, and destination to support efficient search functionality.
- SfButton - Facilitates filtering and clearing of input values, streamlining interactions.
- SfTextBox - Captures the flight code input for targeted search operations.
- SfDateRangePicker - Allows specification of flight arrival and departure date ranges for refined search results.