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

NotifyIconChart

Rate me:
Please Sign up or sign in to vote.
4.81/5 (26 votes)
31 Aug 20022 min read 141.2K   3.9K   129   23
A .NET component that creates pie and bar charts in the system tray

Sample Image

Introduction

This component will help you to create a little chart in the System Tray. This is useful in applications like GetRight, which show progress of an operation (eg downloading). It can also show some system information (like CPU usage). NotifyIconChart provides three types of charts: single bar, two bars, and pie.

Using NotifyIconChart

First, add NotifyIconChart.cs to your project. The NotifyIconChart is placed in System.Windows.Forms namespace, so it won’t make any trouble with namespaces in your solution.

You have to add to your form class a System.Windows.Forms.NotifyIcon object. I would like to inherit NotifyIconChart from the NotifyIcon, but it’s sealed (you can’t inherit from the sealed class). So I decided that NotifyIconChart would have a member pointer to a NotifyIcon object.

In the form constructor or Load event, set the NotifyIconChart’s NotifyIconObject property:

C#
private NotifyIconChart notifyChart = new NotifyIconChart();
NotifyIcon notifyIcon = new NotifyIcon();
notifyChart.NotifyIconObject = notifyIcon;

Now set values. There are two properties that you can use: Value1 and Value2. The first bar, single bar or the pie will be drawn using the first value. The Value2 is used only when drawing the second bar. The values take integers between 0 and 100.

C#
notifyChart.Value1 = 75;
notifyChart.Value2 = 43;

How does it work?

The NotifyIconChart uses a NotifyIcon object, which is responsible for displaying the chart. It gets only System.Drawing.Icon. That mean that NotifyIconChart has to create the icon. The .Net framework uses GDI+ for drawing. The Graphics object can’t draw on an Icon, but it can draw on a Bitmap. The NotifyIconChart draws on a bitmap (size 16x16) bars or a pie. It uses Graphics’ functions FillRectangle and FillPie. At the end it convert the Bitmap to an Icon and pass it to the NotifyIcon object:

C#
// Convert Bitmap to an Icon
Icon icon = Icon.FromHandle(bitmap.GetHicon());
notifyIcon.Icon = icon;

Changing type of the chart

As I said, there are three types of charts provided by NotifyIconChart: single bar, two bars, and pie. To change the type, just change the ChartType value:

C#
notifyChart.ChartType = NotifyIconChart.ChartTypeEnum.singleBar; // Draw one only bar
notifyChart.ChartType = NotifyIconChart.ChartTypeEnum.twoBars; // Draw two bars
notifyChart.ChartType = NotifyIconChart.ChartTypeEnum.pie; // Draw pie chart

Colors

There are four properties that you can use to change colors:

Color1 and Color2 are responsible for the bars’ colors. The pie will be drawn using Color1.

FrameColor is responsible for frames around bars and pie.

BackgroundColor is the color of the background. NotifyIconChart draws rectangular background when it draws bars, and circular when it draws pie.

If you don’t want the NotifyIconChart to draw any of these element’s set it’s value to Color.Transparent.

C#
notifyChart.FrameColor = Color.Black;
notifyChart.Color1 = Color.Yellow;

Conclusion

System Tray isn’t the best place for charts, because it is rather small. But sometimes chart can be very useful there. Thanks to GDI+ functions like anti-aliasing, even a pie chart looks great. If you want any other type of chart in your System Tray, just give me a sign.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Poland Poland
I've been programming since I was really young. Started with HTML and Basic, looked at Pascal and Java, keen on Visual Basic and Visual C++, thinking about .NET and C#.

Comments and Discussions

 
General16 bars one for each vertical row in the icon Pin
ToothRobber210-Jan-07 6:01
ToothRobber210-Jan-07 6:01 
Hello

I added a new Draw routing to your NotifyIconChart.cs. This draw routing displays 16 bars one for each of the rows in a 16x16 bit icon. The draw routine displays the new data (entries just added) on the right side of the icon making it display like a chart. Please be advised that I may have changed some of your variable names.

