Populate Google TimeLine chart with 24 hours Time format in ASP.Net

muhammad...

SOLVED CLOSED ACTIVE ANSWERED
User: muhammad12
Posted: on Jun 07, 2024 12:32 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 498

Hi dharmendr sir,

this is a code of time line. its working prfect when start time is in 12 hours but my database start and end time column is saving time in 24 hours like 15:30 is start time and end15:40 is end time and here is showing error. but if start time is 3:30 and end time is 3:40 its working. i want to set it according to 24 hours

<%@ 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>
    <!-- Include Google Font link -->
    <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;700&display=swap" rel="stylesheet"/>
    <style>
  
         /* Style to center the input form */
       #registration-form-container {
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Align form to the top */
            overflow: hidden;
            margin-top: 0px; /* Adjust top margin as needed */
        }

       #registration-form {
            display: inline-block; /* Ensure it only takes the necessary width */
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f2f2f2;
            border-radius: 8px;
            overflow:hidden;
            font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */
        }
        
       /* Style to make the "Clockify report!" title more prominent */
       legend {
           font-weight: bold;
           font-size: 20px;
           margin-bottom: 20px;
           font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */
       }

       /* Style to place input elements in one row */
       .input-group {
           display: inline-block;
           margin-right: 10px; /* Adjust as needed */
       }

       /* Style to adjust the width of input elements */
       .input {
           width: 150px; /* Adjust as needed */
           padding: 5px;
           border: 1px solid #ccc;
           border-radius: 4px;
           box-sizing: border-box;
           font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */
       }

       /* Style for labels */
       .label {
           display: block;
           margin-bottom: 5px;
           color: black;
           font-size: 14px;
           font-weight: bold;
           font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */
       }

       /* Style for buttons */
       .btn {
           background-color: #4CAF50;
           color: white;
           padding: 10px 20px;
           border: none;
           font-weight: bold;
           border-radius: 4px;
           cursor: pointer;
           font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */
       }

       /* Hover effect for buttons */
       .btn:hover {
           background-color: #45a049;
       }

       /* Style to make sure the timeline adjusts according to device width */
       #departmentChartsContainer {
           white-space: nowrap;
           margin-top: 20px;
           font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */
            overflow-x: hidden; /* Hide horizontal scrollbar */
   
            overflow-y: hidden; 
            width: 100%; /* Fix the width of the container */
    display: block;
       }

       .sentence {
           display: flex;
           align-items: center;
           margin-top: 10px;
       }

       .sentence .label {
           margin-right: 5px;
       }
   </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>
        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,
                    colorByRowLabel: true,// Display each event on a new line
                    rowLabelStyle: { fontName: 'Sofia Sans Condensed', fontSize: 14, color: '#000000', bold: true },
                    barLabelStyle: { fontSize: 14, bold: true, fontName: 'Sofia Sans Condensed', color:'#000000 ' },
                    avoidOverlappingGridLines: true,
                },
                alternatingRowStyle: false,
                backgroundColor: '#ffd',
                height: 2000
            };

            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");
                        $('body').css('overflow', 'hidden'); // Hide scroll bars
                        // Show the sentence
                        $(".sentence").show();

                        

                    },
                    complete: function () {
                        $('body').css('overflow', 'auto'); // Revert back to original state
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="registration-form-container">
            <div id="registration-form">
                <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 Date " 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 class="row sentence" style="display: none;">
        <asp:Label ID="Label4" runat="server" Text="This Flight Started From: " CssClass="label" Style="color: red;"></asp:Label>
        <asp:Label ID="StartTime" runat="server" Text="10:00" CssClass="label" Style="font-weight: bold;"></asp:Label>
        <asp:Label ID="Label5" runat="server" Text=" And Ended at: " CssClass="label" Style="color: red;"></asp:Label>
        <asp:Label ID="EndTime" runat="server" Text="12:00" CssClass="label" Style="font-weight: bold;"></asp:Label>
    </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", flightDateStr);
                    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["starttime"].ToString(),
                       reader["endtime"].ToString()
                        });
                    }

                    return departmentChartData;
                }
            }
        }
    }
}

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jun 07, 2024 12:38 PM
Report

Hi muhammad12,

Refer the below sample with 24 hour format.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Include Google Font link -->
    <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;700&display=swap" rel="stylesheet" />
    <style>
        /* Style to center the input form */
        #registration-form-container { display: flex; justify-content: center; align-items: flex-start; /* Align form to the top */ overflow: hidden; margin-top: 0px; /* Adjust top margin as needed */ }

        #registration-form { display: inline-block; /* Ensure it only takes the necessary width */ padding: 20px; border: 1px solid #ccc; background-color: #f2f2f2; border-radius: 8px; overflow: hidden; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }

        /* Style to make the "Clockify report!" title more prominent */
        legend { font-weight: bold; font-size: 20px; margin-bottom: 20px; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }

        /* Style to place input elements in one row */
        .input-group { display: inline-block; margin-right: 10px; /* Adjust as needed */ }

        /* Style to adjust the width of input elements */
        .input { width: 150px; /* Adjust as needed */ padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }

        /* Style for labels */
        .label { display: block; margin-bottom: 5px; color: black; font-size: 14px; font-weight: bold; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }

        /* Style for buttons */
        .btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; font-weight: bold; border-radius: 4px; cursor: pointer; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ }

        /* Hover effect for buttons */
        .btn:hover { background-color: #45a049; }

        /* Style to make sure the timeline adjusts according to device width */
        #departmentChartsContainer { white-space: nowrap; margin-top: 20px; font-family: 'Sofia Sans Condensed', sans-serif; /* Use Sofia Sans Condensed font */ overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: hidden; width: 100%; /* Fix the width of the container */ display: block; }

        .sentence { display: flex; align-items: center; margin-top: 10px; }

        .sentence .label { margin-right: 5px; }
    </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>
        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: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });

            var arrayData;
            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,
                    colorByRowLabel: true,// Display each event on a new line
                    rowLabelStyle: { fontName: 'Sofia Sans Condensed', fontSize: 14, color: '#000000', bold: true },
                    barLabelStyle: { fontSize: 14, bold: true, fontName: 'Sofia Sans Condensed', color:'#000000 ' },
                    avoidOverlappingGridLines: true
                },
                alternatingRowStyle: false,
                backgroundColor: '#ffd',
                height: 2000
            };
 
            chart.draw(dataTable, options);
        }

        $(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>
</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>

Code

[System.Web.Services.WebMethod]
public static Dictionary<string, List<object[]>> GetChartData(string flightNo, string flightDate, string flightType)
    {
        using (DataTable dt = new DataTable())
        {
            dt.Columns.Add("ActionID");
            dt.Columns.Add("eventname");
            dt.Columns.Add("starttime");
            dt.Columns.Add("endtime");
            dt.Columns.Add("DeptName");

            dt.Rows.Add(1, "Jan", "10:40", "10:45", "Airside");
            dt.Rows.Add(6, "Jan", "9:00", "9:30", "Catering");
            dt.Rows.Add(9, "Jan", "10:00", "10:32", "FOCC");
            dt.Rows.Add(10, "Jan", "6:00", "6:15", "Flight Services");
            dt.Rows.Add(2, "feb", "21:00", "22:10", "Catering");
            dt.Rows.Add(7, "feb", "7:00", "7:40", "FOCC");
            dt.Rows.Add(8, "feb", "8:00", "8:25", "Airside");
            dt.Rows.Add(3, "mar", "12:00", "12:10", "Airside");
            dt.Rows.Add(11, "mar", "15:00", "15:30", "FOCC");
            dt.Rows.Add(12, "mar", "9:00", "9:20", "Flight Services");
            dt.Rows.Add(4, "Apr", "01:00", "01:10", "FOCC");
            dt.Rows.Add(5, "may", "0:000", "00:20", "Catering");

            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["eventname"],
                                row["eventname"],
                                row["starttime"].ToString(),
                                row["endtime"].ToString()
                            });
            }

            return departmentChartData;
        }
    }

Screenshot

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

Populate Google TimeLine chart with 24 hours Time format in ASP.Net

Company

Explore

Follow us

Contact Us