Hi Dharmendr sir,
I have a gantt chart code that is populated from database and draw multiple gantt chart according to every department I want with every gantt chart it should show its department name as a heading or title
Plz help me
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="departmentchart.aspx.cs" Inherits="WebApplication3.departmentchart" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Gantt Chart Example</title>
<link rel="stylesheet" type="text/css" href="report.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style type="text/css">
text { font-size: 24px !important; font-style:bold !important; }
</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 type="text/javascript">
google.charts.load('current', { 'packages': ['gantt'] });
function drawGanttChart( data, chartDivId) {
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');
for (var i = 0; i < data.length; i++) {
var taskId = "Task_" + data[i][0].toString();
var taskName = data[i][1].toString();
var resource = data[i][1].toString();
var startDate = new Date(data[i][2].toString());
var enddate = new Date(data[i][3].toString());
var duration = parseInt("100");
var percentageComplete = parseInt("100");
var dependencies = "";
dataTable.addRows([[taskId, taskName, resource, startDate, enddate, duration, percentageComplete, dependencies]]);
}
var options = {
height: 400, gantt: { trackHeight: 30 }
};
var chart = new google.visualization.Gantt(document.getElementById(chartDivId));
chart.draw(dataTable, options);
/* chart.setTitle(departmentName);*/
}
$(document).ready(function () {
$("#btnView").click(function () {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
$.ajax({
type: "POST",
url: "departmentchart.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
for (var departmentName in response.d) {
var departmentData = response.d[departmentName];
var chartDivId = "chart_div_" + departmentName;
var chartDiv = $("<div style='max-width: 100%; overflow-x: hidden; overflow-y: hidden;'>").attr("id", chartDivId).addClass("chart");
departmentChartsContainer.append(chartDiv);
drawGanttChart(departmentData, chartDivId,);
}
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;
});
});
</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 Date" 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>
<div class="input-group">
</br>
<asp:Button ID="btnView" runat="server" Text="Submit" class="btn" />
</div>
</div>
</div>
</div>
<!-- Container for department Gantt charts -->
<div id="departmentChartsContainer" style="max-width: 100%; overflow-x: hidden; overflow-y: hidden;"></div>
</form>
</body>
</html>
namespace WebApplication3
{
public partial class departmentchart : System.Web.UI.Page
{
[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);
cmd.Parameters.AddWithValue("@flightDate", flightDate);
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;
}
}
}
}
}
}
}
