Visualizing Data in Visual Basic

Visualizing data is an indispensable tool for quickly gaining a better understanding of what data represents and for communicating results to others. Real-time charting of engine temperatures during a test, plotting dynamic signals measured on a circuit board, and plotting historical yearly rainfall and average temperatures for a particular city are examples of data sets that you might visualize to examine the quality of a part, inconsistencies in signals, or trends in statistics. The Measurement Studio Graph (CWGraph) ActiveX control is a flexible tool that you can use in any ActiveX control container to visualize and interact with two-dimensional data in the way that is most meaningful to you.


Note: Measurement Studio includes tools to build measurement applications in ANSI C, Visual C++, and Visual Basic. The Measurement Studio Visual Basic tools were formerly known as ComponentWorks.


This application note describes how to work with the CWGraph control interactively in its property pages and programmatically using Visual Basic code. By the end of the application note, you will be able to:

• Chart real-time data
• Plot acquired signals and chart historical data
• Customize the graph to look exactly the way you want it to look

Note: This application note is designed to teach you how to visualize two-dimensional data with the CWGraph control through interactive discussion and examples. 

Visualizing Data

To start visualizing data in Visual Basic or any other ActiveX control container, place the CWGraph control on the form. Next, call a method on the control to display the data. The CWGraph control offers six different methods for visualizing data, and they can be divided into two categories: Plot methods and Chart methods. Consider the following questions as you choose the appropriate method for your application:

• Is your acquisition continuous or single-shot? A single-shot acquisition stops collecting data after it acquires a specified number of points.
• If the acquisition is continuous, is it fast or slow?
• Do you want to display data in a chart format (such as a strip or scope chart) or a graph (such as a line plot or bar graph)?
• How many plots do you need to represent your data set?

Use Table 1 to help you decide which method is best for your application:

 

Plotting Data

The Plot methods display real-time data acquired at relatively fast speeds or with a single acquisition. For example, imagine that you are collecting a single set of engine temperatures at a rate of 100 Hz. The following example plots the engine temperature data when a user presses the Display Data button in the program shown in Figure 1:
 

