hi dharmendr sir,
i have code of google timeline its working perfect.
just one thing i cannt fixed it that its end borderline.
o mean timeline start borderline is made and end is not making means full box is not appear. right side timeline border is not made so that i look like incomplete and last bars info is also hiding.
i am attaching screen shot for help
https://we.tl/t-36KB54xRFa
plz look in to above link on left side borderline is appear but on right side its cut. i dont know how to fix it plzz help me sir.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GANTTCHART.WebForm1" %>
<!DOCTYPE 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 */
/*margin-top:2000px;*/
}
#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();
drawChart({}, "departmentChartsContainer");
$.ajax({
type: "POST",
url: "WebForm1.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");
$('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>--%>
<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: 10, bold: true, fontName: 'Sofia Sans Condensed', color: '#000000' },
avoidOverlappingGridLines: true,
},
alternatingRowStyle: false,
backgroundColor: '#ffd',
width: '100%',
height: 2000
};
chart.draw(dataTable, options);
}
function PopulateChart() {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
// drawChart({}, "departmentChartsContainer"); // Draw an empty chart initially
$.ajax({
type: "POST",
url: "WebForm1.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");
$('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" OnClick="btnView_Click1" />
</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" 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" 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>
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using static System.Collections.Specialized.BitVector32;
namespace GANTTCHART
{
public partial class WebForm1 : System.Web.UI.Page
{
String cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Dictionary<string, List<object[]>> GetChartData(string flightNo, string flightDate, string flightType)
{
string conString = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
string query = "SELECT Department.DeptName, ActionID, eventname, starttime, CASE WHEN ISNULL(endtime, '') = '' THEN CONVERT(varchar(5), DATEADD(MINUTE, 1, CONVERT(time, starttime))) ELSE endtime END AS endtime FROM events INNER JOIN Assign ON Assign.eventid = events.eventid INNER JOIN Department ON Department.DeptID = Assign.DeptID INNER JOIN Action ON Assign.AssignID = Action.AssignID INNER JOIN flights ON flights.flightid = Action.flightid WHERE flights.flightno = @flightNo AND CONVERT(date, flights.flightdate) = @flightDate AND events.eventtype = @flightType and events.eventgroup = 'Time' ";
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@flightNo", flightNo);
//string flightDateStr = flightDate;
DateTime selectedDate = DateTime.Parse(flightDate);
cmd.Parameters.AddWithValue("@flightDate", selectedDate);
cmd.Parameters.AddWithValue("@flightType", flightType);
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
Dictionary<string, List<object[]>> departmentChartData = new Dictionary<string, List<object[]>>();
while (reader.Read())
{
string departmentName = reader["DeptName"].ToString();
if (!departmentChartData.ContainsKey(departmentName))
{
departmentChartData[departmentName] = new List<object[]>();
}
departmentChartData[departmentName].Add(new object[]
{
reader["eventname"],
reader["eventname"] ,
reader["starttime"].ToString(),
reader["endtime"].ToString()
});
}
return departmentChartData;
}
}
}
//protected void btnView_Click1(object sender, EventArgs e)
//{
// //lblpax.Text = "1000";
// SqlConnection con = new SqlConnection(cs);
// con.Open();
// SqlCommand cmd = new SqlCommand("SELECT Action.starttime FROM events INNER JOIN Assign ON Assign.eventid = events.eventid INNER JOIN Department ON Department.DeptID = Assign.DeptID INNER JOIN Action ON Assign.AssignID = Action.AssignID INNER JOIN flights ON flights.flightid = Action.flightid INNER JOIN Users ON Users.UserID = Action.UserID INNER JOIN Station ON Users.StationID = Station.StationID where flightno = '"+flightNo.Text+ "' and flightdate = '" + flightDate.Text + "' and eventtype = '"+flightType.Text+"' and eventgroup = 'Text' and eventname = 'Total Wheel Chair' and Department.DeptName ='Traffic' ", con);
// SqlDataReader dr = cmd.ExecuteReader();
// if (dr.Read())
// lblwheel.Text = dr.GetValue(0).ToString();
// //lblwheel.Text = "1";
// ClientScript.RegisterStartupScript(this.GetType(), "PopulateChart", "PopulateChart();", true);
//}
protected void btnView_Click1(object sender, EventArgs e)
{
string query = @"SELECT Action.starttime
FROM events
INNER JOIN Assign ON Assign.eventid = events.eventid
INNER JOIN Department ON Department.DeptID = Assign.DeptID
INNER JOIN Action ON Assign.AssignID = Action.AssignID
INNER JOIN flights ON flights.flightid = Action.flightid
INNER JOIN Users ON Users.UserID = Action.UserID
INNER JOIN Station ON Users.StationID = Station.StationID
WHERE flightno = @flightNo
AND CONVERT(date, flightdate) = @flightDate
AND eventtype = @flightType
AND eventgroup = 'Text'
AND eventname = 'Total Wheel Chair'
AND Department.DeptName = 'Traffic'";
using (SqlConnection con = new SqlConnection(cs))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@flightNo", flightNo.Text);
cmd.Parameters.AddWithValue("@flightDate", flightDate.Text);
cmd.Parameters.AddWithValue("@flightType", flightType.SelectedValue);
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblwheel.Text = dr.GetValue(0).ToString();
}
else
{
lblwheel.Text = "No data found";
}
dr.Close();
}
catch (Exception ex)
{
lblwheel.Text = "Error: " + ex.Message;
}
}
}
string query1 = @"SELECT Action.starttime
FROM events
INNER JOIN Assign ON Assign.eventid = events.eventid
INNER JOIN Department ON Department.DeptID = Assign.DeptID
INNER JOIN Action ON Assign.AssignID = Action.AssignID
INNER JOIN flights ON flights.flightid = Action.flightid
INNER JOIN Users ON Users.UserID = Action.UserID
INNER JOIN Station ON Users.StationID = Station.StationID
WHERE flightno = @flightNo
AND CONVERT(date, flightdate) = @flightDate
AND eventtype = @flightType
AND eventgroup = 'Text'
AND eventname = 'PAX Load'
AND Department.DeptName = 'Traffic'";
using (SqlConnection con = new SqlConnection(cs))
{
using (SqlCommand cmd = new SqlCommand(query1, con))
{
cmd.Parameters.AddWithValue("@flightNo", flightNo.Text);
cmd.Parameters.AddWithValue("@flightDate", flightDate.Text);
cmd.Parameters.AddWithValue("@flightType", flightType.SelectedValue);
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblpax.Text = dr.GetValue(0).ToString();
}
else
{
lblpax.Text = "No data found";
}
dr.Close();
}
catch (Exception ex)
{
lblwheel.Text = "Error: " + ex.Message;
}
}
}
ClientScript.RegisterStartupScript(this.GetType(), "PopulateChart", "PopulateChart();", true);
}
protected void lnkSearch_Click(object sender, EventArgs e)
{
// Call BindGridView function to bind GridView with filtered data
BindGridView();
//ClientScript.RegisterStartupScript(this.GetType(), "Popup", "<script>openModal();</script>");
ClientScript.RegisterStartupScript(this.GetType(), "PopulateChart", "PopulateChart();", true);
}
protected void BindGridView()
{
using (SqlConnection con = new SqlConnection(cs))
{
con.Open();
SqlCommand cmd = new SqlCommand("SELECT events.eventname AS 'Task', Action.starttime AS 'Value', Department.DeptName AS 'Department' FROM events INNER JOIN Assign ON Assign.eventid = events.eventid INNER JOIN Department ON Department.DeptID = Assign.DeptID INNER JOIN Action ON Assign.AssignID = Action.AssignID INNER JOIN flights ON flights.flightid = Action.flightid INNER JOIN Users ON Users.UserID = Action.UserID INNER JOIN Station ON Users.StationID = Station.StationID WHERE flights.flightno = '" + flightNo.Text + "' AND CONVERT(date, flights.flightdate) = '" + flightDate.Text + "' AND events.eventgroup = 'Text' AND events.eventtype = '" + flightType.Text + "' ORDER BY Department ASC ", con);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows == true)
{
GridView1.DataSource = dr;
GridView1.DataBind();
con.Close();
}
}
myModal.Style["display"] = "block";
// dvLabels.Attributes.Remove("style");
}
}
}