// A pointer to the current first bar in the icon 1-16
private int m_iPointer = 0;
private int[] m_iValues = new int[] { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };

public int AddValue
{
get
{
return m_iValues[m_iPointer];
}
set
{
// Append the value to the array
m_iValues[m_iPointer] = value;
// Draw the new chart
CreateIcon();
// Update the array pointer, and check that it has not moved past the end
// of the array bounds
m_iPointer++;
if (m_iPointer >= size )
{
m_iPointer = 0;
}
}
}



#if DEBUG
private string sDebugOut = "";

public void DebugPrintArray()
{
sDebugOut = "";
Debug.WriteLine("---------------------");
Debug.WriteLine("Internal Array Values");

// Print the header first
int iCount = 0;
foreach (int iVal in m_iValues)
{
sDebugOut += iCount.ToString();
iCount++;
sDebugOut += "\t";
}
Debug.WriteLine(sDebugOut);
sDebugOut = "";

// Print the Values next
foreach (int iVal in m_iValues)
{
sDebugOut += iVal.ToString();
sDebugOut += "\t";
}
Debug.WriteLine(sDebugOut);
sDebugOut = "";
}
#endif

// Draw one bar for each value
public void DrawSixteenBars()
{
int iPosition = 0;
int[] iCalculatedValue = new int[m_iValues.Length];
int iArrayValue;

// Coordinates into the icon 16x16
int iWidth;
int iHeight;
int iY;
int iX;


#if DEBUG
DebugPrintArray();
#endif
// Draw background
DrawBG(BGType.rect);

// Set GDI+ objects
Pen pPen = new Pen(color1, 1);
SolidBrush bBrush = new SolidBrush(color1);

// Iterate through the int Array calculating the values corrected to fit in a 16x16 box (icon)
// the height maximum is 16 bits 1-100 fit into 0-16 bits heigh
for (int iCount = 0; iCount < m_iValues.Length; iCount++)
{
// The maximum value is a value of 16 bits
iArrayValue = m_iValues[iCount];
iCalculatedValue[iCount] = (size * iArrayValue) / 100;
}

#if DEBUG
DebugPrintArray();
Debug.WriteLine("iPointer Position " + m_iPointer.ToString());
sDebugOut = "iPosition" + " " + "iX" + " " + "iY" + " " + "iWidth" + " " + "iHeight";
Debug.WriteLine(sDebugOut);
#endif

// This is the desplay loop for the Icon 16x16 box, the last entry added to the list of
// values is stored in iPosition this value will be displayed in the 16th row or last line to
// the far right of the icon (iPosition == 16th row in the icon)
// Example m_iPosition = 4 16
// = 3 15
// = 2 14
// = 1 13
// = 0 12
// = 15 11
// = 14 10
// = 13 9
// = 12 8
// = 11 7
// = 10 6
// = 9 5
// = 8 4
// = 7 3
// = 6 2
// = 5 1

// Save a working copy of the graph start position
iPosition = m_iPointer;
for (int iCount = 16; iCount >= 0; iCount--)
{
// What direction is X?
iX = iCount;
//??
iY = size - iCalculatedValue[iPosition]; // 0; // size - width;
// The width of the Rectangle is 1 or a line
iWidth = 1; // 16;
//??
iHeight = iCalculatedValue[iPosition]; // size - width;
#if DEBUG
sDebugOut = iPosition.ToString() + " -->\t" + iX.ToString() + "\t" + iY.ToString() + "\t" + iWidth.ToString() + "\t" + iHeight.ToString();
Debug.WriteLine(sDebugOut);
#endif

// Brush, X, Y, Width, Height
g.FillRectangle(bBrush, iX, iY, iWidth, iHeight);
g.DrawRectangle(pPen, iX, iY, iWidth, iHeight);

// decrement the position counter
iPosition--;
if (iPosition < 0)
{
// reposition at the top of the array counting down, we have looped
iPosition = iCalculatedValue.Length - 1;
}
}
// Create and display icon
ShowIcon();

}


private void CreateIcon()
{
// Draw different charts
if (chartType == ChartTypeEnum.singleBar)
{
DrawBars(value1);
}
else if (chartType == ChartTypeEnum.twoBars)
{
DrawBars(value1, value2);
}
else if (chartType == ChartTypeEnum.pie)
{
DrawPie(value1);
}
else if (chartType == ChartTypeEnum.sixteenBars)
{
DrawSixteenBars();
}

}

At the same time I created a test application that allowed me to test your code more effectively if you would like the code drop me a note and I will send it to you.

Robert




GeneralnotifyIcon.Visible = true; Pin
ToothRobber9-Jan-07 4:14
professionalToothRobber9-Jan-07 4:14 
GeneralTidying up Pin
Drew Noakes7-Apr-05 6:18
Drew Noakes7-Apr-05 6:18 
GeneralRe: Tidying up Pin
dzCepheus4-Sep-05 11:48
dzCepheus4-Sep-05 11:48 
GeneralNice Pin
ngna19-Sep-04 20:35
ngna19-Sep-04 20:35 
GeneralRe: Nice Pin
Maciej Pirog1-Oct-04 7:51
Maciej Pirog1-Oct-04 7:51 
GeneralCopy cursor into Bitmap - C# Pin
jayakarthikeyan17-Jun-04 1:45
jayakarthikeyan17-Jun-04 1:45 
GeneralCopy cursor into Bitmap Pin
jayakarthikeyan17-Jun-04 1:40
jayakarthikeyan17-Jun-04 1:40 
GeneralThis is excellent! Pin
Cavaradossi21-Aug-03 0:44
Cavaradossi21-Aug-03 0:44 
GeneralRe: This is excellent! Pin
Maciej Pirog21-Aug-03 2:36
Maciej Pirog21-Aug-03 2:36 
GeneralAlles klar Pin
lukasz stypka4-Mar-03 2:16
susslukasz stypka4-Mar-03 2:16 
GeneralUse composition to create NotifyIcon. Pin
Peter Rilling25-Jan-03 4:06
Peter Rilling25-Jan-03 4:06 
GeneralRe: Use composition to create NotifyIcon. Pin
Maciej Pirog1-Feb-03 23:37
Maciej Pirog1-Feb-03 23:37 
GeneralScrolling Chart like DuMeter Pin
Anonymous9-Nov-02 10:13
Anonymous9-Nov-02 10:13 
GeneralGetHicon - A general error occurred in GDI+ Pin
Ingram Leedy18-Oct-02 21:03
Ingram Leedy18-Oct-02 21:03 
GeneralRe: GetHicon - A general error occurred in GDI+ Pin
Maciej Pirog19-Oct-02 5:42
Maciej Pirog19-Oct-02 5:42 
GeneralRe: GetHicon - A general error occurred in GDI+ Pin
NewtonTroy3-Nov-03 9:08
NewtonTroy3-Nov-03 9:08 
GeneralRe: GetHicon - A general error occurred in GDI+ Pin
mrblueguy11-Nov-03 0:14
mrblueguy11-Nov-03 0:14 
GeneralRe: GetHicon - A general error occurred in GDI+ Pin
paragvt27-Jun-05 13:01
paragvt27-Jun-05 13:01 
GeneralRe: GetHicon - A general error occurred in GDI+ Pin
orumcektr2-Aug-06 4:26
orumcektr2-Aug-06 4:26 
GeneralNice! Pin
Tim Hodgson3-Sep-02 3:55
Tim Hodgson3-Sep-02 3:55 
GeneralRe: Nice! Pin
Maciej Pirog3-Sep-02 7:26
Maciej Pirog3-Sep-02 7:26 
Generalcze&amp;#347;&amp;#263; Pin
ARTUR PIRÓG18-Oct-03 2:12
sussARTUR PIRÓG18-Oct-03 2:12 

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.