Populate Gantt chart with Time in ASP.Net using jQuery AJAX

muhammad...

SOLVED CLOSED ACTIVE ANSWERED
User: muhammad12
Posted: on Jan 01, 2024 11:09 PM
Forum: ASP.Net AJAX
Answer: 1
Views: 1084

Hi dharmendr sir,

I have codde of gantt chart. it has no error but also not making bars. please sir help me. my data base structure is like this.

My database table structure is like this.

Id int

Months nvarchar(50)

Starttime nvarchar(50)

Endtime nvarchar(50)

My database table is saving value like this,

Months starttime endtime

Jan 10:00 10:10

Feb 12:00 12:15

Mar 9:00 9:10

And so on

HTML

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
        * { margin: 0; padding: 0; font-family: sans-serif; }
        .chartMenu { width: 100vw; height: 40px; background: #1A1A1A; color: rgba(54, 162, 235, 1); }
        .chartMenu p { padding: 10px; font-size: 20px; }
        .chartCard { width: 100vw; height: calc(100vh - 40px); background: rgba(54, 162, 235, 0.2); display: flex; align-items: center; justify-content: center; }
        .chartBox { width: 700px; padding: 20px; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="chartMenu">
        <p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
    </div>
    <div class="chartCard">
        <div class="chartBox">
            <canvas id="myChart">
            </canvas>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
      $(document).ready(function () {
          // Fetch data from the server when the page loads
          fetchDataFromServer();
      });

      function fetchDataFromServer() {
          $.ajax({
              type: "POST",
              url: "WebForm4.aspx/GetChartData",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (data) {
                  console.log("Data from server:", data);
                  // Parse date and time strings to JavaScript Date objects
                  data.d.forEach(function (item) {
                      item.starttime = parseTimeString(item.x[0]);
                      item.endtime = parseTimeString(item.x[1]);
                  });

                  // Get unique month names from the data
                  const uniqueMonths = [...new Set(data.d.map(item => item.y))];

                  // Call a function to update the Gantt chart with the retrieved data and month names
                  updateGanttChart(data.d, uniqueMonths);
              },
              error: function (error) {
                  console.log("Error fetching data from server:", error);
              }
          });
      }

      function parseTimeString(timeString) {
          // Check if timeString is in /Date(...) format
          const dateRegex = /^\/Date\((\d+)([+-]\d{4})?\)\/$/;
          const match = timeString.match(dateRegex);

          if (match) {
              // Convert /Date(...) to milliseconds
              const milliseconds = parseInt(match[1]);
              return new Date(milliseconds);
          } else if (timeString) {
              // Parse time string in HH:mm format and create a new Date object
              const [hours, minutes] = timeString.split(':').map(Number);
              const date = new Date();
              date.setHours(hours, minutes, 0, 0);
              return date;
          } else {
              return null; // Return null or handle the case as needed
          }
      }

      function updateGanttChart(chartData, uniqueMonths) {
          const validChartData = chartData.filter(item => item.x && item.y);

          const processedChartData = validChartData.map(item => ({
              label: item.y,
              data: [{
                  x: item.x[0], // Start time
                  y: uniqueMonths.indexOf(item.y), // Month index as y-value
                  base: item.x[0], // Start time
                  end: item.x[1],  // End time
              }],
          }));

          const config = {
              type: 'bar',
              data: {
                  datasets: processedChartData,
              },
              options: {
                  scales: {
                      x: {
                          type: 'time',
                          time: {
                              unit: 'minute',
                              displayFormats: {
                                  minute: 'HH:mm',
                              },
                          },
                          title: {
                              display: true,
                              text: 'Time',
                          },
                      },
                      y: {
                          type: 'category',
                          title: {
                              display: true,
                              text: 'Months',
                          },
                          labels: uniqueMonths,
                      },
                  },
              },
          };
          // Render the Gantt chart
          const ganttChart = new Chart(
              document.getElementById('myChart'),
              config
          );
          // Instantly assign Chart.js version
          const chartVersion = document.getElementById('chartVersion');
          chartVersion.innerText = Chart.version;
      }
    </script>
    </form>
</body>
</html>

Code

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;

namespace WebApplication1
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static List<object> GetChartData()
        {
            string conString = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
            string query = "SELECT * FROM test";
            using (SqlConnection con = new SqlConnection(conString))
            {
                SqlCommand cmd = new SqlCommand(query);
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataTable dt = new DataTable())
                    {
                        sda.Fill(dt);
                        List<object> chartData = new List<object>();
                        for (int i = 0; i < dt.Rows.Count; i++)
                        {
                            chartData.Add(new
                            {
                                x = new[] { dt.Rows[i]["starttime"].ToString(), dt.Rows[i]["endtime"].ToString() },
                                y = dt.Rows[i]["months"]
                            });
                        }
                        return chartData;
                    }
                }
            }
        }
    }
}

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jan 02, 2024 01:26 PM
Report

