DEV Community

loading...
Cover image for How to Develop a Flight Tracker Application with React Gantt Chart
Syncfusion, Inc.

How to Develop a Flight Tracker Application with React Gantt Chart

sureshmohan profile image Suresh Mohan Originally published at syncfusion.com on ・6 min read

Our Syncfusion React Gantt Chart component is a specialized chart tool that supports the customization of various Gantt elements such as timelines, taskbars, column headers, cells, labels, and tooltips.

In this article, we’ll see how to customize these Gantt Chart elements to develop a flight tracker application. As we all know, flights are scheduled at different airports at different times. In this application, we are going to display all the scheduled fights and their live tracking status at different airports.

Collapsed view of flight tracker application
Collapsed view of flight tracker application

You can also check the status of each flight in detail by expanding each airport like in the following screenshot.

Detailed view of the flight tracker application
Detailed view of the flight tracker application

Customization of Gantt Chart elements

We are going to customize the following Gantt Chart elements to develop our flight tracker application:

Taskbar

The taskbar can be used to show different statuses like auto or manual, unscheduled or scheduled (parent, child, milestone). You can customize it using either the taskbarTemplate or queryTaskbarInfo client-side event.

Refer to the following code example.

// Based on the current time, validated the flights into three categories: 
// 1. Completed journey – Denoted by green
// 2. In journey - Denoted by light green
// 3. Not yet started - Denoted by gray

taskbarTemplate(props) {
        var startTime = props.ganttProperties.startDate.getTime();
        var endTime = props.ganttProperties.endDate.getTime();
        var currentTime = new Date('02/13/2021 15:25:00').getTime();
        if (endTime < currentTime) {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#006400" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);
        } else if (startTime < currentTime) {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#90EE90" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);

        } else {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#C0C0C0" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);

        }
    };
Enter fullscreen mode Exit fullscreen mode

Customizing the taskbar element in React Gantt Chart
Customizing the taskbar element in React Gantt Chart

Grid cells

You can customize the grid cells using the querycellinfo client-side event. The argument of this event will have the data, column, and cell element values. This event will be triggered before rendering each cell. Customize the cell elements of each cell in this event.

// Based on the current time, validated the flights into three categories: 
    // 1. Completed journey - Denoted by green
    // 2. In journey - Denoted by light green 
    // 3. Not yet started - Denoted by gray  
    queryCell(props) {
        if (!props.data.hasChildRecords && props.column.field == 'Name') {
            var startTime = props.data.ganttProperties.startDate.getTime();
            var endTime = props.data.ganttProperties.endDate.getTime();
            var currentTime = new Date('02/13/2021 15:25:00').getTime();
            if (endTime < currentTime) {
                props.cell.style.backgroundColor = '#006400';
            } else if (startTime < currentTime) {
                props.cell.style.backgroundColor = '#90EE90';
            } else {
                props.cell.style.backgroundColor = '#C0C0C0';
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

Customizing the grid cell element in React Gantt Chart
Customizing the grid cell element in React Gantt Chart

Header column

The header column can be customized by using the header template property. You can also render the HTML elements inside the template to customize the column header.

Refer to the following code.

<ColumnsDirective>
                    {/**Column header template*/}
                    <ColumnDirective field="Model" headerText='Flight' headerTemplate={() => {
                        return (<div style={{ marginLeft: "20px" }}><img src="./image/airplane.png" width="20" height="20" className="e-image" /></div>);
                    }} ></ColumnDirective>
                </ColumnsDirective>
Enter fullscreen mode Exit fullscreen mode

Customizing the header column element in React Gantt Chart
Customizing the header column element in React Gantt Chart

Tooltip

The Gantt Chart taskbar tooltip can also be customized using the template property. Get the Gantt data inside the template to render in the tooltip.

Refer to the following code.

// Template code for taskbar tooltip.
    tooltipTemplate(props) {
        var data = props.taskData;        
        return (
            <table>
                <tr><img src="./image/airplane.png" ></img></tr>
                <tr><td>Flight</td><td>{data.Name}</td></tr>
                <tr><td>From</td><td>{data.From}</td></tr>
                <tr><td>To</td><td>{data.To}</td></tr>
                <tr><td>Dep</td><td>{data.Dep.getHours()} : {data.Dep.getMinutes()}</td></tr>
                <tr><td>Arr</td><td>{data.Arr.getHours()} : {data.Arr.getMinutes()}</td></tr>
                <tr><td>Model</td><td>{data.Model}</td></tr>
            </table>
        );
    }
Enter fullscreen mode Exit fullscreen mode

Customizing tooltip element in React Gantt Chart
Customizing tooltip element in React Gantt Chart

GitHub sample

For more information, refer to the Flight tracker application using React Gantt Chart demo.

Conclusion

In this article, we have explained how to customize our Syncfusion React Gantt Chart component to develop a flight tracker application. Try out the ideas given in this blog post and leave your feedback in the comments section below. Refer to thissample browser and these documentation pages to learn more about our Gantt Chart’s features.

Our Gantt Chart is also available in our Blazor, ASP.NET (MVC and Web Forms), JavaScript, Angular, Vue, WPF, and UWP platforms. Use them to build astonishing web applications!

You can contact us through our support forum, Direct-Trac support system, or feedback portal. We are always happy to assist you!

If you liked this blog post, we think you’ll also like the following articles:

Discussion (0)

Forem Open with the Forem app