Group Row by Label in Google TimeLine chart in ASP.Net using jQuery

muhammad...

SOLVED CLOSED ACTIVE ANSWERED
User: muhammad12
Posted: on Feb 26, 2024 12:12 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2561
Sample Code: Download

Hi Dharmendr sir,

I have google timeline code that working perfect. Just one issue its repeat department name on y axis on every row.

For exapmle

Caltering events bars1

Catering eventbars2

Caltering events bars3

Catering eventbars4

Focc events bars1

Focc eventbars2

Focc events bars3

Focc eventbars4

Airside events bars1

Airside eventbars2

Airside events bars3

Airside eventbars4

I just want that department name should shows just one time not repeated.

<%@ 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>
   <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>
       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: 'Department' });
           dataTable.addColumn({ type: 'string', id: 'Event' });
           dataTable.addColumn({ type: 'date', id: 'Start' });
           dataTable.addColumn({ type: 'date', id: 'End' });

           for (var departmentName in data) {
               if (data.hasOwnProperty(departmentName)) {
                   data[departmentName].forEach(function (event) {
                       var start = new Date('2000/01/01 ' + event[2]); // Assuming the date component is irrelevant
                       var end = new Date('2000/01/01 ' + event[3]); // Assuming the date component is irrelevant
                       dataTable.addRows([[departmentName, event[1], start, end]]);
                   });
               }
           }

           var options = {
               timeline: {
                   groupByRowLabel: false // Display each event on a new line
               },
               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: "Mergegraph.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>
</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"  ></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>

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 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 CONVERT(date, flights.flightdate) = @flightDate AND events.eventtype = @flightType";

            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);
                    cmd.Parameters.AddWithValue("@flightDate",flightDate);
                    cmd.Parameters.AddWithValue("@flightType", flightType);

                    con.Open();
                    SqlDataReader reader = cmd.ExecuteReader();

                    Dictionary<string, List<object[]>> departmentChartData = new Dictionary<string, List<object[]>>();

                    while (reader.Read())
                    {
                        string departmentName = reader["DeptName"].ToString();
                        if (!departmentChartData.ContainsKey(departmentName))
                        {
                            departmentChartData[departmentName] = new List<object[]>();
                        }

                        departmentChartData[departmentName].Add(new object[]
                        {
                              reader["eventname"],
                              reader["eventname"] + " - " + reader["ActionID"],
                              reader["starttime"].ToString(),
                              reader["endtime"].ToString()
                        });
                    }

                    return departmentChartData;
                }
            }
        }
    }
}

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Feb 29, 2024 01:00 PM
Report

Refer below sample.

HTML

<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>
    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: 'Department' });
        dataTable.addColumn({ type: 'string', id: 'Event' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        for (var i = 0; i < data.length; i++) {
            dataTable.addRows([[data[i].Role, data[i].Name, new Date(data[i].starttime), new Date(data[i].endtime)]]);
        }

        var options = {
            timeline: {
                //groupByRowLabel: false // Display each event on a new line
            },
            height: 700,
        };

        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>
<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"></div>

Namespaces

using System.Data;
using System.Web.Services;

Code

[WebMethod]
public static List<ChartData> GetChartData(string flightNo, string flightDate, string flightType)
{
    List<ChartData> departmentChartData = new List<ChartData>();
    DataTable dt = new DataTable();
    dt.Columns.Add("ActionID");
    dt.Columns.Add("DeptName");
    dt.Columns.Add("eventname");
    dt.Columns.Add("starttime");
    dt.Columns.Add("endtime");
    dt.Rows.Add(1, "Caltering", "events bars1", new DateTime(2024, 2, 6), new DateTime(2024, 2, 10));
    dt.Rows.Add(2, "Caltering", "events bars2", new DateTime(2024, 2, 7), new DateTime(2024, 2, 11));
    dt.Rows.Add(3, "Caltering", "events bars3", new DateTime(2024, 2, 6), new DateTime(2024, 2, 13));
    dt.Rows.Add(4, "Airside", "events bars1", new DateTime(2024, 2, 6), new DateTime(2024, 2, 10));
    dt.Rows.Add(5, "Airside", "2", new DateTime(2024, 2, 7), new DateTime(2024, 2, 11));
    dt.Rows.Add(6, "Focc", "events bars4", new DateTime(2024, 2, 6), new DateTime(2024, 2, 13));

    dt.DefaultView.Sort = "DeptName";
    dt = dt.DefaultView.ToTable();

    foreach (DataRow dr in dt.Rows)
    {
        departmentChartData.Add(new ChartData
        {
            Role = dr["DeptName"].ToString(),
            Name = dr["eventname"].ToString() + " - " + dr["ActionID"].ToString(),
            starttime = dr["starttime"].ToString(),
            endtime = dr["endtime"].ToString()
        });
    }

    return departmentChartData;
}

public class ChartData
{
    public string Role { get; set; }
    public string Name { get; set; }
    public string starttime { get; set; }
    public string endtime { get; set; }
}

Screenshot

Group Row by Label in Google TimeLine chart in ASP.Net using jQuery

Company

Explore

Follow us

Contact Us