Hi dharmendr sir,
I used chart.js library for multiple gantt chart but it does not work.
please help me sir.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="staticchart.aspx.cs" Inherits="WebApplication1.staticchart" %>
<!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.0">
<title>Gantt Chart</title>
<!-- Include Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Function to parse date strings and return a JavaScript Date object
function parseDate(dateString) {
return new Date(dateString);
}
// Function to create Gantt chart
function createGanttChart(chartData) {
var ctx = document.getElementById('ganttChart').getContext('2d');
// Define datasets
var datasets = chartData.map(function (departmentData) {
return {
label: departmentData.Department,
backgroundColor: getRandomColor(),
data: departmentData.Data.map(function (data) {
return {
x: parseDate(data.x[0]),
y: data.y,
xEnd: parseDate(data.x[1]),
};
})
};
});
// Create Gantt chart using Chart.js
new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: datasets
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'MMM D'
}
},
position: 'bottom',
ticks: {
beginAtZero: true
}
},
y: {
ticks: {
beginAtZero: true
}
}
},
tooltips: {
callbacks: {
title: function (tooltipItem) {
return 'Event: ' + tooltipItem[0].yLabel;
},
label: function (tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var startTime = dataset.data[tooltipItem.index].x;
var endTime = dataset.data[tooltipItem.index].xEnd;
return 'Start: ' + startTime.toLocaleDateString() + ' - End: ' + endTime.toLocaleDateString();
}
}
}
}
});
}
// Function to generate random colors for each department
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Fetch data from the server and create the Gantt chart
document.addEventListener('DOMContentLoaded', function () {
// Call the server-side method to get chart data
var chartData = <%= GetChartData() %>;
// Create Gantt chart
createGanttChart(chartData);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<canvas id="ganttChart" width="800" height="400"></canvas>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class staticchart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static List<object> GetChartData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("events");
dt.Columns.Add("starttime");
dt.Columns.Add("endtime");
dt.Columns.Add("Department");
dt.Rows.Add(1, "Jan", "10:40", "10:45", "Airside");
dt.Rows.Add(2, "feb", "11:00", "11:10", "Catering");
dt.Rows.Add(3, "mar", "12:00", "12:10", "Airside");
dt.Rows.Add(4, "Apr", "1:00", "1:10", "FOCC");
dt.Rows.Add(5, "may", "12:00", "12:20", "Catering");
dt.Rows.Add(6, "Jan", "9:00", "9:30", "Catering");
dt.Rows.Add(7, "feb", "7:00", "7:40", "FOCC");
dt.Rows.Add(8, "feb", "8:00", "8:25", "Airside");
dt.Rows.Add(9, "Jan", "10:00", "10:32", "FOCC");
dt.Rows.Add(10, "Jan", "6:00", "6:15", "Flight Services");
dt.Rows.Add(11, "mar", "5:00", "5:30", "FOCC");
dt.Rows.Add(12, "mar", "9:00", "9:20", "Flight Services");
var departments = (from row in dt.AsEnumerable()
select row["Department"]).Distinct().ToList();
List<object> chartDatas = new List<object>();
foreach (string department in departments)
{
List<Data> datas = (from row in dt.AsEnumerable()
where row["Department"].ToString().ToLower().Equals(department.ToLower())
select new Data
{
y = row["events"].ToString(),
x = new string[]
{
Convert.ToDateTime(row["starttime"]).ToString("yyyy-MM-ddTHH:mm:ss"),
Convert.ToDateTime(row["endtime"]).ToString("yyyy-MM-ddTHH:mm:ss")
},
}).ToList();
chartDatas.Add(new ChartData
{
Department = department,
Data = datas
});
}
return chartDatas;
}
public class Data
{
public string[] x { get; set; }
public string y { get; set; }
}
public class ChartData
{
public string Department { get; set; }
public List<Data> Data { get; set; }
}
}
}
