Real-Time .NET Charts, Strip-Charting MFC Library, Visual Basic Realtime Graphs

[Realtime Stripchart Development ]

ProEssentials charting components provides simple features to efficiently handle your real-time and strip-chart data. This information shows code in VB.NET; working C#, Visual Basic and MFC examples are available when downloading our evaluation.

Real-Time Strip-Charting Prerequisites:

It is recommended that the study our basic initial walk-throughs on learning how to create your first ProEssentials hello-world type application.

Simple client-side walk-throughs:
VB .NET Charts WinForm
C#.NET Charts WinForm
MS Charts ActiveX
VC,C++, C Charting Library
Delphi Chart VCL

Real-Time charts can be implemented in a variety of ways. Also, all ProEssentials objects can be used in real-time scenarios. What we mean by real-time is the repeated process of changing the control's data and/or properties and refreshing the image.

Pego: Graph Control:

The Pego graph control will likely be the most common object used in a real-time scenario. It is also designed to be the easiest to implement. The properties AppendYData and AppendPointLabelData can be used to quickly and easily implement a strip chart. The direction of the shift is controlled with the property AppendToEnd.

Below is example code which will produce a strip chart. The first section is used to initialize the chart, preparing for real-time operation. The second section is used in a timer or other repeated event. WinForm, VCL, and C/C++ code will be similar in structure. The example code included with ProEssentials also has examples of real-time implementations.   Within our evaluation's demo and example projects see examples 017, 020, 115, 116, 117, 117, and 119.

VB.NET Real-Time Charts and Graphs Strip-Charts in Visual Studio.NET...

Note: adding the following Imports declaration at the top of "Form1.vb" will shorten enumeration syntax.
Imports Gigasoft.ProEssentials.Enums

Note: The following example assumes a simple project, one form, one Pego control and one Timer control on the form.

Initialization Section:

'// No Flicker //
Pego1.PeConfigure.PrepareImages = True
Pego1.PeConfigure.CacheBmp = True

'// Set Subsets and Points //
Pego1.PeData.Subsets = 2 '// set number of subsets
Pego1.PeData.Points = 200 '// number of data points

Pego1.PeUserInterface.Scrollbar.PointsToGraph = 20
Pego1.PeUserInterface.Scrollbar.PointsToGraphInit = PointsToGraphInit.Last

Pego1.PePlot.Method = GraphPlottingMethod.Area

'// Main Title
Pego1.PeString.MainTitle = "Graph Real Time Example"
Pego1.PeString.SubTitle = "" '// no subtitle

'// Manually configure scales //
Pego1.PeGrid.Configure.ManualScaleControlY = ManualScaleControl.MinMax
Pego1.PeGrid.Configure.ManualMinY = 1.0
Pego1.PeGrid.Configure.ManualMaxY = 100.0
Pego1.PeGrid.Configure.ManualMaxDataString = "000.000"
Pego1.PeGrid.Configure.ManualMaxPointLabel = "00:00:00xx"

Pego1.PePlot.Allow.StackedData = False
Pego1.PeUserInterface.Dialog.PointsToGraph = False
Pego1.PePlot.Allow.Histogram = False
Pego1.PeUserInterface.Allow.FocalRect = False
Pego1.PeGrid.LineControl = GridLineControl.None
Pego1.PeData.Precision = 1

'// Needed to allocate point labels so append has something to rotate //
'// Set last point label, Points - 1 //
Pego1.PeString.PointLabels(199) = ""

'// Reset first four data points, default 0 is null and hides, see NullDataValue
Pego1.PeData.Y(0, 0) = 0
Pego1.PeData.Y(0, 1) = 0
Pego1.PeData.Y(0, 2) = 0
Pego1.PeData.Y(0, 3) = 0

'// Set a few colors and such //
Pego1.PeColor.BitmapGradientMode = False
Pego1.PeColor.QuickStyle = QuickStyle.DarkNoBorder
Pego1.PeFont.Fixed = True
Pego1.PeColor.SubsetColors(0) = Color.FromArgb(128, 0, 198, 0)
Pego1.PeColor.SubsetColors(1) = Color.FromArgb(128, 255, 255, 255)

