ASP.Net Line chart: Display Time on Y-Axis using C# and VB.Net

Hi muhammad12,

The Y Axis value should be numeric or DateTime. You can assign a string to X Axis. In your case X and Y Axis will be switched.

Refer below example.

HTML

<asp:Chart ID="Chart1" runat="server" Height="300px" Width="400px">
    <Titles>
        <asp:Title ShadowOffset="3" Name="Items" />
    </Titles>
    <Legends>
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
    </Legends>
    <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)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("ActionId"), new DataColumn("StartTime"), new DataColumn("Task") });
    dt.Rows.Add(1, "10:20 pm", "clearance");
    dt.Rows.Add(2, "11:00 am", "security");
    dt.Rows.Add(3, "02:45 pm", "meal");

    DateTime[] x = new DateTime[dt.Rows.Count];
    string[] y = new string[dt.Rows.Count];
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        DateTime dTime = DateTime.ParseExact(dt.Rows[i]["StartTime"].ToString(), "h:mm tt",
                            CultureInfo.InvariantCulture, DateTimeStyles.None);
        x[i] = dTime;
        y[i] = dt.Rows[i]["Task"].ToString();
    }
    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;
    Chart1.Legends[0].Enabled = true;
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("ActionId"), New DataColumn("StartTime"), New DataColumn("Task")})
    dt.Rows.Add(1, "10:20 pm", "clearance")
    dt.Rows.Add(2, "11:00 am", "security")
    dt.Rows.Add(3, "02:45 pm", "meal")
    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
        Dim dTime As DateTime = DateTime.ParseExact(dt.Rows(i)("StartTime").ToString(), "h:mm tt", CultureInfo.InvariantCulture, DateTimeStyles.None)
        x(i) = dTime
        y(i) = dt.Rows(i)("Task").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
    Chart1.Legends(0).Enabled = True
End Sub

Screenshot

Please refer below code populated from database.

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constring))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT ActionId,StartTime,Task FROM Customers", con))
        {
            cmd.CommandType = CommandType.Text;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    DateTime[] x = new DateTime[dt.Rows.Count];
                    string[] y = new string[dt.Rows.Count];
                    for (int i = 0; i < dt.Rows.Count; i++)
                    {
                        DateTime dTime = DateTime.ParseExact(dt.Rows[i]["StartTime"].ToString(), "h:mm tt",
                                            CultureInfo.InvariantCulture, DateTimeStyles.None);
                        x[i] = dTime;
                        y[i] = dt.Rows[i]["Task"].ToString();
                    }
                    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;
                    Chart1.Legends[0].Enabled = true;
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constring)
        Using cmd As SqlCommand = New SqlCommand("SELECT ActionId,StartTime,Task FROM Customers", con)
            cmd.CommandType = CommandType.Text
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    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
                        Dim dTime As DateTime = DateTime.ParseExact(dt.Rows(i)("StartTime").ToString(), "h:mm tt", CultureInfo.InvariantCulture, DateTimeStyles.None)
                        x(i) = dTime
                        y(i) = dt.Rows(i)("Task").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
                    Chart1.Legends(0).Enabled = True
                End Using
            End Using
        End Using
    End Using
End Sub