Line Chart in Visual Basic

Question

_{Monday, February 29, 2016 3:54 PM}

Hi,

I am new to Visual Basic and am looking for a bit of help/guidance.

I am building a wind recording device and want to plot direction and speed as a line chart that automatically updates on receipt of new data.

Data arrives via serial port approx. every second and I am currently storing in an array.

For the charting  I want to display data in two vertical line charts, one for speed and one for direction.  Charts will show last 300 data samples (i.e. approx. last 5 minutes) so that I have a visual trend.  Youngest data samples will be at top of chart.

Is there a charting/graphics library for charts?  

Any guidance would be much appreciated.

Thanks

Paul

All replies (3)

_{Monday, February 29, 2016 4:25 PM ✅Answered | 1 vote}

You just need to specify your serie as a Line with: SeriesChartType.Line

Have a look at this msdn for the types (https://msdn.microsoft.com/en-us/library/system.windows.forms.datavisualization.charting.seriescharttype%28v=vs.110%29.aspx)

and this one about Line specifically: https://msdn.microsoft.com/en-us/library/dd489252.aspx

and this example: https://social.msdn.microsoft.com/Forums/en-US/ac65b371-74bf-4d94-bbc7-33e38763b2ba/line-chart-with-vb-2010?forum=vbgeneral

You may want to investigate Fast Line as well as you will have a lot of data coming.

_{Monday, February 29, 2016 6:06 PM ✅Answered}

Here are the instructions. Its a Visual Studio project you download and run it for a very cool list of chart things. In vs 2015 the chart control is part of the default toolbar. In others you may need to add a reference for it.

Here is a basic example of your desires that you can build on. Make a form with a chart control and a button and copy and paste this code.

If you have an image of exactly what you want and or questions this can be modified of course.

Imports System.Windows.Forms.DataVisualization.Charting

Public Class Form10
    Private WithEvents timer1 As New Windows.Forms.Timer
    Private SpeedData As New List(Of Point)
    Private DirectionData As New List(Of Point)
    Private Rand As New Random(Now.Millisecond)
    Private Count As Single

    Private Sub timer1_Tick(sender As Object, e As EventArgs) Handles timer1.Tick
        'increment time count - this could be a date/time
        Count += 1
        If Count > 30 AndAlso SpeedData IsNot Nothing AndAlso SpeedData.Count > 0 Then
            SpeedData.RemoveAt(0)
            DirectionData.RemoveAt(0)
        End If

        'add random values to the data
        SpeedData.Add(New Point(Count, Rand.Next(0, 40)))
        DirectionData.Add(New Point(Count, Rand.Next(0, 3)))

        DrawChart()
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        If Button1.Text = "Stop" Then
            timer1.Stop()
            Button1.Text = "Start"
        Else
            DirectionData.Clear()
            SpeedData.Clear()
            Button1.Text = "Stop"
            Count = 0
            timer1.Start()
        End If
    End Sub

    Sub DrawChart()
        If SpeedData Is Nothing Or SpeedData.Count = 0 Then Exit Sub

        'setup the chart
        Chart1.ChartAreas.Clear()
        Chart1.ChartAreas.Add("Default")
        With Chart1.ChartAreas("Default")
            .AxisX.Title = "Increment"
            .AxisX.Interval = 5
            .AxisX.IsMarginVisible = True
            .AxisX.MajorGrid.LineColor = Color.SkyBlue
            .AxisY.MajorGrid.LineColor = Color.SkyBlue
            .AxisY.Title = "Speed/Direction"
            .AxisY.Interval = 10
        End With

        Chart1.Legends.Clear()
        Chart1.Legends.Add("Default")
        Chart1.Legends("Default").Docking = Docking.Top

        Chart1.Series.Clear()
        Chart1.Series.Add("Speed")
        Chart1.Series.Add("Direction")

        With Chart1.Series(0)
            .BorderWidth = 3
            .Color = Color.Red
            .ChartType = DataVisualization.Charting.SeriesChartType.Line
        End With

        With Chart1.Series(1)
            .BorderWidth = 3
            .Color = Color.Blue
            .ChartType = DataVisualization.Charting.SeriesChartType.Line
        End With

        For i = 0 To SpeedData.Count - 1
            Chart1.Series(0).Points.AddXY(SpeedData(i).X, SpeedData(i).Y)
            Chart1.Series(1).Points.AddXY(DirectionData(i).X, DirectionData(i).Y)
        Next
    End Sub
End Class

_{Monday, February 29, 2016 5:30 PM}

Do you have an image or link to image of what the chart looks like?

What does a line chart for wind direction look like?