Hi dharmendr sir,
I have multiple gantt chart of different department.
I want to fix it x axis scale so that it should calculate min and max of all department then assign min and max to x axis so that all department x axis should start and end with same value.
I have a code which give me error like this when i run the code.
Traffic
Cannot read properties of null (reading 'valueOf')×
Airside
Cannot read properties of null (reading 'valueOf')×
Catering
Cannot read properties of null (reading 'valueOf')×
this is my console message:
Department: Traffic, Start Time: 20/02/2024 11:02:00 am, End Time: 20/02/2024 11:03:00 am
staticganttchart.aspx:77
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="staticganttchart.aspx.cs" Inherits="GANTTCHART.staticganttchart" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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 type="text/javascript">
google.charts.load('current', { 'packages': ['gantt'] });
$(document).ready(function () {
$("#btnView").click(function () {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
$.ajax({
type: "POST",
url: "staticganttchart.aspx/GetChartData",
data: JSON.stringify({ flightNo: flightNo, flightDate: flightDate, flightType: flightType }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var departmentChartsContainer = $("#departmentChartsContainer");
departmentChartsContainer.empty(); // Clear any existing charts
// Calculate overall min and max time
var overallMinTime = new Date(2024, 0, 1, 0, 0);
var overallMaxTime = new Date(2024, 0, 2, 0, 0);
if (response.d) {
for (var departmentName in response.d) {
var departmentData = response.d[departmentName];
if (departmentData && departmentData.length > 0) {
for (var i = 0; i < departmentData.length; i++) {
var startTimeStr = departmentData[i][2];
var endTimeStr = departmentData[i][3];
console.log("Department: " + departmentName + ", Start Time: " + startTimeStr + ", End Time: " + endTimeStr);
// Check if the start and end time values are not null and are valid dates
if (startTimeStr && endTimeStr) {
var startTime = new Date(startTimeStr);
var endTime = new Date(endTimeStr);
// Check if startTime and endTime are valid Date objects
if (!isNaN(startTime.valueOf()) && !isNaN(endTime.valueOf())) {
if (startTime < overallMinTime) {
overallMinTime = startTime;
}
if (endTime > overallMaxTime) {
overallMaxTime = endTime;
}
}
}
}
}
}
}
// Now, you can use the overallMinTime and overallMaxTime for further processing
for (var departmentName in response.d) {
var departmentData = response.d[departmentName];
// Create a title element for the department name with styling
var titleElement = $("<div class='chart-title'>").text(departmentName);
departmentChartsContainer.append(titleElement);
var chartDivId = "chart_div_" + departmentName;
var chartDiv = $("<div style='width: 100%;'>").attr("id", chartDivId).addClass("chart");
departmentChartsContainer.append(chartDiv);
drawGanttChart(departmentData, chartDivId, overallMinTime, overallMaxTime);
}
if (Object.keys(response.d).length === 0) {
// Handle the case when no department data is available
departmentChartsContainer.html("<p>No department data available.</p>");
}
},
error: function (response) {
alert(response.responseText);
}
});
return false;
});
});
function drawGanttChart(data, chartDivId, overallMinTime, overallMaxTime) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Task ID');
dataTable.addColumn('string', 'Task Name');
dataTable.addColumn('string', 'Resource');
dataTable.addColumn('date', 'Start Date');
dataTable.addColumn('date', 'End Date');
dataTable.addColumn('number', 'Duration');
dataTable.addColumn('number', 'Percent Complete');
dataTable.addColumn('string', 'Dependencies');
// Set the minimum and maximum values for the horizontal axis
var options = {
height: 300,
width: '100%',
gantt: {
trackHeight: 30
},
hAxis: {
title: 'Time of Day',
format: 'HH:mm',
minValue: overallMinTime,
maxValue: overallMaxTime
},
vAxis: {
title: 'Resource'
}
};
// Add your existing rows
for (var i = 0; i < data.length; i++) {
// Add rows to the data table
}
var chart = new google.visualization.Gantt(document.getElementById(chartDivId));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div id="registration-form">
<div class='fieldset'>
<h1> Flight Operations Report</h1>
<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" font-color="black" TextMode="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>
<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" style="margin-top:100px; "></div>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GANTTCHART
{
public partial class staticganttchart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Dictionary<string, List<object>> GetChartData(string flightNo, string flightDate, string flightType)
{
string t = "Time";
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 flights.flightdate = @flightDate AND events.eventtype = @flightType AND events.eventgroup = '" + t + "' ";
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(flightDateStr);
//string formattedDate = selectedDate.ToString("dd-MMM-yyyy");
cmd.Parameters.AddWithValue("@flightDate", selectedDate);
cmd.Parameters.AddWithValue("@flightType", flightType);
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
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["ActionID"],
row["eventname"],
Convert.ToDateTime(row["starttime"].ToString().Replace('.', ':')).ToString(),
Convert.ToDateTime(row["endtime"].ToString().Replace('.', ':')).ToString()
});
}
return departmentChartData;
}
}
}
}
}
}
}
