Populate Multi-series Google Gantt Chart in ASP.Net

muhammad...

SOLVED CLOSED ACTIVE ANSWERED
User: muhammad12
Posted: on Feb 23, 2024 12:48 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 2026

Hi dharmendr sir,

My code generate multiple gantt chart with their name as a title of different department when i click on search button.

i want to merge it in one gantt chart of all department data with department name as a label or heading or extra event.

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;
using System.Globalization;

namespace GANTTCHART
{
    public partial class Mergegraph : 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"],
                row["starttime"].ToString(),
                row["endtime"].ToString()
            });
        }
        return departmentChartData;
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mergegraph.aspx.cs" Inherits="GANTTCHART.Mergegraph" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .container { width: 80%; margin: 0 auto; }
        
        .chart-title { font-weight: bold; color: black; font-size: 50px; text-align: left; }
        .chart { min-height: 300px; width: 100%; margin-bottom: 80px; }
        
        text { font-size: 24px !important; /*font-style: bold !important;*/ }
        
        .chart-container { min-height: 400px; width: 100%; /* Set the chart container to 100% width */ margin-bottom: 80px; }
        
        /* Constrain the width of the Gantt chart within the container */
        .chart-container .chart { width: 100%; }
    </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("1970-01-01T" + data[i][2].toString());
               var endDate = new Date("1970-01-01T" + 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: 300,
               width: '100%',
               gantt: {
                   trackHeight: 30
               }
           };

           var chart = new google.visualization.Gantt(document.getElementById(chartDivId));
           chart.draw(dataTable, options);
       }

       $(document).ready(function () {

           $("#btnView").click(function () {
               var flightNo = $("#flightNo").val();
               var flightDate = $("#flightDate").val();
               var flightType = $("#flightType").val();

               $.ajax({
                   type: "POST",
                   url: "Mergegraph.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];

                           // 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);
                       }

                       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 No" CssClass="label"></asp:Label>
                        <asp:TextBox ID="flightDate" runat="server" CssClass="input" type="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>
 
                    <!-- Add other input elements here -->
                    <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"></div>
    </form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Feb 23, 2024 10:55 AM
Report

Hi muhammad12,

Refer below sample code.

HTML

<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 No" CssClass="label"></asp:Label>
                <asp:TextBox ID="flightDate" runat="server" CssClass="input" type="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>

            <!-- Add other input elements here -->
            <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"></div>
<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: ["timeline"] });
    function drawChart(data, chartDivId) {
        var container = document.getElementById(chartDivId);
        var chart = new google.visualization.Timeline(container);

        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({ type: 'string', id: 'Role' });
        dataTable.addColumn({ type: 'string', id: 'Name' });
        dataTable.addColumn({ type: 'datetime', id: 'Start' });
        dataTable.addColumn({ type: 'datetime', id: 'End' });

        for (var i = 0; i < data.length; i++) {
            var dept = data[i].DeptName;
            var event = data[i].EventName;
            var startDate = new Date(data[i].StartDate);
            var endDate = new Date(data[i].EndDate);
            dataTable.addRows([[dept, event, startDate, endDate]]);
        }
        var options = {
            timeline: {},
            height: 500,
        };

        chart.draw(dataTable, options);
    }

    $(document).ready(function () {
        $("#btnView").click(function () {
            var flightNo = $("#flightNo").val();
            var flightDate = $("#flightDate").val();
            var flightType = $("#flightType").val();
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetChartData",
                data: JSON.stringify({ flightNo: flightNo, flightDate: flightDate, flightType: flightType }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    drawChart(response.d, "departmentChartsContainer");
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
            return false;
        });
    });
</script>

Code

[WebMethod]
public static List<MapData> GetChartData(string flightNo, string flightDate, string flightType)
{
    List<MapData> mapDatas = new List<MapData>();
    mapDatas.Add(new MapData { DeptName = "Traffic", EventName = "Jan", StartDate = "2024/02/20 11:02:00 am", EndDate = "2024/02/20 11:03:00 am" });
    mapDatas.Add(new MapData { DeptName = "Traffic", EventName = "Feb", StartDate = "2024/02/20 11:03:00 am", EndDate = "2024/02/20 11:04:00 am" });
    mapDatas.Add(new MapData { DeptName = "Traffic", EventName = "Mar", StartDate = "2024/02/20 11:04:00 am", EndDate = "2024/02/20 11:05:00 am" });
    mapDatas.Add(new MapData { DeptName = "Traffic", EventName = "Apr", StartDate = "2024/02/20 11:06:00 am", EndDate = "2024/02/20 11:38:00 am" });
    mapDatas.Add(new MapData { DeptName = "Airside", EventName = "Jan", StartDate = "2024/02/20 11:02:00 am", EndDate = "2024/02/20 11:03:00 am" });
    mapDatas.Add(new MapData { DeptName = "Airside", EventName = "Feb", StartDate = "2024/02/20 11:06:00 am", EndDate = "2024/02/20 11:38:00 am" });
    mapDatas.Add(new MapData { DeptName = "Airside", EventName = "Mar", StartDate = "2024/02/20 11:05:00 am", EndDate = "2024/02/20 11:30:00 am" });
    mapDatas.Add(new MapData { DeptName = "Airside", EventName = "Apr", StartDate = "2024/02/20 11:25:00 am", EndDate = "2024/02/20 11:40:00 am" });
    mapDatas.Add(new MapData { DeptName = "Catering", EventName = "Jan", StartDate = "2024/02/20 11:02:00 am", EndDate = "2024/02/20 11:03:00 am" });
    mapDatas.Add(new MapData { DeptName = "Catering", EventName = "Feb", StartDate = "2024/02/20 11:44:00 am", EndDate = "2024/02/20 11:46:00 am" });
    mapDatas.Add(new MapData { DeptName = "Catering", EventName = "Mar", StartDate = "2024/02/20 11:46:00 am", EndDate = "2024/02/20 11:47:00 am" });
    mapDatas.Add(new MapData { DeptName = "Catering", EventName = "Apr", StartDate = "2024/02/20 11:47:00 am", EndDate = "2024/02/20 12:00:00 pm" });

    return mapDatas;
}

public class MapData
{
    public string DeptName { get; set; }
    public string EventName { get; set; }
    public string StartDate { get; set; }
    public string EndDate { get; set; }
}

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate Multi-series Google Gantt Chart in ASP.Net

Company

Explore

Follow us

Contact Us