Hi muhammad12,
Refer below code.
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; }
#departmentChartsContainer { white-space: nowrap; margin: 20px auto; /* Center the container horizontally */ font-family: 'Sofia Sans Condensed', sans-serif; overflow-x: hidden; overflow-y: hidden; width: 80%; /* Set the width to 80% */ display: block; }
/* GridView Styling */
#GridView1 { width: 80%; /* Adjust the width of GridView */ margin: 20px auto; /* Center the GridView */ border-collapse: collapse; /* Collapse borders */ }
#GridView1 th, #GridView1 td { border: 1px solid #ccc; /* Border for cells */ padding: 8px; /* Padding for cells */ text-align: left; /* Left align text */ font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }
#GridView1 th { background-color: #4CAF50; /* Header background color */ color: white; /* Header text color */ font-weight: bold; /* Header text weight */ }
#GridView1 tr:nth-child(even) { background-color: #f2f2f2; /* Even row background color */ }
#GridView1 tr:hover { background-color: #ddd; /* Hover effect for rows */ }
#GridView1 tr:hover { background-color: #ddd; /* Hover effect for rows */ }
.view-detail { position: absolute; top: 40px; right: 450px; text-decoration: none; color: #4CAF50; font-weight: bold; font-family: 'Sofia Sans Condensed', sans-serif; }
.view-detail:hover { color: #45a049; }
/* Modal styles */
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding-top: 60px; }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover,
.close:focus { color: black; text-decoration: none; cursor: pointer; }
</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 parseTimeString(timeStr) {
var parts = timeStr.split(':');
var hours = parseInt(parts[0], 10);
var minutes = parseInt(parts[1], 10);
return { hours: hours, minutes: minutes };
}
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' });
for (var departmentName in data) {
if (data.hasOwnProperty(departmentName)) {
data[departmentName].forEach(function (event) {
var startTime = parseTimeString(event[2]);
var endTime = parseTimeString(event[3]);
var start = new Date(2000, 0, 1, startTime.hours, startTime.minutes);
var end = new Date(2000, 0, 1, endTime.hours, endTime.minutes);
if (endTime.hours < startTime.hours || (endTime.hours === startTime.hours && endTime.minutes < startTime.minutes)) {
end.setDate(end.getDate() + 1); // Add a day if end time is earlier than start time
}
dataTable.addRows([[departmentName, event[1], start, end]]);
});
}
}
var options = {
timeline: {
groupByRowLabel: false,
colorByRowLabel: true,
rowLabelStyle: { fontName: 'Sofia Sans Condensed', fontSize: 10, 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);
}
$(document).ready(function () {
$("#btnView").click(function () {
PopulateChart();
return false;
});
// Modal handling
$(".view-detail").click(function () {
$("#myModal").css("display", "block");
});
$(".close").click(function () {
$("#myModal").css("display", "none");
PopulateChart();
});
});
function PopulateChart() {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
drawChart(response.d, "departmentChartsContainer");
$('body').css('overflow', 'hidden'); // Hide scroll bars
// Show the sentence
$('.sentence').show();
},
complete: function () {
$('body').css('overflow', 'auto'); // Revert back to original state
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="registration-form-container">
<div id="registration-form">
<legend>Clockify report!</legend>
<asp:LinkButton ID="lnkSearch" runat="server" class="view-detail" OnClick="lnkSearch_Click">View Detail</asp:LinkButton>
<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 Date " CssClass="label"></asp:Label>
<asp:TextBox ID="flightDate" runat="server" CssClass="input" type="Date"></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 class="row sentence" style="display: none;" runat="server" id="dvLabels">
<asp:Label ID="Label4" runat="server" Text="Total Number of PAX: " CssClass="label" Style="color: red;"></asp:Label>
<asp:Label ID="lblpax" runat="server" Text="10:00" CssClass="label" Style="font-weight: bold;"></asp:Label>
<asp:Label ID="Label5" runat="server" Text=" Total Number of Wheel Chairs:" CssClass="label" Style="color: red;"></asp:Label>
<asp:Label ID="lblwheel" runat="server" Text="12:00" CssClass="label" Style="font-weight: bold;"></asp:Label>
</div>
</div>
</div>
<!-- Container for department Gantt charts -->
<div id="departmentChartsContainer"></div>
<div id="myModal" class="modal" style="display: none;" runat="server">
<div class="modal-content">
<span class="close">×</span>
<!-- GridView content will be placed here -->
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" />
</div>
</div>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Dictionary<string, List<object[]>> GetChartData()
{
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;
}
}
protected void lnkSearch_Click(object sender, EventArgs e)
{
// Call BindGridView function to bind GridView with filtered data
BindGridView();
ClientScript.RegisterStartupScript(this.GetType(), "PopulateChart", "PopulateChart();", true);
}
string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
protected void BindGridView()
{
using (SqlConnection con = new SqlConnection(cs))
{
con.Open();
SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", con);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
GridView1.DataSource = dr;
GridView1.DataBind();
con.Close();
}
}
myModal.Style["display"] = "block";
dvLabels.Attributes.Remove("style");
}
Screenshot
