Click here to Skip to main content
15,867,141 members
Articles / Programming Languages / C#
Article

High Speed, Feature Rich, and Easy-To-Use Graphs and Charts

Rate me:
Please Sign up or sign in to vote.
4.92/5 (75 votes)
29 Nov 20066 min read 222.9K   17K   263   61
High speed graphs and charts that are also very easy to configure and use. As easy as inserting a simple chart in MS Excel!

Sample Image - GraphComponents.jpg

Introduction

This project was developed for the impatient developer (that's me sometimes, and probably you!) who's sitting late at night downloading charting libraries only to figure out that it's too complex to set up, isn't dynamic, and doesn't provide the necessary customizations.

Well, GraphComponents hopes to provide an answer to these common problems. In short, GraphComponents is a .NET user control that provides you the following features:

  • Easy to use in the Visual Studio designer IDE
  • Easy to configure during runtime
  • High speed updating
  • Rich features like custom color settings, custom background settings, smart numbering, reference values and lines, grids, transparent bars, etc.

GraphComponents currently supports Bar Graphs, Stacked Bar Graphs (Multi-bar Graphs), and a N-Channel Plotter Oscilloscope (Plotter CRO). Future versions should see other kinds of graphs too.

Usage

GraphComponents is accessible as a control from the control toolbox in Visual Studio .NET. To access GraphComponents, first launch Visual Studio .NET, and create a new Windows Application project. Open the Form Design so that it appears in the current window. View the toolbox using the View/Toolbox menu command. Right-click inside the "General" or "Components" sub-pane of the tool box, and select the "Add/Remove Items..." option. In the "Customize Toolbox" dialog that appears, select ".NET Framework Components". Click "Browse...", and navigate to the GraphComponents.dll file. Once this file is added, you should see a BarGraph, StackedBarGraph, and a Plotter option in the toolbox.

Using the Stacked Bar Graph

  • Create a new Windows Application project as described above.
  • Drag and drop the StackedBarGraph onto the form.
  • Drag and drop two Buttons (Button1 and Button2) onto the form.
  • Double click Button1. This will place a Button1_Click() function in your C# file.
  • Double click Button2. This will place a Button2_Click() function in your C# file.
  • Add the following code in the Button1_Click() function:
    C#
    // Increment the bar value by 10
    stackedBarGraph1.Bars[1].BarValue += 10;
    stackedBarGraph1.UpdateDisplay ();
  • Add the following code in the Button2_Click() function:
    C#
    // Decrement the bar value by 10
    stackedBarGraph1.Bars[1].BarValue -= 10;
    stackedBarGraph1.UpdateDisplay ();
  • Build and run the application. You have a very basic framework ready for using the StackedBarGraph. Examine the sources of the walkthrough projects for both the BarGraph and the StackedBarGraph.
  • Now, getting back to the Form Design view, adjust some of the properties of the graph in the Properties pane.
  • Set the BarOrientation property to Horizontal to get a horizontal bar graph. Notice that any change you make is instantly updated in the form's design view itself.
  • To perform high speed updating for measuring various things like pulse count, cylinder pressure of a 6 cylinder engine, music tones etc., you just have to set up a timer and update the bars accordingly. Examine the source of the GraphUsageDemo application for configuring high speed displays.

Using the Plotter Oscilloscope

The plotter oscilloscope is useful when you want to capture various input signals and observe them. The Performance tab of the Windows Task Manager has two simple plotters for monitoring CPU usage history and page file usage history. On Windows 2000 or XP, you can view the Windows Task Manager by pressing Ctrl + Shift and then pressing Esc.

Another thing about plotters and CROs in general is that they receive inputs through their 'channels'. If you observe the Plotter in the GraphUsageDemo application, you can see that the Advanced Body Measurement System measures four parameters (voltage, current, body pulses, and metabolism) through its four channels. While a simple low-end CRO has two channels, a hi-fi CRO (called as a spectrum analyser) can have many input channels. OK, enough with electronics theory! Let's get back to .NET.

  • To use a plotter, create a new Windows Application project as described above.
  • Drag and drop the Plotter onto the form.
  • In the form's constructor, add the following line after the InitializeComponent(); line:
    C#
    // Start the plotter
    plotter1.Start ();
    // Set the plot rate to 200 ms - which means that
    // the plotter's samples are spaced 200 milisecond apart
    plotter1.PlotRate = 200;
  • Go back to the Form Design view and drag and drop a Button (Button1) onto the form.
  • Double click Button1. This will place a Button1_Click() function in your C# file.
  • Add the following code in the Button1_Click() function:
    C#
    // Generate random values for plotting on the 1st and 2nd channel
    Random r = new Random ( (int) DateTime.Now.Ticks);
    plotter1.Channels[0].CurrentValue = r.Next (0, 100);
    plotter1.Channels[1].CurrentValue = r.Next (0, 5);
    
    plotter1.UpdateDisplay ();
  • Build and run the application. Keep clicking Button1, and the plotter starts plotting two separate lines for its two channels. You now have a very basic framework ready for using the Plotter. On the top left hand corner of the plotter, you can see the < and > icons. These are used for navigating to the next and previous channels. On surfing channels, the currently active channel appears brighter. The + and - icons below are used for offset adjustment. You can experiment by clicking these buttons and repeatedly clicking Button1.
  • By default, channels 1 and 2 are enabled, while channels 3 and 4 are disabled. The X axis time range is set to 9 seconds. Once the plotter has reached the right side, it automatically scrolls to the left. Also, by default, the upper and lower limits for channel 1 are set to 100 and 0. The upper and lower limits for channel 2 are set to 5 and 0.
  • Examine the sources of the PlotterWalkThrough project and the Plotter part of GraphUsageDemo.
  • Now, getting back to the Form Design view, adjust some of the properties of the plotter in the Properties pane. For example, adjust the PlotRate, GraphMarginLeft, and GraphMarginTop.
  • To perform high speed updating for measuring various things like voltages, currents, etc., you just have to set up a timer. Also note that the PlotRate must tally with the timer's Interval to get an accurate measurement. Examine the source of the GraphUsageDemo application for configuring high speed displays.

While using this in your code, it is useful to know the following things:

  • Start() starts the plotter.
  • Stop() stops the plotter. If the plotter has scrolled, then a scroll bar appears allowing you to see the earlier plots.
  • Start() and Stop() also act like Resume and Pause. So you can pause, examine the graphs, and resume by using the same two functions.
  • Reset() erases the plotter and makes it fresh for using again.
  • The CompressedMode property allows you to view the entire plot in the graph area without any scrolling.
  • NextChannel() and PreviousChannel() allow you to surf channels.
  • A channel can be enabled or disabled. You cannot see the output of a disabled channel.
  • If you are not satisfied with four channels, you can add more channels by easily changing the source code. The upper limit is based on how satisfied you are with the performance. So, you could possibly set up 8 channels and observe the data bus of an 8-bit microprocessor.

Acknowledgements

I would like to thank my wife Shubha, for providing me with some cool ideas with respect to usability, and for lots of other small things. Also, thanks to some of my friends in my current and previous companies, with whom I discuss a lot about software.

Conclusion

Hope you find this library useful and that you enjoy using it. Please send your criticisms, bugs, ideas for new features, and suggestions to anupshubha@yahoo.com. I would be especially happy with any ideas adhering to the "Keep It Simple" principle.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralVariable plotrate problem Pin
bombompb2-Aug-07 4:04
bombompb2-Aug-07 4:04 
GeneralRe: Variable plotrate problem Pin
bombompb2-Aug-07 22:12
bombompb2-Aug-07 22:12 
QuestionStacked Bars? Pin
lessms20-Jul-07 6:04
lessms20-Jul-07 6:04 
GeneralA couple of fixes Pin
Michael Moore21-Jun-07 14:35
Michael Moore21-Jun-07 14:35 
QuestionUsing free? PinPopular
hansipet20-Jun-07 2:13
hansipet20-Jun-07 2:13 
QuestionLogarithmic Pin
XsiXmaX19-Feb-07 2:54
XsiXmaX19-Feb-07 2:54 
Generalautomatic scroll to the right Pin
hubert819-Feb-07 3:12
hubert819-Feb-07 3:12 
Questiondisplaying serial port output using GraphComponents Pin
ghostz1326-Jan-07 3:35
ghostz1326-Jan-07 3:35 
Hi Anup,

I'm using your GraphComponents to plot the output from my micro-controller which outputs data in hex format.. using hyperterminal i get 0000 to 0fff as my output from the microcontroller.

I cast the output from the COM port as float and send it to the channel for display but it doesnt seem to work... I have implemented code to append output from the COM port to a logger.txt and it correctly shows its receiving output so i do not think the problem is with the serialport code.. can you pls enlighten me? thanks in advance.

gerardtay[at]yahoo[dot]com

My code is as of below:

private void plotterTimer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
{
byte[] buffer = null;
int offset = 0;
int count = 2;
//plotter1.Channels[0].CurrentValue = (float)(5 * r.NextDouble());
plotter1.Channels[0].CurrentValue = (float) (serialPort1.Read(buffer,offset,count));

if ( plotter1.Channels[0].Enabled)
{
plotter1.UpdateDisplay();
}
}
AnswerRe: displaying serial port output using GraphComponents Pin
Lukgaucho7720-May-09 0:50
Lukgaucho7720-May-09 0:50 
QuestionWhere's the dll? Pin
stjds1-Jan-07 10:04
stjds1-Jan-07 10:04 
AnswerRe: Where's the dll? Pin
Anup. V2-Jan-07 2:47
Anup. V2-Jan-07 2:47 
GeneralRe: Where's the dll? Pin
ghostz1322-Jan-07 3:55
ghostz1322-Jan-07 3:55 
GeneralRe: Where's the dll? Pin
NAB3716-Feb-07 8:44
NAB3716-Feb-07 8:44 
Questionis DLL code available? Pin
elwolv13-Dec-06 22:04
elwolv13-Dec-06 22:04 
QuestionRefresh time less than 40 ms Pin
hellamasta11-Dec-06 3:49
hellamasta11-Dec-06 3:49 
AnswerRe: Refresh time less than 40 ms Pin
Anup. V11-Dec-06 8:36
Anup. V11-Dec-06 8:36 
GeneralRe: Refresh time less than 40 ms Pin
hellamasta11-Dec-06 11:31
hellamasta11-Dec-06 11:31 
QuestionVery nice control! Is line graph possible? Pin
Raymond Verbruggen8-Dec-06 23:04
Raymond Verbruggen8-Dec-06 23:04 
AnswerRe: Very nice control! Is line graph possible? Pin
Anup. V11-Dec-06 8:31
Anup. V11-Dec-06 8:31 
GeneralConvert Project to Visual Studio 2005 Pin
davidhman4-Dec-06 5:04
davidhman4-Dec-06 5:04 
GeneralRe: Convert Project to Visual Studio 2005 Pin
ghostz1322-Jan-07 14:09
ghostz1322-Jan-07 14:09 
GeneralRe: Convert Project to Visual Studio 2005 Pin
davidhman23-Jan-07 3:53
davidhman23-Jan-07 3:53 
GeneralRe: Convert Project to Visual Studio 2005 Pin
ghostz1326-Jan-07 3:26
ghostz1326-Jan-07 3:26 
AnswerRe: Convert Project to Visual Studio 2005 Pin
valtrig23-Feb-07 9:24
valtrig23-Feb-07 9:24 
Generalwow! Pin
John Lindon29-Nov-06 7:05
John Lindon29-Nov-06 7:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.