Introduction

The Simple Performance Chart is a UserControl that is designed and developed to display varying
performance data like reads per second on a disk drive, the bandwidth for a server, or free CPU resources,
in a visual, clean manner. It can be controlled by a built-in Timer, which makes synchronized display of
values possible. The control offers several formatting options like border style, line colors and
styles, widths, a background gradient, and so on.

The purpose of this article is not only to provide necessary information on how to use
this simple control, but also to show how a few interesting issues
have been solved. It's neither intended for covering all drawing techniques, nor to provide a
ready solution for a production environment.

Features

Absolute and Relative mode with automatic scaling

Built-in Timer for display synchronization or
Real-time display

Customizable display (colors, line style, borders)

Background

I found many chart drawing projects on the web, but most of them were intended for displaying complete data
records in countless possible variations. I could not find a good control
that could display a "real-time"
chart of my server's performance, which I collected with the PerformanceCounter
component (or fetched
from other sources). So I wrote my own, and learned a few tricks and techniques, which I'd like to share with you now.

Using the code

Set up the Chart Control

Using the control is pretty easy. Simply link the required assembly reference ("SpPerfChart.dll"),
compile your project, choose the SpPerfChart control from the
Toolbox and drag it into your Form or
any Control. You can edit all of the control's properties in the designer's Properties
panel.

Provide performance data

Other than the ability to Clear() the chart from any data, there
is only one public method
available for providing the data: AddValue(decimal). Any
time you obtain a value from anywhere (released by an event, obtained from
recurring routines, and so on), add it to the PerfChart control using
the AddValue(decimal) method. No need to worry about data preparation or display synchronization.
Be sure to set up the PerfChart control properly for your scenario.

Now that we know how to use the control, let's take a look at some interesting issues and how
they have been solved.

Drawing Methods

The actual drawing of the graph is one of the easier parts of the project. I decided to work with two Points,
representing the current and the previous value position. While
iterating through the value collection,
the Point instances are being reused every time. I used a "trick" to avoid an additional condition here:
Instead of skipping the drawing of the first line inside the loop (initial "previous value" is zero), the first line is
drawn outside the control's bounds.

You probably noticed the gridScrollOffset variable here. It's required because while the horizontal
gridlines always have the same positions, the vertical grid is scrolling with the
chart (line) itself. The
gridScrollOffset value is calculated every time when a new performance value is added.

Quick and flicker-free drawing: Double Buffering

All animated elements (or just regions) must redraw on each change, which can cause ugly flickering, depending on
the redraw speed and size of the canvas to be redrawn. (You could limit the region to reduce the flickering effect,
but since it's scrolling, this is not an option for this chart control.) Basically I found two different
options which helped in this case:

You can enable double buffering for a control using the following (recommended) method:

I tested the options without a clear conclusion - the results were satisfying in both cases.
The first method is
more specific on how to handle drawing and thus more optimized, which is why I recommend
it. You can find more
information on double-buffering in the References section.

Relative Value Scaling

An essential issue was the capability to display arbitrary values in a proper relationship, limited
to the actual viewing range. Defining a fixed Maximum value (for example, a network bandwidth of 100,000 kbits)
would result in unrecognizably flat graph changes when the network reports (as
it usually might) a low bandwidth usage of maybe
10, 100 or 1,000 kbits. With automatic relative scaling, the highest visible value is the measure for all
display calculations. Because it's dynamic, this value is displayed in the upper-left corner of the chart.

The number of visible values is calculated from the control's Width and the (fixed) horizontal value
spacing (in pixels). The highest displayed value results from a simple loop that checks all visible values to find the highest one. Finally,
a few simple mathematical "rule of three" functions are performed to calculate the actual pixel positions.
This is handled by the CalcVerticalPosition() method:

As you can see, the method is quite simple. The currentMaxValue > 0 condition prevents the method
from generating a division by zero. It could have been combined with the ScaleMode comparison in the
else if clause,
but this more structured scheme looked "safer" for future extensions.

We don't have to care about the display synchronization as long we can be sure that our "performance provider" (actually a class
supplying the values) is providing all values at regular intervals. For example, this is very suitable for displaying a
CPU usage chart, where we measure the data once a second, controlled by our custom Timer
component.

But sometimes, we can't tell how regular the intervals can be, or how many values we receive each second. The Simple Performance
Chart offers three synchronization options to address this problem: Simple,
SynchronizedAverage and SynchronizedSum.
Let's take a look at typical examples for each option:

TimerMode: Simple

Case example: Web server request duration in a testing environment

We want each single request duration to be visible on the chart, so that we can track down conspicuously long-lasting
requests. We prefer the Simple TimerMode instead of the manual method because the values are reported in real-time and
there could be dozens of requests in a second. Disabled TimerMode would cause a redraw for each value, slowing down
the performance of the whole control. We use the Simple TimerMode to refresh the chart only once a second. On every interval, all
collected values (during the interval) are "flushed" and displayed in the chart.

TimerMode: SynchronizedAverage

Case example: Web server download file size statistics

Like in the previous case, the values are reported in real-time. Every starting request triggers the AddValue()
method, providing the size of the requested file (in bytes). Because we only need a simple, statistical overview of the file throughput,
we enable the SynchronizedAverage TimerMode. On each interval it will report exactly one value: the calculated
average of all collected values during the interval time span. Example: The provider reported three file downloads during a second:
100 kB, 200 kB and 900 kB. The chart will display the average of 400 kB.

TimerMode: SynchronizedSum

Case example: Web server simultaneous users load

Let's assume that most conditions can be derived from the previous case. But this time, we are interested in the actual
amount of users requesting our web server per second. (The actual method parameter can even be a hard-coded
1.0).
The SynchronizedSum TimerMode will add all values provided during the interval period.

The Demo Application offers dynamic value generators where all behaviors can be tested and comprehended.

Visual Styling

It's quite an easy matter to allow extensive formatting possibilities for each single drawn element. You can
modify dozens of properties for each single line (like Color, Width or DashPattern, just to name few). I don't want to cover all the possibilities in
this article.

Style Properties Object Located in a Sub-Property

I decided to allow different formatting options per element: The lines (main chart line, optional average-level line, optional grid lines)
can have custom Colors, Widths and DashStyles. Besides that, there
are a few other
settings like the background gradient colors and visibility of gridlines.

It wouldn't be a good approach to put all these possible properties directly into the
control class itself, so I
created a simple class called PerfChartStyle, containing just the formatting properties.
A global instance of this class was created and exposed in a property with the same
name (PerfChartStyle).

Now, this was the resulting Designer Property Bar:

So what's that? The property was not declared as "read-only". Nevertheless, the
forms designer doesn't allow
a closer look into the style class. Or rather, it doesn't know about it yet.
That is what we need to tell the designer.

A TypeConverter "...provides a unified way of converting types of values to other types, as well as for accessing standard values and subproperties." (from
MSDN). With the TypeConverter attribute we tell the component designer
which TypeConverter we'd like to use. The ExpandableObjectConverter is a converter which discloses its public and visible
properties to a PropertyGrid.
I won't cover the details here; for more information on this topic, continue to the references section.

Now that we set up the right TypeConverter, we're not ready yet: Our changes are only
effective while in design mode!
The UserControl isn't able to keep the changes inside the child properties. That has something to to with
the ComponentModel architecture. Oh well, it's not able yet: Let's move from
attributes
on the class to the actual PerfChartStyle property of the SPPerfChart
control and its attributes:

Conclusion

This Performance Chart project is a good example of how to create a basic UserControl with custom drawing.
But we are not finished yet: Many ideas for possible improvements are waiting! We can improve the
design-time integration, have a closer look at possible threading issues, and integrate a hundred new features. But if
this simple UserControl can satisfy our needs, our whole effort to implement this solution from scratch is
low, thanks to .NET and its straightforward but powerful drawing capabilities.

Share

About the Author

Thomas' (professional) software development career started in 1998, where he made his first experience with Java, with main focus on web/internet development with JSP and later, ColdFusion, until he finally was confronted with the Microsoft .NET technology.

Great initial success on displaying a 'rolling waveform' after converting a 128 element array chunk of electrical signal data arrivingt every second from a socket or serial port. I want to add a zoom feature to look at certain parts of waveform closer and imagine DrawBackGroundAndGrid() and DrawChart within OnPsint will require a bit of adjustment. Thank you! A 5 for sure!

I don't know where to find this user controler file. Could you please tell me how to find or download it from internet?
i realy need to access to this file and i also dont know how to use it.
it would be so kind of you in case you help me with the answer.
i am impacaintly waiting for your responce

thanks for sharing your nice addon solution; I currently have no practical use for the extension but it looks great. Also, thank you very much for the feedback and compliments, i really appreciate them!

Hello! I just installed Visual C# 2008 Express and encountered the same problem - the Control didn't show up. I tried to solve this problem as quickly as possible so i did the following:

In Visual Studio, Right Click in the Toolbox and choose "Select Items..." (analogous; I dont know how it's called exactly because i have the german version, the menu item has the caption "Elemente Auswählen...") then in the new opened window click "Browse" below and select the DLL. In the list you will notice "PerfChart" appearing - and after clicking OK also in the toolbox (it appeared under "Common Controls").

This sounds like a manual way, there must be a better one i guess =) But it will help at least.

This is really a very cool article and control. I was wondering though how I can set the absolute min and max (i.e. span) of the control. Right now if I insert a value it is assumed to be the max until something bigger is entered... I was curious.

Thanks for your compliments! There is no option like this, but with a little source code manipulation you should be able to get the results you need. Try to understand what Method CalcVerticalPosition() does. Sorry that I cannot help you further

The software was originally released under the LGPL license as stated in the document. If the restrictions aren't clear (i might choose a different license in future, since i found the LGPL beeing not that suitable) I hereby grant you the right to use it in any commercial software without further attribution.