Draw Time on Y-Axis in ASP.Net Line Chart

Hi muhammad12,

Refer below sample code.

In the sample i have populated the DataTable using temporary data. You need to write code for binding it from Database.

HTML

<asp:Chart ID="Chart1" runat="server" Height="300px" Width="400px">
    <Series>
        <asp:Series Name="Default" />
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderWidth="0" />
    </ChartAreas>
</asp:Chart>

Namespaces

C#

using System.Data;
using System.Globalization;
using System.Web.UI.DataVisualization.Charting;

VB.Net

Imports System.Data
Imports System.Globalization
Imports System.Web.UI.DataVisualization.Charting

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    // Populate the DataTable from database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("Time"), new DataColumn("EventName") });
    dt.Rows.Add("10:20 pm", "Event 1");
    dt.Rows.Add("11:00 am", "Event 2");
    dt.Rows.Add("02:45 pm", "Event 3");

    DateTime[] x = new DateTime[dt.Rows.Count];
    string[] y = new string[dt.Rows.Count];
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        x[i] = DateTime.ParseExact(dt.Rows[i]["Time"].ToString(), "h:mm tt",
                            CultureInfo.InvariantCulture, DateTimeStyles.None);
        y[i] = dt.Rows[i]["EventName"].ToString();
    }
    Chart1.Series[0].Points.DataBindXY(y, x);
    Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "hh:mm tt";
    Chart1.ChartAreas[0].AxisY.IntervalType = DateTimeIntervalType.Seconds;
    Chart1.Series[0].ChartType = SeriesChartType.Line;
    Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
}

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    ' Populate the DataTable from database.
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("Time"), New DataColumn("EventName")})
    dt.Rows.Add("10:20 pm", "Event 1")
    dt.Rows.Add("11:00 am", "Event 2")
    dt.Rows.Add("02:45 pm", "Event 3")
    Dim x As DateTime() = New DateTime(dt.Rows.Count - 1) {}
    Dim y As String() = New String(dt.Rows.Count - 1) {}

    For i As Integer = 0 To dt.Rows.Count - 1
        x(i) = DateTime.ParseExact(dt.Rows(i)("Time").ToString(), "h:mm tt",
                                    CultureInfo.InvariantCulture, DateTimeStyles.None)
        y(i) = dt.Rows(i)("EventName").ToString()
    Next

    Chart1.Series(0).Points.DataBindXY(y, x)
    Chart1.ChartAreas(0).AxisY.LabelStyle.Format = "hh:mm tt"
    Chart1.Series(0).ChartType = SeriesChartType.Line
    Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = False
End Sub

Screenshot