Home

GDI+ Examples: School Enroment

 

Introduction

A pie chart is a chart that starts from an ellipse or a circle and illustrates the percentages of values. To draw such a chart using GDI+, you can use an ellipse in the background and draw the pies on top. To make it more useful, you should paint a different background for each pie of the chart.

Practical LearningPractical Learning: Drawing an Ellipse

  1. Start a new Windows Forms Application named SchoolEnrolment2
  2. Design the form as follows:
     
    School Enrolment
    Control Name Text
    Label Label   Enrolment / Program ___________________________
    Label Label   Graduates
    Label Label   Undergraduates
    Label Label   Certificates
    TextBox TextBox txtGraduates 0
    TextBox TextBox txtUndergraduates 0
    TextBox TextBox txtCertificates 0
    Button Button btnCreateChart Create Chart
    PictureBox PictureBox pbxChart  
    Label Label   ____Legend____
    Label Label lblGraduates Graduates
    Label Label lblUndergraduates Undergraduates
    Label Label lblCertificates Certificates
    Button Button btnClose Close
  3. To design a bitmap, in the Resource View, right-click SchoolRenrolment2 -> Add -> Resource...
  4. In the Add Resource dialog box, click Bitmap and click New
  5. In the Properties window, make the following changes:
    Filename: graduates.bmp
    ID: IDB_GRADUATES
    Width: 16
    Height: 16
  6. Design the bitmap as follows:
     
  7. In the Resource View, right-click SchoolRenrolment2 -> Add -> Resource...
  8. In the Add Resource dialog box, double-click Bitmap
  9. In the Resource View, click IDB_BITMAP
  10. In the Properties window, change the following characteristics:
    Filename: undergraduates.bmp
    ID: IDB_UNDERGRADUATES
    Width: 16
    Height: 16
  11. Design the bitmap as follows:
     
  12. In the Resource View, right-click SchoolRenrolment2 -> Add -> Resource...
  13. In the Add Resource dialog box, double-click Bitmap
  14. In the Properties window, make the following changes:
    Filename: certificates.bmp
    ID: IDB_CERTIFICATES
    Width: 16
    Height: 16
  15. Design the bitmap as follows:
     
  16. Display the form
  17. Right-click the form and click View Code
  18. Declare three variables as follows:
     
    private:
    		/// <summary>
    		/// Required designer variable.
    		/// </summary>
    		System::ComponentModel::Container ^components;
    		float Graduates;
    		float Undergraduates;
    		float Certificates;
  19. Return to the form and click an unoccupied area of its body. In the Properties window, click the Events button Events
  20. Double-click the Paint field and implement the event as follows:
     
    System::Void Form1_Paint(System::Object^  sender,
    			 System::Windows::Forms::PaintEventArgs^  e)
    {
        Bitmap ^ bmpGraduates = gcnew Bitmap(L"graduates.bmp");
        TextureBrush ^ brushGraduates = gcnew TextureBrush(bmpGraduates);
        Bitmap ^ bmpUndergraduates = gcnew Bitmap(L"undergraduates.bmp");
        TextureBrush ^ brushUndergraduates = gcnew TextureBrush(bmpUndergraduates);
        Bitmap ^ bmpCertificates = gcnew Bitmap(L"certificates.bmp");
        TextureBrush ^ brushCertificates = gcnew TextureBrush(bmpCertificates);
    
        pbxChart->CreateGraphics()->FillPie(brushGraduates,
    			                  0.0F, 
    					  0.0F,
    					  260.0F,
    					  200.0F, 0.0F, Graduates);
    
        pbxChart->CreateGraphics()->FillPie(brushUndergraduates,
    			                  0.0F,
    					  0.0F,
    					  260.0F,
    				200.0F, Graduates, Undergraduates);
    
        pbxChart->CreateGraphics()->FillPie(brushCertificates,
    			                  0.0F, 
    					  0.0F,
    					  260.0F,
    				  200.0F, Graduates + Undergraduates,
    					  Certificates);
    
        e->Graphics->FillRectangle(brushGraduates,
    		                  Rectangle(lblGraduates->Left,
    			            lblGraduates->Top + 18,
    				btnClose->Width,
    				20));
    
        e->Graphics->DrawRectangle(gcnew Pen(Color::Black),
    		                  Rectangle(lblGraduates->Left-1,
    			            lblGraduates->Top + 18,
    				btnClose->Width,
    				20));
    
        e->Graphics->FillRectangle(brushUndergraduates,
    		                  Rectangle(btnClose->Left,
    			            lblUndergraduates->Top + 18,
    				btnClose->Width,
    				20));
    				 
        e->Graphics->DrawRectangle(gcnew Pen(Color::Black),
    		                  Rectangle(btnClose->Left-1,
    			            lblUndergraduates->Top + 18,
    				btnClose->Width+1,
    				20));
    				 
        e->Graphics->FillRectangle(brushCertificates,
    		                  Rectangle(btnClose->Left,
    			            lblCertificates->Top + 18,
    				btnClose->Width,
    					20));
    
        e->Graphics->DrawRectangle(gcnew Pen(Color::Black),
    		                  Rectangle(btnClose->Left-1,
    			            lblCertificates->Top + 18,
    				btnClose->Width+1,
    					20));
        
    	
        pbxChart->CreateGraphics()->DrawPie(gcnew Pen(Color::Blue),
    			                  0.0F, 
    					  0.0F,
    					  260.0F,
    					  200.0F, 0.0F, Graduates);
        pbxChart->CreateGraphics()->DrawPie(gcnew Pen(Color::Red),
    			                  0.0F,
    					  0.0F,
    					  260.0F,
    				200.0F, Graduates, Undergraduates);
        pbxChart->CreateGraphics()->DrawPie(gcnew Pen(Color::Green),
    			                  0.0F, 
    					  0.0F,
    					  260.0F,
    				  200.0F, Graduates + Undergraduates,
    					  Certificates);
    
        pbxChart->CreateGraphics()->DrawEllipse(gcnew Pen(Color::Red, 2),
    			                  Rectangle(0,
    					            0,
    						    260,
    						    200));
    }
  21. Return to the form and click the picture box
  22. In the Events section of the Properties window, double-click Paint and implement its event as follows:
     
    System::Void pbxChart_Paint(System::Object^  sender, 
    			System::Windows::Forms::PaintEventArgs^  e)
    {
        Invalidate();
    }
  23. Return to the form and double-click the Create Chart button
  24. Implement the event as follows:
     
    System::Void btnCreateChart_Click(System::Object^  sender, 
    				  System::EventArgs^  e)
    {
        float grad, under, cert, total;
        float percentGraduates,
    	  percentUndergraduates,
    	  percentCertificates;
    
        grad = float::Parse(txtGraduates->Text);
        under = float::Parse(txtUndergraduates->Text);
        cert = float::Parse(txtCertificates->Text);
    
        total = grad + under + cert;
        percentGraduates      = (grad  / total) * 100;
        percentUndergraduates = (under / total) * 100;
        percentCertificates   = (cert  / total) * 100;
    
        Graduates      = (360 * percentGraduates)      / 100;
        Undergraduates = (360 * percentUndergraduates) / 100;
        Certificates   = (360 * percentCertificates)   / 100;
    
        pbxChart->Invalidate();
    }
  25. Return to the form and double-click the Close button
  26. Implement its event as follows:
     
    System::Void btnClose_Click(System::Object^  sender, 
    			    System::EventArgs^  e)
    {
        Close();
    }
  27. Execute the application and test the form
     
     School Enrolment
  28. After using it, close the form
 

Home Copyright © 2007-2012 FunctionX