Hi muhammad12,
Refer the below sample with 24 hour format.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Include Google Font link -->
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;700&display=swap" rel="stylesheet" />
<style>
/* Style to center the input form */
#registration-form-container { display: flex; justify-content: center; align-items: flex-start; /* Align form to the top */ overflow: hidden; margin-top: 0px; /* Adjust top margin as needed */ }
#registration-form { display: inline-block; /* Ensure it only takes the necessary width */ padding: 20px; border: 1px solid #ccc; background-color: #f2f2f2; border-radius: 8px; overflow: hidden; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }
/* Style to make the "Clockify report!" title more prominent */
legend { font-weight: bold; font-size: 20px; margin-bottom: 20px; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }
/* Style to place input elements in one row */
.input-group { display: inline-block; margin-right: 10px; /* Adjust as needed */ }
/* Style to adjust the width of input elements */
.input { width: 150px; /* Adjust as needed */ padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }
/* Style for labels */
.label { display: block; margin-bottom: 5px; color: black; font-size: 14px; font-weight: bold; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }
/* Style for buttons */
.btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; font-weight: bold; border-radius: 4px; cursor: pointer; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }
/* Hover effect for buttons */
.btn:hover { background-color: #45a049; }
/* Style to make sure the timeline adjusts according to device width */
#departmentChartsContainer { white-space: nowrap; margin-top: 20px; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: hidden; width: 100%; /* Fix the width of the container */ display: block; }
.sentence { display: flex; align-items: center; margin-top: 10px; }
.sentence .label { margin-right: 5px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { packages: ["timeline"] });
function drawChart(data, chartDivId) {
var container = document.getElementById(chartDivId);
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
var arrayData;
for (var departmentName in data) {
if (data.hasOwnProperty(departmentName)) {
data[departmentName].forEach(function (event) {
var start = new Date('2000/01/01 ' + event[2]); // Assuming the date component is irrelevant
var end = new Date('2000/01/01 ' + event[3]); // Assuming the date component is irrelevant
dataTable.addRows([[departmentName, event[1], start, end]]);
});
}
}
var options = {
timeline: {
groupByRowLabel: false,
colorByRowLabel: true,// Display each event on a new line
rowLabelStyle: { fontName: 'Sofia Sans Condensed', fontSize: 14, color: '#000000', bold: true },
barLabelStyle: { fontSize: 14, bold: true, fontName: 'Sofia Sans Condensed', color:'#000000 ' },
avoidOverlappingGridLines: true
},
alternatingRowStyle: false,
backgroundColor: '#ffd',
height: 2000
};
chart.draw(dataTable, options);
}
$(function () {
$("#btnView").click(function () {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: JSON.stringify({ flightNo: flightNo, flightDate: flightDate, flightType: flightType }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
drawChart(response.d, "departmentChartsContainer");
},
error: function (response) {
alert(response.responseText);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="registration-form">
<div class='fieldset'>
<legend>Clockify report!</legend>
<div class="row">
<div class="input-group">
<asp:Label ID="Label1" runat="server" Text="Flight No" CssClass="label"></asp:Label>
<asp:TextBox ID="flightNo" runat="server" CssClass="input"></asp:TextBox>
</div>
<div class="input-group">
<asp:Label ID="Label2" runat="server" Text="Flight No" CssClass="label"></asp:Label>
<asp:TextBox ID="flightDate" runat="server" CssClass="input"></asp:TextBox>
</div>
<div class="input-group">
<asp:Label ID="Label3" runat="server" Text="Flight Type" CssClass="label"></asp:Label>
<asp:DropDownList ID="flightType" runat="server" CssClass="input" Style="color: Black; font-size: 20px;">
<asp:ListItem Text="Arrival" />
<asp:ListItem Text="Departure" />
</asp:DropDownList>
</div>
<!-- Add other input elements here -->
<div class="input-group">
<asp:Button ID="btnView" runat="server" Text="Submit" class="btn" />
</div>
</div>
</div>
</div>
<!-- Container for department Gantt charts -->
<div id="departmentChartsContainer"></div>
</form>
</body>
</html>
Code
[System.Web.Services.WebMethod]
public static Dictionary<string, List<object[]>> GetChartData(string flightNo, string flightDate, string flightType)
{
using (DataTable dt = new DataTable())
{
dt.Columns.Add("ActionID");
dt.Columns.Add("eventname");
dt.Columns.Add("starttime");
dt.Columns.Add("endtime");
dt.Columns.Add("DeptName");
dt.Rows.Add(1, "Jan", "10:40", "10:45", "Airside");
dt.Rows.Add(6, "Jan", "9:00", "9:30", "Catering");
dt.Rows.Add(9, "Jan", "10:00", "10:32", "FOCC");
dt.Rows.Add(10, "Jan", "6:00", "6:15", "Flight Services");
dt.Rows.Add(2, "feb", "21:00", "22:10", "Catering");
dt.Rows.Add(7, "feb", "7:00", "7:40", "FOCC");
dt.Rows.Add(8, "feb", "8:00", "8:25", "Airside");
dt.Rows.Add(3, "mar", "12:00", "12:10", "Airside");
dt.Rows.Add(11, "mar", "15:00", "15:30", "FOCC");
dt.Rows.Add(12, "mar", "9:00", "9:20", "Flight Services");
dt.Rows.Add(4, "Apr", "01:00", "01:10", "FOCC");
dt.Rows.Add(5, "may", "0:000", "00:20", "Catering");
Dictionary<string, List<object[]>> departmentChartData = new Dictionary<string, List<object[]>>();
foreach (DataRow row in dt.Rows)
{
string departmentName = row["DeptName"].ToString();
if (!departmentChartData.ContainsKey(departmentName))
{
departmentChartData[departmentName] = new List<object[]>();
}
departmentChartData[departmentName].Add(new object[] {
row["eventname"],
row["eventname"],
row["starttime"].ToString(),
row["endtime"].ToString()
});
}
return departmentChartData;
}
}
Screenshot