PerformanceChart / ToolStripPerformanceChart controls with multiple time series

• Download source files - 41.2 KB

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.

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.

/// <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:"

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.

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.