Private Sub cmdDisplayData_Click()
    Dim Data As Variant
    'Generate random data to simulate 800 temperature
    'measurements
    Data = GenerateTemperatureData(800, 230#)
    'Plot data
    CWGraph1.PlotY Data
End

Note: The GenerateTemperatureData function generates a one-dimensional array of values to simulate acquisition of temperature measurements. Throughout this application note, several similar functions are used to simulate different types of measurements. In your program, replace simulation with actual data acquisition.

Figure 1. Plotting Data

 

 

The temperature data shown in Figure 1 is plotted on the y-axis while the x-axis is automatically incremented by one unit for each y value plotted. The x-axis data does not correctly reflect the actual relative time the data was collected because the actual time period between each sample is 0.01 seconds (100 Hz). The Plot and Chart methods have optional parameters that you can use to exactly specify how you want data to be visualized. Use the third parameter (xInc) on the PlotY method to specify the correct increment along the x-axis between each y value. In this example, set xInc to 0.01:
 

Private Sub cmdDisplayData_Click()
    Dim Data As Variant
    'Collect temperature measurements
    Data = GenerateTemperatureData(800, 230#)
    'Plot data
    CWGraph1.PlotY Data, , 0.01
End

Note: Use the Measurement Studio Reference, which is available from your Windows Start menu, to get complete reference information on the CWGraph control and setting properties, calling methods, passing parameters, and defining events.
 

Figure 2 shows the x-axis correctly representing time in seconds

Figure 2. Plotting Data with an X Increment

 

Use the PlotXvsY or PlotXY method to associate x data with y data rather than letting the graph automatically create an x value based on an increment. The PlotXvsY method requires the x and y data in separate parameters. The PlotXY method requires a two-dimensional array containing x and y data. Table 2 summarizes when to use each Plot method.
 

Table 2. Plot Methods

 

Charting Data

The Chart methods display real-time data that is acquired at relatively slow speeds. The graph appends new data to the end of the existing chart, so you can view the entire data history of the acquisition. You can display data in a strip chart so that as new data is added to the chart, the existing chart shifts to the left to make room for the new data on the right of the chart. Or you can display data in a scope chart, where data is drawn from left to right and then the plot disappears and continues drawing left to right again.
 

You can maintain a history of previously charted data. To maintain a history of previously charted data, set the Chart history property to Fixed on the Graph property page and select a value that will hold as many data points as you need. Alternatively, you can enable the chart history programmatically with the ChartLength property.
 

The following code charts data, rather than plotting it, and saves 3000 historical values. This example uses the ChartXY method to display time versus temperature measurements. Data is a two-dimensional array of data where the first row contains the time and the second row contains the temperature measurements:

Private Sub cmdDisplayData_Click()
    'Set chart history programmatically
    CWGraph1.ChartLength = 3000
    'Generate 800 measurements at 100 Hz for a
    'single plot of time vs temperature
    Data = GenerateTempVsTimeData(800, 230#, 100)
    'Chart data CWGraph1.ChartXY Data, 0.01
End

If you run this example and press the Display Data button several times, you’ll see that new data is added to the existing plot until the graph displays a total of 3000 points. When the graph has 3000 points and you press Display Data again, the oldest data is removed from the chart and chart history so that the graph continues to hold only 3000 data points.

 

Table 3 summarizes when to use each Chart method.

Table 3. Chart Methods

Displaying Two or More Plots of Data
 

Many times you collect similar data sets from several sources and need to display them in a single graph. For example, after setting up and performing an engine test to monitor a single temperature on a single cylinder, you might want to extend the test to monitor the temperatures in each of the engine’s cylinders. Both sets of data represent temperature data from the same engine even though they are for different parts of the engine, so it makes sense to use a single graph to display both.
 

You can easily create several plots by passing a two-dimensional array to the PlotY or ChartY method. Each row contains data for a single plot on the graph. The graph, which contains a CWPlots collection that manages individual CWPlot objects, assigns each data plot to a CWPlot object. By default, the CWPlots collection contains one CWPlot object. If you pass data for only one plot, as was done in the last two examples, the graph uses the existing CWPlot object. If you pass data for four plots and you do not explicitly add more CWPlot objects, the graph automatically creates three more CWPlot objects to hold the remaining data.
 

The following procedure displays four plots of temperature data on the same graph, as shown in Figure 3:
 

Private Sub cmdDisplayData_Click()
    Dim Data As Variant
    'Generate 4 plots of 800 data points
    Data = GenerateMultiChannelTempData(4, 800, 230#)
    'Display plots (Data is a 4-row, 2D array)
    CWGraph1.PlotY Data, , 0.01
End

 

Figure 3. Displaying Four Plots

 

When you call a Chart or Plot method on the CWGraph object and there are existing plots, the graph updates the data in the first CWPlot object and automatically removes the dynamically created CWPlot objects to display new data in new CWPlots. CWPlot objects that are automatically updated when a Plot or Chart method is called on the CWGraph object are referred to as multiplots. Every time you call a Plot or Chart method that creates multiplots on the graph, the graph updates or removes existing multiplots before plotting new multiplots.
 

If you want to create a plot that does not get removed when you create new multiplots, you must explicitly create a new CWPlot object and set the MultiPlot property to False. Then call a Chart or Plot method on the CWPlot object rather than the CWGraph object.
 

For example, you might want the first four plots to represent temperature information and a fifth plot to represent the average temperatures. The first time you press Display Data, the four temperature plots are displayed. You then press a second button to average the temperature plots and display a fifth plot that contains temperature averages. If you press Display Data again, the first four plots -- because they are multiplots -- are removed and four new plots are created, but the fifth plot -- because it is not a multiplot -- remains on the graph. The following steps explain how to interactively create a CWPlot object named Average that averages the four temperature plots in the example:

1. Add a new CWPlot object on the Plots property page.

2. Change the plot name to Average.

3. (Optional) Configure the properties so that the plot looks just as you want it. For example, you might change the line color to yellow or modify the line style and width.

4. Uncheck the Use in Multiplots option.

5. Click OK to create the new CWPlot object.

6. Call a Plot or Chart method in your code and use the Average plot to display the results, as in the following example:
    

'Average data
'Plot data using the Average CWPlot object
CWGraph1.Plots("Average").PlotY AvgArray

You can achieve the same results programmatically with the following code:

 

'Create new CWPlot object
Dim AveragePlot As CWPlot
Set AveragePlot = CWGraph1.Plots.Add
'Name the plot "Average"
AveragePlot.Name = "Average"
'Turn off MultiPlot option
AveragePlot.MultiPlot = False
'Plot data using the Average CWPlot object
AveragePlot.PlotY AvgArray, , 0.01

 

Creating Two or More Y-Axes

Sometimes you might want two plots in a single graph even though the plots display completely different physical quantities. After acquiring and charting in a single graph the temperatures for the engine cylinders, you might want to measure the pressure in the cylinders and create a graph that plots the temperature and pressure for a given cylinder. The y-axis that displays the temperature scale is not the best scale to view the cylinder pressure, so you can add a second y-axis to display the pressure scale, as shown in Figure 4.

Figure 4. Creating Multiple Axes

 

All graphs have two axes by default -- one x-axis and one y-axis -- but you can add up to eight y-axes on a CWGraph control. You can interactively add multiple y-axes using the property pages, as described by the following steps. For this example, first add a second plot to the CWPlots collection named PressurePlot to represent the pressure data:

1. On the Axis property page, click the Add button.

2. Give the new CWAxis a descriptive name. For this example, you might use PressureAxis.

3. (Optional) Configure the properties to make it look like you want. For example, you might want to change the color of the ticks and labels or move the axis to the right of the graph.

4. On the Plots page, associate the axis with a plot. Select the plot from the list and the new y-axis from the Y-Axis pull-down menu.

 

You can achieve the same results programmatically with the following code:
 

Dim PressureAxis As CWAxis
'Create a reference to a new CWAxis object
'named "PressureAxis"
Set PressureAxis = CWGraph1.Axes.Add
PressureAxis.Name = "PressureAxis"
'Associate Pressure axis with second plot
'(the pressure plot)
Set CWGraph1.Plots("PressurePlot").YAxis = _
 CWGraph1.Axes("PressureAxis")

Notice that both plots and axes in Figure 4 have identical properties. The plots have the same green line color and the same line style, and both axes have the same formatting. However, each plot represents a different type of data and it is difficult to tell which plot belongs to which axis. Refer to the next section, Customizing Graph Properties, for information about modifying graph, plot, and axis properties to customize the appearance of a graph, convey more information, or highlight important data.
 

Customizing Graph Properties

The graph has many properties you can modify to customize its appearance, convey more information, or highlight important data. Figure 5 shows illustrates how customizing properties, such as the graph and axes captions and axes placement, increases the effectiveness of the graph.
 

Figure 5. Customizing the Graph, Axes, and Plots
 

Although you can modify properties programmatically during runtime, you will find it much easier to plan what you want the graph to look like, how it should behave, and which objects you need and then interactively add objects and set properties in the property pages during design time. Consider the following questions as you identify your visualization needs:

• How should data be displayed? Is data best displayed as a chart or graph? Select a custom format on the Style page. Then use the Graph property page to set the chart history, change the color of the graph, or add a caption.

• How many plots do you need and how should each look? Use the Plots property page to add the appropriate number of CWPlot objects and specify the properties to make them effectively communicate the data.

• Each new plot is given default properties as specified by the PlotTemplate. You can set properties for the plot template interactively on the Plots property page. You can achieve the same results programmatically:

'Assign to all dynamically created plots a blue line color,
'dashed line style, and asterisks as points.
CWGraph1.PlotTemplate.LineColor = vbBlue
CWGraph1.PlotTemplate.LineStyle = cwLineDash
CWGraph1.PlotTemplate.PointStyle = cwPointAsterisk

• How many y-axes do you need to clearly identify the data in the different CWPlot objects? Add additional y-axes in the Axes page if you need them. Use the Ticks page to add captions or modify the appearance of any axis.

  You can achieve the same results programmatically:

   

     'Set x-axis caption
    CWGraph1.Axes(1).Caption = "Time (sec)'
    'Set first y-axis caption
    CWGraph1.Axes(2).Caption = "Temperature (deg F)
    'Set second y-axis caption
    CWGraph1.Axes("PressureAxis").Caption = _
      "Pressure (psi)"
  
    'Display the ticks and labels of the Pressure
    'axis on the right side
    CWGraph1.Axes("PressureAxis").Ticks.Right = True
    CWGraph1.Axes("PressureAxis").Labels.Right = True

  
    'Remove the ticks and labels from the left side
    CWGraph1.Axes("PressureAxis").Ticks.Left = False
    CWGraph1.Axes("PressureAxis").Labels.Left = False

• Do you need to mark an axis with special labels? Use the Value Pairs property page to interactively group a name and a value on an axis that you can use to identify a custom tick, label, or grid line. Value pairs are especially useful if you are graphing a histogram and the histogram categories are textual rather than numeric. In this example, you might want to add a value pair to mark the temperature threshold, as shown in Figure 5.

   

  You can achieve the same results programmatically:

    'Add a value pair to label the temperature
    'threshold on the first y-axis
    CWGraph1.Axes(2).ValuePairs.Add
    CWGraph1.Axes(2).ValuePairs(1).Name = "Threshold"
    CWGraph1.Axes(2).ValuePairs(1).Value = 235

Tip: You might find it helpful to browse the property pages using the context-sensitive help to view descriptions for any of the properties in which you are interested.

 

Conclusion

The Measurement Studio CWGraph control is a powerful tool for visually communicating data. With its wide variety of plotting and charting options, you can create simple strip and scope charts or complex graphs that contain multiple plots and y-axes. You can use the Chart and Plot methods to display your data in a way that makes the most sense for your application. You can interactively or programmatically set properties to vary the graph display and stress the information that is really important. Refer to the Measurement Studio Reference, available from your Windows Start menu, to investigate other features that you can use to visualize or accentuate data in the CWGraph control.