Hi Dharmendr sir,
i have a code of multiple gantt chart populated from database .
i wnat when i put flight number date and type then click on search button then every department chart should appear. but when i click on button nothing appear
This is my code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication1.WebForm6" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* { margin: 0; padding: 0; font-family: sans-serif; }
.chartMenu { width: 100vw; height: 40px; background: #1A1A1A; color: rgba(54, 162, 235, 1); }
.chartMenu p { padding: 10px; font-size: 20px; }
.chartCard { width: 100vw; height: calc(100vh - 40px); background: rgba(54, 162, 235, 0.2); display: flex; align-items: center; justify-content: center; }
.chartBox { width: 700px;; padding: 20px; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; }
</style>
</head>
<body>
<form id="form1" runat="server">
<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>
<!-- Add this div for chart container -->
<div id="chartsContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
$(function () {
$("#btnView").click(function () {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
fetchDataFromServer(flightNo, flightDate, flightType);
});
});
function fetchDataFromServer(flightNo, flightDate, flightType) {
$.ajax({
type: "POST",
url: "WebForm6.aspx/GetChartData",
data: JSON.stringify({ flightNo: flightNo, flightDate: flightDate, flightType: flightType }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#chartsContainer").empty();
Object.keys(response.d).forEach(function (departmentName) {
var data = {
datasets: [{
label: departmentName,
data: response.d[departmentName],
borderWidth: 1,
borderSkipped: false,
borderRadius: 5,
barPercentage: 0.5
}]
};
var config = {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
scales: {
x: {
type: 'time',
time: {
unit: 'minute',
displayFormats: {
quarter: 'HH:mm'
}
}
}
}
}
};
var chartElement = document.createElement('canvas');
chartElement.id = 'myChart_' + departmentName;
chartElement.style.marginBottom = '20px';
$("#chartsContainer").append(chartElement);
new Chart(chartElement, config);
});
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;
},
error: function (error) {
console.log("Error fetching data from server:", error);
}
});
}
</script>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Net.NetworkInformation;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class WebForm6 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static Dictionary<string, List<object>> GetChartData(string flightNo, string flightDate, string flightType)
{
Dictionary<string, List<object>> chartData = new Dictionary<string, List<object>>();
string t = "Time";
string connectionString = 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 connection = new SqlConnection(connectionString))
{
using (SqlCommand command = new SqlCommand(query, connection))
{
command.Parameters.AddWithValue("@flightNo", flightNo);
string flightDateStr = flightDate;
DateTime selectedDate = DateTime.Parse(flightDateStr);
command.Parameters.AddWithValue("@flightDate", flightDate);
command.Parameters.AddWithValue("@flightType", flightType);
connection.Open();
SqlDataReader reader = command.ExecuteReader();
while (reader.Read())
{
string departmentName = reader["DeptName"].ToString();
string month = reader["eventname"].ToString();
string startTime = reader["starttime"].ToString();
string endTime = reader["endtime"].ToString();
if (!chartData.ContainsKey(departmentName))
{
chartData[departmentName] = new List<object>();
}
chartData[departmentName].Add(new
{
x = new[] { Convert.ToDateTime(startTime).ToString("yyyy-MM-dd HH:mm"), Convert.ToDateTime(endTime).ToString("yyyy-MM-dd HH:mm") },
y = month
});
}
}
}
return chartData;
}
}
}
please help me sir.
