Click here to Skip to main content
Click here to Skip to main content
Go to top

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

Introduction

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.

Improvements

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)
    {
        base.OnItemAdded(e);

        this[e.ItemIndex].ValueAdded += new EventHandler(
            serieCollection_ValueAddedModified);
        this[e.ItemIndex].ValueModified += new EventHandler(
            serieCollection_ValueAddedModified);
    }

    private void serieCollection_ValueAddedModified(object sender, 
        EventArgs e)
    {
        Serie serie = sender as Serie;
        if (serie == null)
            return;
        int index = this.IndexOf(serie);
        if (index < 0)
            return;
        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

Programmatically

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 = 
    System.Drawing.Drawing2D.DashStyle.DashDot;
// set the value formatting
serie1.SerieStyle.FormatAverageValue = "N2";
serie1.SerieStyle.FormatMaxMinValues = "N0";

this.performanceChart1.Series.Add(serie1);

Now add a new value to the serie:

this.performanceChart1.Series[0].AddValue((decimal)this.random.Next(100));

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, 
    (decimal)this.random.Next(100));

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
        {
            get
            {
                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
        {
            get
            {
                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:

this.toolStripPerformanceChart1.PerformanceChart.Series.Add(serie1);

History

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

Credits

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

License

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

Share

About the Author

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

Comments and Discussions

 
Generalpoints in x axis Pinmembergoura@libero.it,11-Nov-09 1:02 
Generalrequest PinmemberRozenOren5-May-09 3:52 
GeneralRe: request PinmemberIgor Velikorossov18-May-09 13:17 
Hi Oren, glad you've found it useful.
 
I suppose there is a way, but I am afraid with my current work load I am unable to be any more helpful than this. But feel free to play with the control and make any changes you may feel necessary.
 
You may look into GraphicsPath class and Graphics.FillPath() method, I think they may hold the answer you seek.
 
Cheers, Igor
GeneralThnx Pinmembermadj27-Nov-08 0:39 
NewsI added a couple features PinmemberMember 293819230-Oct-08 20:25 
GeneralRe: I added a couple features PinmemberIgor Velikorossov30-Oct-08 20:46 
GeneralExcellent PinmemberSacha Barber24-Aug-07 2:49 
Generalvery nice PinmemberT1TAN20-Aug-07 21:58 
GeneralSeries vs Chart min/max PinmemberKoen Vingerhoets20-Aug-07 0:35 
GeneralNice control, but with a small bug PinmemberTiefeng You16-Aug-07 5:26 
GeneralRe: Nice control, but with a small bug PinmemberTiefeng You16-Aug-07 5:27 
GeneralRe: Nice control, but with a small bug PinmemberIgor Velikorossov16-Aug-07 13:38 
GeneralValueable enhancements Pinmembereclipse2k115-Aug-07 10:23 
GeneralRe: Valueable enhancements PinmemberIgor Velikorossov15-Aug-07 13:58 
GeneralTwo series in statusbar PinmemberKoen Vingerhoets14-Aug-07 4:41 
AnswerRe: Two series in statusbar PinmemberIgor Velikorossov15-Aug-07 13:58 
GeneralRe: Two series in statusbar PinmemberKoen Vingerhoets19-Aug-07 23:47 
GeneralRe: Two series in statusbar PinmemberKoen Vingerhoets20-Aug-07 23:45 
GeneralStrong name [modified] PinmemberKoen Vingerhoets14-Aug-07 0:34 
GeneralCtrlsoft.Collections.dll PinmemberIgor Velikorossov14-Aug-07 16:20 
GeneralGreat control but... PinmemberNoBrains13-Aug-07 14:47 
GeneralRe: Great control but... PinmemberIgor Velikorossov13-Aug-07 14:58 
GeneralRe: Great control but... PinmemberNoBrains14-Aug-07 11:17 

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

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

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