Populate (Bind) Gantt chart data from databse group wise in ASP.Net using C#

muhammad...

SOLVED CLOSED ACTIVE ANSWERED
User: muhammad12
Posted: on Sep 20, 2023 11:36 PM
Forum: Data Controls
Answer: 1
Views: 891

My database Schema is like This.

Flighttable

Flightid (pk,int,notnull) flightdate (varchar,Null) flightno (varchar,Null)

233 23-may-2023 310

244 23-may-2023 415

EventTable

eventid(pk,int,notnull) eventgroup(varchar(50)) eventname

1 arrival cleaning

2 departure security

DepartmentTable

Deptid(pk,int,notnull) Departmentname(varchar(50))

1 Abc

AssignTable

eventid(pk,int,notnull) eventid(FK, INT,NULL)

12 1

13 1

ActionTable

ActionID(pk,int,notnull) UserId(FK, INT) flightID (FK, INT) starttime (varchar(50) endtime(varchar(50)

33 7 8855 10:33 10:50

34 7 8855 11:33 11:50

I have to draw gantt chart from action table. The action table is saving data of all department as shown above.

My code draw chart when I enter flight no , flightdate and type and click on search button with respect to all department in just one go.

I want to present all eventname on y axis with repect to departwise so that it can be differentiate and compare.

I don't know how to put this logic on my graph.

Here is my code.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
    <link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
    <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>


</head>
<body>
    <form id="form1" runat="server">
        <div id="registration-form">
            <div class='fieldset'>
                <legend>Clockify report!</legend>

                <div class="form-body">
                    <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" style=" color: Black;font-size:20px;"></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>
        </div>
        <div id="chart_div" class="chart" style="max-width: 100%;  overflow-x: hidden; overflow-y: hidden;"></div>
    </form>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['gantt'] });
        //google.charts.setOnLoadCallback(drawChart);
        $("[id*=btnView]").on("click", function () {
            drawChart();
            return false;
        });

        function drawChart() {
            var obj = {};
            obj.flightNo = $.trim($("[id*=flightNo]").val());
            obj.flightDate = $.trim($("[id*=flightDate]").val());
            obj.flightType = $.trim($("[id*=flightType]").val());
            $.ajax({
                type: "POST",

                url: "WebForm6.aspx/GetChartData",
                data: JSON.stringify(obj),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Task ID');
                    data.addColumn('string', 'Task Name');
                    data.addColumn('string', 'Resource');
                    data.addColumn('date', 'Start Date');
                    data.addColumn('date', 'End Date');
                    data.addColumn('number', 'Duration');
                    data.addColumn('number', 'Percent Complete');
                    data.addColumn('string', 'Dependencies');

                    for (var i = 0; i < response.d.length; i++) {
                        var taskId = "Task_" + response.d[i][0].toString();
                        var taskName = response.d[i][1].toString();
                        var resource = response.d[i][1].toString();
                        var startDate = new Date(response.d[i][2].toString());
                        var enddate = new Date(response.d[i][3].toString());
                        var duration = parseInt("100");
                        var percentageComplete = parseInt("100");
                        var dependencies = "";
                        data.addRows([[taskId, taskName, resource, startDate, enddate, duration, percentageComplete, dependencies]]);
                    }
                    var options = {
                        height: 1000, gantt: { trackHeight: 30 }
                    };

                    var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
                    chart.draw(data, options);
                }, error: function (response) {
                    alert(response.responseText);
                }
            });
        }
    </script>
</body>
</html>

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

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Sep 22, 2023 11:43 AM
Report

Hi muhammad12,

Refer the sample.

Note: I have hard coded data inside the WebMethod for binding the Dictionary.

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"></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" style="width: 500px;"></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': ['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: 300,
            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: "Default.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='width: 500px;height: 200px;'>").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>

Code

[WebMethod]
public static Dictionary<string, List<object>> GetChartData(string flightNo, string flightDate, string flightType)
{
    string t = "Time";
    Dictionary<string, List<object>> departmentChartData = new Dictionary<string, List<object>>();
    List<string> depts = new List<string>();
    depts.Add("IT");
    depts.Add("CS");
    depts.Add("EE");
    foreach (string dept in depts)
    {
        string departmentName = dept;
        if (!departmentChartData.ContainsKey(departmentName))
        {
            departmentChartData[departmentName] = new List<object>();
        }
    }

    departmentChartData["IT"].Add(new object[] { 1, "Event1", Convert.ToDateTime("10:30").ToString(), Convert.ToDateTime("11:15").ToString() });
    departmentChartData["IT"].Add(new object[] { 2, "Event2", Convert.ToDateTime("09:30").ToString(), Convert.ToDateTime("10:00").ToString() });
    departmentChartData["CS"].Add(new object[] { 3, "Event3", Convert.ToDateTime("08:30").ToString(), Convert.ToDateTime("10:45").ToString() });
    departmentChartData["CS"].Add(new object[] { 4, "Event4", Convert.ToDateTime("11:30").ToString(), Convert.ToDateTime("12:45").ToString() });
    departmentChartData["EE"].Add(new object[] { 5, "Event5", Convert.ToDateTime("08:45").ToString(), Convert.ToDateTime("10:30").ToString() });
    departmentChartData["EE"].Add(new object[] { 6, "Event6", Convert.ToDateTime("09:30").ToString(), Convert.ToDateTime("10:30").ToString() });

    return departmentChartData;
}

Screenshot

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

Populate (Bind) Gantt chart data from databse group wise in ASP.Net using C#

Company

Explore

Follow us

Contact Us