GDI+ Examples: Column Chart

Column Chart



A chart is a technique of representing numeric values using colored shapes. The shape(s) can be geometric or not. To draw such a chart, you can use your knowledge of GDI+ techniques. In this exercise, we use the Graphics::DrawRectangle() method to draw a series of rectangles that represent a column chart.


Practical LearningPractical Learning: Creating the Chart

  1. Start a new Windows Forms Application named WeeklySales
  2. Set the form's Icon to Drive:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Graphics\icons\Office\GRAPH07.ICO
  3. Design the form as follows:
    Control Name Text Other Properties
    Label   Monday  
    Label Label   Tuesday  
    Label Label   Wednesday  
    Label Label   Thursday  
    Label Label   Friday  
    TextBox TextBox txtMonday 12000 TextAlign: Right
    TextBox TextBox txtTuesday 11000 TextAlign: Right
    TextBox TextBox txtWednesday 8500 TextAlign: Right
    TextBox TextBox txtThursday 16800 TextAlign: Right
    TextBox TextBox txtFriday 17500 TextAlign: Right
    Button Button Generate btnGenerate  
  4. Double-click an unoccupied area on the form and implement its Load event as follows:
    #pragma once
    namespace WeeklySales1
    	using namespace System;
    	using namespace System::ComponentModel;
    	using namespace System::Collections;
    	using namespace System::Windows::Forms;
    	using namespace System::Data;
    	using namespace System::Drawing;
    	/// <summary> 
    	/// Summary for Form1
    	/// WARNING: If you change the name of this class, you will need to change the 
    	///          'Resource File Name' property for the managed resource compiler tool 
    	///          associated with all .resx files this class depends on.  Otherwise,
    	///          the designers will not be able to interact properly with localized
    	///          resources associated with this form.
    	/// </summary>
    	public __gc class Form1 : public System::Windows::Forms::Form
    		void Dispose(Boolean disposing)
    			if (disposing && components)
    	private: System::Windows::Forms::Button *  btnGenerate;
    	private: System::Windows::Forms::TextBox *  txtFriday;
    	private: System::Windows::Forms::Label *  label5;
    	private: System::Windows::Forms::TextBox *  txtThursday;
    	private: System::Windows::Forms::Label *  label4;
    	private: System::Windows::Forms::TextBox *  txtWednesday;
    	private: System::Windows::Forms::Label *  label3;
    	private: System::Windows::Forms::TextBox *  txtTuesday;
    	private: System::Windows::Forms::Label *  label2;
    	private: System::Windows::Forms::TextBox *  txtMonday;
    	private: System::Windows::Forms::Label *  label1;
    		/// <summary>
    		/// Required designer variable.
    		/// </summary>
    		System::ComponentModel::Container * components;
    		Graphics *graphDrawingArea;
    		Bitmap   *bmpDrawingArea;
    		/// <summary>
    		/// Required method for Designer support - do not modify
    		/// the contents of this method with the code editor.
    		/// </summary>
    		void InitializeComponent(void)
    			. . . No Change
    	private: System::Void Form1_Load(System::Object *  sender, System::EventArgs *  e)
    			 bmpDrawingArea   = new Bitmap(Width, Height);
    			 graphDrawingArea = Graphics::FromImage(bmpDrawingArea);
  5. Return to the form and click an empty area on it. In the Properties window, click the Events button Events
  6. Double-click the Paint field and implement its event as follows:
    private: System::Void Form1_Paint(System::Object *  sender, System::Windows::Forms::PaintEventArgs *  e)
    			 e->Graphics->DrawImage(bmpDrawingArea, 0, 0);
  7. Double-click the Generate button and implement its Click event as follows:
    private: System::Void btnGenerate_Click(System::Object *  sender, System::EventArgs *  e)
    	 int monday = this->txtMonday->Text->ToInt32(0) / 100;
    	 int tuesday = this->txtTuesday->Text->ToInt32(0) / 100;
    	 int wednesday = this->txtWednesday->Text->ToInt32(0) / 100;
    	 int thursday = this->txtThursday->Text->ToInt32(0) / 100;
    	 int friday = this->txtFriday->Text->ToInt32(0) / 100;
    	 graphDrawingArea->FillRectangle(new SolidBrush(Color::Red),       this->txtMonday->Left+5,    280-monday,    40, monday);
    	 graphDrawingArea->DrawRectangle(new Pen(Color::Black),            this->txtMonday->Left+5,    280-monday,    40, monday);
    	 graphDrawingArea->FillRectangle(new SolidBrush(Color::Blue),      this->txtTuesday->Left+5,   280-tuesday,   40, tuesday);
    	 graphDrawingArea->DrawRectangle(new Pen(Color::Black),            this->txtTuesday->Left+5,   280-tuesday,   40, tuesday);
    	 graphDrawingArea->FillRectangle(new SolidBrush(Color::Fuchsia),   this->txtWednesday->Left+5, 280-wednesday, 40, wednesday);
    	 graphDrawingArea->DrawRectangle(new Pen(Color::Black),            this->txtWednesday->Left+5, 280-wednesday, 40, wednesday);
    	 graphDrawingArea->FillRectangle(new SolidBrush(Color::Brown),     this->txtThursday->Left+5,  280-thursday,  40, thursday);
    	 graphDrawingArea->DrawRectangle(new Pen(Color::Black),            this->txtThursday->Left+5,  280-thursday,  40, thursday);
    	 graphDrawingArea->FillRectangle(new SolidBrush(Color::Turquoise), this->txtFriday->Left+5,    280-friday,    40, friday);
    	 graphDrawingArea->DrawRectangle(new Pen(Color::Black),            this->txtFriday->Left+5,    280-friday,    40, friday);
    	 graphDrawingArea->DrawRectangle(new Pen(Color::Black), 10, 280, Width - 30, 1);
  8. Execute the application and test the form
     Column Chart
  9. After using it, close the form

Home Copyright © 2004-2010 FunctionX, Inc.