Hi dharmendr sir,
I want to convert my single gantt chart to multiple.
my database is saving different department name and its events.
i want that each department gantt chart separately.
my databasde table is like this
Id events starttime endtime Department
|
1
|
Jan
|
10:40
|
10:45
|
Airside
|
|
2
|
feb
|
11:00
|
11:10
|
Catering
|
|
3
|
mar
|
12:00
|
12:10
|
Airside
|
|
4
|
Apr
|
1:00
|
1:10
|
FOCC
|
|
5
|
may
|
12:00
|
12:20
|
Catering
|
|
6
|
Jan
|
9:00
|
9:30
|
Catering
|
|
7
|
feb
|
7:00
|
7:40
|
FOCC
|
|
8
|
feb
|
8:00
|
8:25
|
Airside
|
|
9
|
Jan
|
10:00
|
10:32
|
FOCC
|
|
10
|
Jan
|
6:00
|
6:15
|
Flight Services
|
|
11
|
mar
|
5:00
|
5:30
|
FOCC
|
|
12
|
mar
|
9:00
|
9:20
|
Flight Services
|
|
NULL
|
NULL
|
NULL
|
NULL
|
NULL
|
I want that there should be a gantt chart of each department with events name on y axis and time on x axis.
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication1.WebForm6" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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 class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart">
</canvas>
</div>
</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>
<div class="chartMenu">
<p>Gantt Chart for Each Department</p>
</div>
<div class="chartCard">
<div class="chartBox">
<%-- Chart containers will be dynamically created here --%>
</div>
</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 () {
fetchDataFromServer();
});
function fetchDataFromServer() {
$.ajax({
type: "POST",
url: "WebForm6.aspx/GetChartData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
const data = {
datasets: [{
label: 'Month data',
data: response.d,
borderWidth: 1,
borderSkipped: false,
borderRadius: 5,
barPercentage: 0.5
}]
};
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
x: {
type: 'time',
time: {
unit: 'minute',
displayFormats: {
quarter: 'HH:mm'
}
},
min: '2024-01-03 00:00',
max: '2024-01-03 23:59'
}
}
}
};
new Chart(document.getElementById('myChart'), 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>
Code
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 List<object> GetChartData()
{
List<object> chartData = new List<object>();
// Fetch data from the database
string connectionString = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
string query = "SELECT * FROM test";
using (SqlConnection connection = new SqlConnection(connectionString))
{
using (SqlCommand command = new SqlCommand(query, connection))
{
connection.Open();
SqlDataReader reader = command.ExecuteReader();
while (reader.Read())
{
string month = reader["events"].ToString();
string startTime = reader["starttime"].ToString();
string endTime = reader["endtime"].ToString();
// Format data for the chart
chartData.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;
}
}
}
this is code of single gantt chart populated from database. i dont know how to convert it into multiple gantt chart populated from databse
