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

PerformanceChart / ToolStripPerformanceChart controls with multiple time series

Rate me:
Please Sign up or sign in to vote.
4.89/5 (16 votes)
20 Aug 2007CPOL3 min read 65K   874   72   24
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

C#
/// <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:

C#
// 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:

C#
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:

C#
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:

C#
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:

C#
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)


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

Comments and Discussions

 
GeneralMy vote of 5 Pin
Gun Gun Febrianza9-Jan-17 9:40
Gun Gun Febrianza9-Jan-17 9:40 
Generalpoints in x axis Pin
goura@libero.it,11-Nov-09 1:02
goura@libero.it,11-Nov-09 1:02 
Generalrequest Pin
Oren Rosen5-May-09 3:52
Oren Rosen5-May-09 3:52 
GeneralRe: request Pin
Igor Velikorossov18-May-09 13:17
Igor Velikorossov18-May-09 13:17 
GeneralThnx Pin
madj27-Nov-08 0:39
madj27-Nov-08 0:39 
NewsI added a couple features Pin
Member 293819230-Oct-08 20:25
Member 293819230-Oct-08 20:25 
GeneralRe: I added a couple features Pin
Igor Velikorossov30-Oct-08 20:46
Igor Velikorossov30-Oct-08 20:46 
GeneralExcellent Pin
Sacha Barber24-Aug-07 2:49
Sacha Barber24-Aug-07 2:49 
Generalvery nice Pin
T1TAN20-Aug-07 21:58
T1TAN20-Aug-07 21:58 
GeneralSeries vs Chart min/max Pin
Koen Vingerhoets20-Aug-07 0:35
professionalKoen Vingerhoets20-Aug-07 0:35 
GeneralNice control, but with a small bug Pin
Tiefeng You16-Aug-07 5:26
Tiefeng You16-Aug-07 5:26 
GeneralRe: Nice control, but with a small bug Pin
Tiefeng You16-Aug-07 5:27
Tiefeng You16-Aug-07 5:27 
GeneralRe: Nice control, but with a small bug Pin
Igor Velikorossov16-Aug-07 13:38
Igor Velikorossov16-Aug-07 13:38 
GeneralValueable enhancements Pin
eclipse2k115-Aug-07 10:23
eclipse2k115-Aug-07 10:23 
GeneralRe: Valueable enhancements Pin
Igor Velikorossov15-Aug-07 13:58
Igor Velikorossov15-Aug-07 13:58 
GeneralTwo series in statusbar Pin
Koen Vingerhoets14-Aug-07 4:41
professionalKoen Vingerhoets14-Aug-07 4:41 
AnswerRe: Two series in statusbar Pin
Igor Velikorossov15-Aug-07 13:58
Igor Velikorossov15-Aug-07 13:58 
GeneralRe: Two series in statusbar Pin
Koen Vingerhoets19-Aug-07 23:47
professionalKoen Vingerhoets19-Aug-07 23:47 
GeneralRe: Two series in statusbar Pin
Koen Vingerhoets20-Aug-07 23:45
professionalKoen Vingerhoets20-Aug-07 23:45 
GeneralStrong name [modified] Pin
Koen Vingerhoets14-Aug-07 0:34
professionalKoen Vingerhoets14-Aug-07 0:34 
GeneralCtrlsoft.Collections.dll Pin
Igor Velikorossov14-Aug-07 16:20
Igor Velikorossov14-Aug-07 16:20 
GeneralGreat control but... Pin
NoBrains13-Aug-07 14:47
NoBrains13-Aug-07 14:47 
GeneralRe: Great control but... Pin
Igor Velikorossov13-Aug-07 14:58
Igor Velikorossov13-Aug-07 14:58 
GeneralRe: Great control but... Pin
NoBrains14-Aug-07 11:17
NoBrains14-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.