Tutorial: VS2008 C# Pie Chart

[Jordan]

C# CREATE A PIE CHART FROM NUMERICAL DATA

1. INTRODUCTION

In this tutorial we will create a form in which the user can enter numerical data, integer or real numbers. When a button is pressed the user should see a pie-chart created by the numerical values entered. We will make use of the graphics capabilities the .Net provides to draw lines, shapes and text. For example, the pen class is used to create lines or curves while the brush class is useful for filling the internal region of shapes with colors. A variation of the SolidBrush class is the one named “LinearGradientBrush” which is a brush with a linear gradient between two colors and it can give a very aesthetic appearance to your shapes.

All classes for our purpose derive from the System.Drawing.Drawing2D namespace so make sure you have added it to your project. To create the pie chart we must use a pen, but for the creation of the individual pie shapes we need a rectangle. We don’t actually draw a rectangle; instead we only define it as a structure. This is necessary because the size of the pie-chart is depended on an imaginary rectangle just outside of it. Finally, we use a SolidBrush object to fill the pie-chart with different colors for each region.


2. GRAPHICAL USER INTERFACE

Start a new project and name it “Pie-Chart”. Create a form just like the one in picture1. Make sure that the size of the form is 300x230. Insert four textboxes and a command button as they are depicted in the picture. When designing programs with integrated graphics on the form you should be careful with the location of the controls and the area in which the drawing will take place.



3. CODE

We need to extract the values of the numbers entered on the textboxes into integers (you can also try float variables). Since the textbox’s text property is a string, we need to convert it to its integer equivalent. This is accomplished with the “Parse ” method. To store each textbox in a separate variable copy this code on the button’s click event:

int i1 = int.Parse(textBox1.Text);
int i2 = int.Parse(textBox2.Text);
int i3 = int.Parse(textBox3.Text);
int i4 = int.Parse(textBox4.Text);

The next thing to do is to calculate the amount of degrees each region of the pie-chart should cover. This is based on the ratio of the specified number to the total. For conversion to Degrees we just multiply it by 360. Enter this code snippet after the previous one:

float total = i1 + i2 + i3 + i4;
float deg1 = (i1/total) * 360 ;
float deg2 = (i2/total) * 360 ;
float deg3 = (i3/total) * 360 ;
float deg4 = (i4/total) * 360 ;

For the design of the pie-chart we first need to create (but not draw!) the rectangle that will form the boundary of the pie-shaped structures. To accomplish this, we need the x and y coordinates of its upper left corner, its width and its height. In order to avoid an overlapping of a textbox with the shape we will create, we set the rectangle’s upper left corner to be just after the right corner (or side) of the textboxes. The width and height is set to 150 pixels. To finish our drawing we need a graphics object that will be used to create the pie-shaped individual elements. For this purpose, we just call the “DrawPie” method entering as parameters the pen that will be used to draw the lines of the pie, the imaginary rectangle, the start angle and the number of angles it will occupy (not the end angle). After the creation of each pie we fill it with the SolidBrush object we created by using the “FillPie” method of the Graphics object.


Definitions of the methods used are:

DrawPie(Pen object used for the lines, imaginary Rectangle, start degree, number of degrees to occupy)

FillPie(Brush object to fill the shape, imaginary Rectangle, start degree, number of degrees to occupy)


The code for this function is given below:

Pen p = new Pen(Color.Black,2);

Graphics g = this.CreateGraphics();

Rectangle rec = new Rectangle(textBox1.Location.X + textBox1.Size.Width+10,12,150,150);

           
Brush b1 = new SolidBrush(Color.Red);
Brush b2 = new SolidBrush(Color.Blue);
Brush b3 = new SolidBrush(Color.Black);
Brush b4 = new SolidBrush(Color.BlueViolet);

        
g.Clear(Form1.DefaultBackColor);
g.DrawPie(p, rec, 0, deg1);
g.FillPie(b1, rec, 0, deg1);
g.DrawPie(p, rec, deg1,  deg2);
g.FillPie(b2, rec, deg1, deg2);
g.DrawPie(p, rec, deg2 + deg1, deg3);
g.FillPie(b3, rec, deg2 + deg1, deg3);
g.DrawPie(p, rec, deg3 + deg2 + deg1,  deg4);
g.FillPie(b4, rec, deg3 + deg2 + deg1, deg4);

Save your project and do a debug test to see if it functioning correctly. You should get something like the one in picture2.



Questions/Comments?
Post them here or create a new thread in the appropriate category.

[Xav]

This brings us back to the discussion about how important maths is to programming!