Windows Task Manager Style History Plot

• Download demo project - 149 KB
• Download source - 9.94 KB

Introduction

While working with a Process Control System, I needed to plot various output variables in real time. As Windows Task Manager History is very elegant to me, it has been my inspiration, and I added zooming capability and tooltips message to make it fancier.

Background

I want to give credits to article authors for their articles I used to accomplish this work.

• Double Buffered Canvas by Nicolas Pabion to avoid flicker plotting
• Add Scrolling to a CWnd or CDialog using a C++ Helper Class by Nschan to allow scrolling
• Parent-Independent ToolTip Support for Static (or any) Controls by John Z. Czopowik, VC++ MVP, to allow tooltip messages

Using the Code

The main class GraphWnd is derived from CWnd so that it can have a standard MFC control signature.

class GraphWnd : public CWnd

You have to plan ahead how many parameters you want to plot and choose their colors on the plots by adding different colors from a predefined enum into a vector while being passed to a GraphWnd class construction.

enum eColor     {
         SOLID_RED,
         LIGHT_RED,
         SOLID_YELLOW,
         LIGHT_YELLOW,
         SOLID_GREEN,
         LIGHT_GREEN,
         SOLID_BLUE,
         LIGHT_BLUE,
         SOLID_BLACK,
         LIGHT_BLACK,
         SOLID_MAGENTA,
         LIGHT_MAGENTA,
         SOLID_CYAN,
         LIGHT_CYAN,
         SOLID_WHITE};

...

GraphWnd(CRect rect,          //Plotting Control location

         CWnd* parent,        //parent control

         vector<ecolor> color)//color and number of parameters to be plotted

The parameters plotting is done through the UpdateGraphe method.

void UpdateGraphe(GraphData<double> data,
        double timeUnit, //the grid width in pixel on X axis

        double valueUnit,//the grid height in pixel on Y axis

        double minValue, //the minimum value expected on Y axis

        double maxValue, //the maximum value expected on Y axis

        string message)  //the tooltip message

• The structure GraphData<t> data is used to handle the display of as many as parameters you wish.

        template<T> struct GraphData
        { 
            std::vector<T> d;
        }; 

The plot axis are time axes as X axis and values axis as Y axis.

• double timeUnit is the grid width in pixel on the X axis.
• double valueUnit is the grid height in pixel on the Y axis.
• double minValue is the minimum value expected on the Y axis.
• double maxValue is the maximum value expected on the Y axis.
• string message is a tooltip message.

That's all, folks. Please vote after using my article.

History

• 25-11-2007
• Original article.