Click here to Skip to main content
13,452,396 members (58,020 online)
Click here to Skip to main content
Add your own
alternative version


72 bookmarked
Posted 5 Aug 2007

PerformanceChart / ToolStripPerformanceChart controls with multiple time series

, 20 Aug 2007
Rate this:
Please Sign up or sign in to vote.
A simple performance chart control with multiple series

Screenshot - perfchart.jpg


This project is inspired by "Simple Performance Chart" by eclipse2k1.

There are a few reasons for this project and article. The original article provides support for only one time serie and I required a few. Secondly, I found a number of limitations in the original control which I decided to fix and improve.

The original article is well-written and covers the basics quite well, so I won't go into much detail, but run over the improvements and enhancements introduced.


The list of improvements is as follows:

  • The chart contains a collection of time series. Each individual serie can be independently configured from the rest
  • Re-worked chart's and serie's styles
  • Enhanced support for PropertyGrid control
  • Thread-safety
  • New ToolStripPerformanceChart control that can be dropped onto a StatusStrip control

Time Series Collection

First of all, I introduced time series. Each serie has a SerieStyle property that defines the serie's appearance. The style specifies whether the average value and its line are visible to the user, as well as defines colors and line style for the serie and the average value lines.

Screenshot - perfchart_seriestyle.jpg

Once the time serie object was all done, I created a collection of the series. However, due to a number of limitations (one of which is the absence of events) I could not use standard List<T> as a base class for the collection. Some time back, I wrote my own library which defines a ListWithEvents<T> class and which was used for my SerieCollection object.

Screenshot - perfchart_seriecollection.jpg