Refer below sample.

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">
    <title>Getting Started with Chart JS with www.chartjs3.com</title>
    <style>
        * { margin: 0; padding: 0; font-family: sans-serif; }
        .chartMenu { width: 100vw; height: 40px; background: #1A1A1A; color: rgba(54, 162, 235, 1); }
        .chartMenu p { padding: 10px; font-size: 20px; }
        .chartCard { width: 100vw; height: calc(100vh - 40px); background: rgba(54, 162, 235, 0.2); display: flex; align-items: center; justify-content: center; }
        .chartBox { width: 700px;; padding: 20px; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="chartMenu">
            <p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
        </div>
        <div class="chartCard">
            <div class="chartBox">
                <canvas id="myChart"></canvas>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
        <script>
            $(function () {
                fetchDataFromServer();
            });

            function fetchDataFromServer() {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetChartData",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        const data = {
                            datasets: [{
                                label: 'Month data',
                                data: response.d,
                                borderWidth: 1,
                                borderSkipped: false,
                                borderRadius: 5,
                                barPercentage: 0.5
                            }]
                        };

                        const config = {
                            type: 'bar',
                            data,
                            options: {
                                indexAxis: 'y',
                                scales: {
                                    x: {
                                        type: 'time',
                                        time: {
                                            unit: 'minute',
                                            displayFormats: {
                                                quarter: 'HH:mm'
                                            }
                                        },
                                        min: '2024-01-03 00:00',
                                        max: '2024-01-03 23:59'
                                    }
                                }
                            }
                        };

                        new Chart(document.getElementById('myChart'), config);
                        const chartVersion = document.getElementById('chartVersion');
                        chartVersion.innerText = Chart.version;
                    },
                    error: function (error) {
                        console.log("Error fetching data from server:", error);
                    }
                });
            }
        </script>
    </form>
</body>
</html>

Code

[System.Web.Services.WebMethod]
public static List<object> GetChartData()
{
    List<object> chartData = new List<object>();
    chartData.Add(new
    {
        x = new[] { Convert.ToDateTime("10:00").ToString("yyyy-MM-dd HH:mm"), Convert.ToDateTime("10:10").ToString("yyyy-MM-dd HH:mm") },
        y = "Jan"
    });

    chartData.Add(new
    {
        x = new[] { Convert.ToDateTime("12:00").ToString("yyyy-MM-dd HH:mm"), Convert.ToDateTime("12:15").ToString("yyyy-MM-dd HH:mm") },
        y = "Feb"
    });

    chartData.Add(new
    {
        x = new[] { Convert.ToDateTime("09:00").ToString("yyyy-MM-dd HH:mm"), Convert.ToDateTime("09:10").ToString("yyyy-MM-dd HH:mm") },
        y = "Mar"
    });

    return chartData;
}

Screenshot

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

Populate Gantt chart with Time in ASP.Net using jQuery AJAX

Company

Explore

Follow us

Contact Us