'// Finish Initialization //

Timer1.Interval = 250
Timer1.Enabled = True

Real-Time Charting Initialization Explanation

Setting PrepareImages to TRUE is important and gives you flicker-free output.

Next, Subsets and Points define how much data the object will hold, PointsToGraph is set to 20 and controls how much data the user will see. There will be a horizontal scrollbar to pan left and right through data. PointsToGraphInit controls whether the first 20 or last 20 points are initially displayed.

Next, the graph's y axis is manually configured. This is because during the control's real-time operation, it will not automatically adjust the scales. However, if you do want the chart's scale to adjust during real-time, this is possible and is discussed later. ManualMaxDataString and ManualMaxPointLabel are used to set a string which would represent the largest string in either the table or PointLabels respectively. This is used to reserve space during the object's image construction process to prevent overlapping text.

Next, a few properties are set which are recommended for real-time operation.

Next, the last PointLabel element is set to a null string. This allocates memory for all PointLabels and this is necessary for the append logic to work correctly. If memory is not pre-allocated, there will be nothing to shift.

Next, the first four default data points are set to zero. The default NullDataValue is zero so these lines of code essentially empty the graph of all valid data. Thus starting with an empty chart.

Finally, the chart control is initialized with PeFunction.ReinitializeResetImage, and the timer mechanism is started.

Timer Section:

'Dim CurrentTime As String

'// prepare new point label //
CurrentTime = Now.Hour.ToString + ":" + Now.Minute.ToString + ":" + Now.Second.ToString

'// prepare new YData //
Dim NewData(2) As Single
NewData(0) = (Rnd() * 20) + 2
NewData(1) = (Rnd() * 40) + 60

'// transfer new point label //
Gigasoft.ProEssentials.Api.PEvsetW(Pego1.PeSpecial.hObject,    Gigasoft.ProEssentials.DllProperties.APPENDPOINTLABELDATA, CurrentTime, 1)

'// transfer new YData, this will also update and show new image //
Gigasoft.ProEssentials.Api.PEvsetW(Pego1.PeSpecial.hObject,    Gigasoft.ProEssentials.DllProperties.APPENDYDATA, NewData, 1)

Strip-Chart Timer Explanation

Within the timer event, we prepare new PointLabels and YData to append to the chart.

CurrentTime is a string which will show below the new data value. You use PEvsetW and AppendPointLabelData to pass the address of a null-terminated string to append to the PointLabels property array.

New YData is also prepared and also passed by reference. Since this control contains 2 subsets, and we will be updating one sample's worth of data, 2 pieces of data are prepared for appending to the YData array. Note that the last argument in the PEvsetW call is 1. This stands for 1 new sample. Since the control knows how many subsets are included in the object (2), it will automatically look for 2 pieces of data. This is different in how PEvsetW is used with the non-appending type properties. If more than one sample's worth of data is being appended, you still format the data in a single dimension array. In this case you will prepare all of the first subset's data, followed by the second subset's data and so on. Using PEvsetW with AppendYData also has a special function of resetting and updating the image. Because of this, you will always use AppendYData after AppendPointLabelData.

If you need the graph to update the y axis while in a real-time operation, call PeFunction.ReintializeResetImage() and Refresh() at the end of the timer event. Though this will be a slower real-time process.


Online developer reference

Complete online technical reference to the ProEssentials product. Chapter 2's .NET Reference is the best mechanism to navigate the large quantity of properties and features.  Walk-Throughs of .NET charting in VB.NET, C#.NET, ASP, VC, and Delphi get you started quickly.

learn more about charting, see Chapter 2

Online interactive demo

Interactive Financial, Engineering, Scientific, and Business examples give you an instant taste of ProEssentials' power.

view our .net charting demo

Letter from the President

CONGRATULATIONS! Reading this page means you're likely a product manager, product owner, or should be one.

Charting Component Strengths, print it, read it!