/// <summary> 
/// Event-enabled collection of <see cref="Serie"/>s. 
/// </summary> 
public class SerieCollection : ListWithEvents<Serie>
    /// <summary>
    /// Overrides <see cref="OnItemAdded"/>.
    /// </summary>
    /// <param name="e"></param>
    protected override void OnItemAdded(ListItemEventArgs e)

        this[e.ItemIndex].ValueAdded += new EventHandler(
        this[e.ItemIndex].ValueModified += new EventHandler(

    private void serieCollection_ValueAddedModified(object sender, 
        EventArgs e)
        Serie serie = sender as Serie;
        if (serie == null)
        int index = this.IndexOf(serie);
        if (index < 0)
        this.OnItemModified(new ListItemEventArgs(index));

I have also needed to override the OnItemAdded() method where a new serie gets wired to the ValueAdded and ValueModified events. I do not wire to any other events because it is rather unlikely that a value would be removed from a time serie. However, if you find that in your case it is required, just add more event subscriptions here.

Using the Code

Design Time

Using the control should be straightforward: reference the library (or drop it on your toolbox) and then add the control to your form. All of the properties exposed through the property grid should be sufficient to set the control. The time series management is made easy with the help of the "Collection Editor UI:"

Screenshot - perfchart_collections.jpg


It is also easy to manipulate the control programmatically. To add a new serie:

// create a new time serie
Serie serie1 = new Serie();
// set the serie color
serie1.SerieStyle.SerieLine.Color = System.Drawing.Color.RoyalBlue;
// display an average value along with the average value line
// drawn as blue dash-dotted line
serie1.SerieStyle.DrawAverageLine = true;
serie1.SerieStyle.DrawAverageValue = true;
serie1.SerieStyle.AverageLine.Color = System.Drawing.Color.RoyalBlue;
serie1.SerieStyle.AverageLine.DashStyle = 
// set the value formatting
serie1.SerieStyle.FormatAverageValue = "N2";
serie1.SerieStyle.FormatMaxMinValues = "N0";


Now add a new value to the serie:


Should you use the control in a synchronised manner and have PerformanceChart.TimeMode set to anything but Disabled, to add a new value to the serie you would use the following code:

this.performanceChart1.AddValueToQueue(/* serie index */0, 

ToolStripPerformanceChart Control

I thought it may be useful to have a small version of the performance chart just to provide the user with some feedback on running processes. The ToolStripPerformanceChart control is perfectly suited for this role.

Screenshot - toolstrip.jpg

It was surprisingly easy to create this control. All I had to do was to inherit from ToolStripControlHost and override a few properties:

public partial class ToolStripPerformanceChart : ToolStripControlHost
        protected override Padding DefaultMargin
                if ((base.Owner != null) && (base.Owner is StatusStrip))
                    return new Padding(1, 3, 1, 3);
                return new Padding(1, 2, 1, 1);

        protected override Size DefaultSize
                return new Size(16, 16);

        public override Size GetPreferredSize(Size constrainingSize)
            Size preferredSize = base.GetPreferredSize(constrainingSize);

            if (preferredSize.Width < this.DefaultSize.Width)
                preferredSize.Width = this.DefaultSize.Width;
            if (preferredSize.Height < this.DefaultSize.Height)
                preferredSize.Height = this.DefaultSize.Height;

            return preferredSize;

Using this control is just as easy as using the PerformanceChart control. Use the designer or alternatively, should you wish to do it programmatically, create a serie and add it to the collection of series:



  • 2007-08-20: Update to version
  • 2007-08-06: Initial post, version


"Thank you" goes to eclipse2k1 for the original work.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Igor Velikorossov
Software Developer (Senior)
Australia Australia
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Gun Gun Febrianza9-Jan-17 9:40
member Gun Gun Febrianza9-Jan-17 9:40 
Generalpoints in x axis Pin,11-Nov-09 1:02,11-Nov-09 1:02 
Generalrequest Pin
RozenOren5-May-09 3:52
memberRozenOren5-May-09 3:52 
GeneralRe: request Pin
Igor Velikorossov18-May-09 13:17
memberIgor Velikorossov18-May-09 13:17 
GeneralThnx Pin
madj27-Nov-08 0:39
membermadj27-Nov-08 0:39 
NewsI added a couple features Pin
Member 293819230-Oct-08 20:25
memberMember 293819230-Oct-08 20:25 
GeneralRe: I added a couple features Pin
Igor Velikorossov30-Oct-08 20:46
memberIgor Velikorossov30-Oct-08 20:46 
GeneralExcellent Pin
Sacha Barber24-Aug-07 2:49
memberSacha Barber24-Aug-07 2:49 
Generalvery nice Pin
T1TAN20-Aug-07 21:58
memberT1TAN20-Aug-07 21:58 
GeneralSeries vs Chart min/max Pin
Koen Vingerhoets20-Aug-07 0:35
memberKoen Vingerhoets20-Aug-07 0:35 
GeneralNice control, but with a small bug Pin
Tiefeng You16-Aug-07 5:26
memberTiefeng You16-Aug-07 5:26 
GeneralRe: Nice control, but with a small bug Pin
Tiefeng You16-Aug-07 5:27
memberTiefeng You16-Aug-07 5:27 
GeneralRe: Nice control, but with a small bug Pin
Igor Velikorossov16-Aug-07 13:38
memberIgor Velikorossov16-Aug-07 13:38 
GeneralValueable enhancements Pin
eclipse2k115-Aug-07 10:23
membereclipse2k115-Aug-07 10:23 
GeneralRe: Valueable enhancements Pin
Igor Velikorossov15-Aug-07 13:58
memberIgor Velikorossov15-Aug-07 13:58 
GeneralTwo series in statusbar Pin
Koen Vingerhoets14-Aug-07 4:41
memberKoen Vingerhoets14-Aug-07 4:41 
AnswerRe: Two series in statusbar Pin
Igor Velikorossov15-Aug-07 13:58
memberIgor Velikorossov15-Aug-07 13:58 
GeneralRe: Two series in statusbar Pin
Koen Vingerhoets19-Aug-07 23:47
memberKoen Vingerhoets19-Aug-07 23:47 
GeneralRe: Two series in statusbar Pin
Koen Vingerhoets20-Aug-07 23:45
memberKoen Vingerhoets20-Aug-07 23:45 
GeneralStrong name [modified] Pin
Koen Vingerhoets14-Aug-07 0:34
memberKoen Vingerhoets14-Aug-07 0:34 
GeneralCtrlsoft.Collections.dll Pin
Igor Velikorossov14-Aug-07 16:20
memberIgor Velikorossov14-Aug-07 16:20 
Oh yes, I guess I should have mentioned that Ctrlsoft.Collections.dll is available at my other article -[^].
GeneralGreat control but... Pin
NoBrains13-Aug-07 14:47
memberNoBrains13-Aug-07 14:47 
GeneralRe: Great control but... Pin
Igor Velikorossov13-Aug-07 14:58
memberIgor Velikorossov13-Aug-07 14:58 
GeneralRe: Great control but... Pin
NoBrains14-Aug-07 11:17
memberNoBrains14-Aug-07 11:17 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180318.3 | Last Updated 20 Aug 2007
Article Copyright 2007 by Igor Velikorossov
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid