none
x axis as time format HH:MM:SS with continuous update for every sec RRS feed

  • Question

  • Hi,

    I want to display the continuous time stamp update for every sec on X-axis. Can anynone guide me to display in this format HH:MM:SS.

    Ex: 10:02:50,10:02:51,10:02:52.........

    I want display like the above for continuous 24hrs is there any code snippet for this type of display in VB.

    Thanking you,

    Regards

    B Teja

    Wednesday, May 2, 2018 4:43 AM

All replies

  • Is this a chart, a single label, etc.? Show some details about the controls.

    For a DateTime value, try ToLongTimeString().

    Wednesday, May 2, 2018 5:26 AM
  •  Me.Chart1.Series(0).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Spline

    Chart1.Series(0).XValueType = ChartValueType.DateTime
            Chart1.ChartAreas(0).AxisX.LabelStyle.Format = "hh:mm:ss"

     Me.Chart1.Series("Voltage").Points.AddY(Val(AdcVoltage_CH3))

    In run time the time stamp it is showing is 12:00:00

    I want to display the running time stamp for the given y value.

    is there any solution for this

    Wednesday, May 2, 2018 5:35 AM
  •         Me.Chart1.Series(0).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Spline
            Chart1.Series(0).XValueType = ChartValueType.DateTime
            Chart1.ChartAreas(0).AxisX.LabelStyle.Format = "hh:mm:ss"
            Chart1.Series(0).Points.AddXY(DateTime.Now.ToLongTimeString(), Val(AdcVoltage_CH3))

    1.Add Timer-->Interval=1000-->Enabled=True

    2.Handle Timer's Tick

    Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            Chart1.ChartAreas(0).AxisX.Interval = 1
            Chart1.Series(0).Points.AddXY(DateTime.Now.ToLongTimeString(), Val(AdcVoltage_CH3))
            Chart1.ChartAreas(0).AxisX.LabelStyle.Angle = 90
            If Chart1.Series(0).Points.Count > 10 Then
                Chart1.Series(0).Points.RemoveAt(0)
            End If
        End Sub


    Wednesday, May 2, 2018 6:25 AM
  • Hi Vikram,

    Thanks for your support now it working with continuous time stamp. But the problem comes again as it is receiving continuous samples i'm trying to optimize it after collecting 30 samples and update the time continuously like in the below on X-axis 

    Ex: 15:45:30 to 15:45:59 after this 30 samples sec again the 15:46:00 starts from zero onwards and has to be continued. Is there any code snippet for this type of application.

    Regards

    B Teja

    Wednesday, May 2, 2018 10:22 AM
  • Do you want like this?

        Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            If Now.Second = 30 Or Now.Second = 0 Then
                Chart1.Series(0).Points.Clear()
            End If
            Chart1.ChartAreas(0).AxisX.Interval = 1
            Chart1.Series(0).Points.AddXY(DateTime.Now.ToLongTimeString(), Val(AdcVoltage_CH3))
            Chart1.ChartAreas(0).AxisX.LabelStyle.Angle = 90
            If Chart1.Series(0).Points.Count > 30 Then
                Chart1.Series(0).Points.RemoveAt(0)
            End If
        End Sub


    Wednesday, May 2, 2018 10:43 AM
  • Hi Vikram,

    Thanks again for your help. But i tried like the below

    If Count > 30 AndAlso Timer1 IsNot Nothing AndAlso Count > 0 Then

                Chart1.ChartAreas.RemoveAt(0)

      End If

    what is the mistake in this. can you please explain me elaborately.

    Regards

    B Teja.

    Wednesday, May 2, 2018 10:56 AM
  • Chart1.Series(0).Points.RemoveAt(0)

    removes First Point.

    I have used it so as the chart has constant number of points i.e.  If chart has 30 points it's OK but after that to add 31st point we must remove 1st point so that total points are 30+1-1=30 only.

    For what you've coded,

    Chart1.ChartAreas.RemoveAt(0) throws Exception at

     Chart1.ChartAreas(0).AxisX.Interval = 1

    as you are removing Not a Point but the whole ChartArea.



    Wednesday, May 2, 2018 11:12 AM
  • Hi Vikram,

    Thanks for your explanation. I want to display the graph with continuous time stamp but for every sec one line is adding. As per your suggetion the first point is removing fter 30 samples lines are increasing and the graph is becoming more clumsy. i want display the graph with 30 Y-axis lines and 30 X-axis sample time stamp. But need to be updated with in that graph only.

    Example graph is shown.

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/a3b81414-b541-4afb-83ee-655a98377629/line-chart-in-visual-basic?forum=vbgeneral

    Regards

    B Teja.

    Wednesday, May 2, 2018 11:26 AM
  • Lines are added only for the first 30 seconds then the graph becomes stable with 30 Samples only.

        Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            Chart1.ChartAreas(0).AxisX.Interval = 1
            Chart1.Series(0).Points.AddXY(DateTime.Now.ToLongTimeString(), Val(AdcVoltage_CH3))
            Chart1.ChartAreas(0).AxisX.LabelStyle.Angle = 90
            If Chart1.Series(0).Points.Count > 30 Then
                Chart1.Series(0).Points.RemoveAt(0)
            End If
        End Sub

    Wednesday, May 2, 2018 12:47 PM
  • Hi Vikram,

     Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            Chart1.ChartAreas(0).AxisX.Interval = 1
            Chart1.Series(0).Points.AddXY(DateTime.Now.ToLongTimeString(), Val(AdcVoltage_CH3))
            Chart1.ChartAreas(0).AxisX.LabelStyle.Angle = 90
            If Chart1.Series(0).Points.Count > 30 Then
                Chart1.Series(0).Points.RemoveAt(0)
            End If
        End Sub


    The above code is removing the time stamp seconds after 30 samples but the graph is not stable, for every new sample a new line is added to the chart after collecting 2 to 3 mins(180 samples) of data. The lines are merging it self and the time stamp also not displaying. I'm unable to insert the picture here otherwise it will give a clear understanding.

    Regards

    B Teja


    B TEJA

    Thursday, May 3, 2018 5:27 AM

  • B TEJA

    Thursday, May 3, 2018 5:28 AM
  • Ex: 15:45:30 to 15:45:59 after this 30 samples sec again the 15:46:00 starts from zero onwards and has to be continued.

    Show the actual values that you want to be displayed for the x axis labels.

    Thursday, May 3, 2018 5:50 AM
  • Hi Acamar,

    Thanks for asking. I want to display the continuous updating time stamp on x-axis along with that voltage display on y axis. I will show you one example in that example the X-axis values are updating continuously as like Time stamp in our example and y-values are also fixed as voltage in our example. Now the problem starts from here in that example graph after collecting 30 samples the graph got stabilized and the collecting values are updating with the stabilized graph but in our example i'm trying to implement the same but it is not working. is there any alternate.

    Regarding

    B Teja.  


    B TEJA

    Thursday, May 3, 2018 7:38 AM

  • B TEJA

    Thursday, May 3, 2018 7:39 AM
  • Hi Acamar,

    Thanks for asking. I want to display the continuous updating time stamp on x-axis along with that voltage display on y axis. I will show you one example in that example the X-axis values are updating continuously as like Time stamp in our example and y-values are also fixed as voltage in our example. Now the problem starts from here in that example graph after collecting 30 samples the graph got stabilized and the collecting values are updating with the stabilized graph but in our example i'm trying to implement the same but it is not working. is there any alternate.

    Regarding

    B Teja.  


    B TEJA

    Teja,

    Oh I see the problem, you are adding x axis points as you receive them and the time interval between points varies. In my example that you copied the total points were constant at 30 and the x axis interval was always 1 time unit betwee each x axis point in that example.

    However in your case the x axis time interval values are not contant time intervals of 1 second rather the time interval for each x axis point varies and there is not a constant 30 points total instead the total x point count varies.

    So what you need to do is plot 30 seconds of x axis points, not 30 points.

    So you dont want to remove points based on the total count of 30 x axis points, you want to remove them if the points are older than 30 seconds.

    So where now you have

       If Chart1.Series(0).Points.Count > 30 Then
                Chart1.Series(0).Points.RemoveAt(0)
       End If

    You need to change to check the time interval something like:

       For all points between time now and time now - 30 seconds

           Chart1.Series(0).Points.AddXY(this time, this voltage)

       next

    That is not real code it is just pseudo code.

    Comprende?

    PS If you don't follow show us the real code you now have and show a minutes worth of real data.





    Thursday, May 3, 2018 8:34 AM
  • PS Here is a quick example of what I mean.

    In this example the x axis data is the time (x) value and the (y) value for each series point. The previous example used just the x-index and y value for each point coordinate pair.

    So exactly how you do the chart depends on exactly how you collect the data.

    As this animation runs it first saves the collected points until 10 secs worth of data is collected (added to the series). Once there is more than 10 secs data the example removes the x axis time values older than 10 secs.

    This example makes the controls. Just cut and paste the code into an empty form.

    'streaming value series chart v3
    Imports System.Windows.Forms.DataVisualization.Charting
    
    Public Class Form2
        Private WithEvents Chart1 As New Chart With {.Parent = Me, .Name = "Chart1", .Dock = DockStyle.Fill}
        Private WithEvents Timer1 As New System.Windows.Forms.Timer With {.Interval = 100, .Enabled = True}
        Private Rnd As New Random
    
        Private Sub Form2_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Chart1.ChartAreas.Add(New ChartArea())
            Chart1.Legends.Add(New Legend)
            ChartSetup()
        End Sub
    
        Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
    
            Dim timeStamp As DateTime = DateTime.Now
    
            With Chart1.Series(0)
    
                ' Add new data point to its series.
                .Points.AddXY(timeStamp.ToOADate(), Rnd.Next(20, 80))
    
                ' remove all points from the series older than 10 seconds
                Dim removeBefore As Double = timeStamp.AddSeconds(CDbl(-10)).ToOADate()
    
                'remove oldest values 
                While .Points(0).XValue < removeBefore
                    .Points.RemoveAt(0)
                End While
    
                Chart1.ChartAreas(0).AxisX.Minimum = .Points(0).XValue
                Chart1.ChartAreas(0).AxisX.Maximum = DateTime.FromOADate(.Points(0).XValue).AddMinutes(0.3).ToOADate()
    
            End With
    
            Chart1.Invalidate()
        End Sub
    
        Private Sub ChartSetup()
            Chart1.BackColor = Color.FromArgb(211, 223, 240)
            Chart1.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.TopBottom
            Chart1.BackSecondaryColor = System.Drawing.Color.White
            Chart1.BorderlineColor = Color.FromArgb(26, 59, 105)
            Chart1.BorderlineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid
            Chart1.BorderlineWidth = 2
            Chart1.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss
    
            With Chart1.ChartAreas(0)
                .AxisX.LabelStyle.Font = New System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold)
                .AxisX.LabelStyle.Format = "hh:mm:ss"
                .AxisX.LabelStyle.Interval = 10
                .AxisX.LabelStyle.IntervalType = System.Windows.Forms.DataVisualization.Charting.DateTimeIntervalType.Seconds
                .AxisX.LineColor = Color.LightGray
                .AxisX.Title = "Time (hh:mm:ss)"
                .AxisX.MajorGrid.LineColor = Color.LightBlue
                .AxisX.MajorGrid.Interval = 10
                .AxisX.MajorGrid.IntervalType = System.Windows.Forms.DataVisualization.Charting.DateTimeIntervalType.Seconds
                .AxisX.MajorTickMark.Interval = 10
                .AxisX.MajorTickMark.IntervalType = System.Windows.Forms.DataVisualization.Charting.DateTimeIntervalType.Seconds
    
                .AxisY.Title = "Y Value (units)"
                .AxisY.IsLabelAutoFit = False
                .AxisY.IsStartedFromZero = False
                .AxisY.LabelStyle.Font = New System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold)
                .AxisY.LineColor = Color.LightGray
                .AxisY.MajorGrid.LineColor = Color.LightGray
                .AxisY.Maximum = 100
                .AxisY.Minimum = 0
    
                .BackColor = Color.FromArgb(64, 165, 191, 228)
                .BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.TopBottom
                .BackSecondaryColor = System.Drawing.Color.White
                .BorderColor = Color.FromArgb(64, 165, 191, 228)
                .BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid
    
                .InnerPlotPosition.Auto = False
                .InnerPlotPosition.Height = 80
                .InnerPlotPosition.Width = 90
                .InnerPlotPosition.X = 9
                .InnerPlotPosition.Y = 4
            End With
    
            Chart1.Series.Clear()
            Chart1.Series.Add("Value Series")
    
            With Chart1.Series(0)
                Chart1.Series(0).IsVisibleInLegend = False
                .ChartType = SeriesChartType.Line
                .BorderWidth = 2
                .Color = Color.OrangeRed
                .BorderColor = Color.FromArgb(224, 64, 10)
                .ShadowOffset = 1
            End With
        End Sub
    End Class



    • Edited by tommytwotrain Thursday, May 3, 2018 4:32 PM optimized
    Thursday, May 3, 2018 2:54 PM