Bar Chart, .NET

Bar Charting

 

Bar Chart Example Source-Code C++ CPP WinForm

[C++ .Net Client-Side WinForm EXE Development ]

Used when creating stand-alone client-side EXEs to be distributed and ran on an end-users machine. This Bar Chart Walk-through is in the C++ language for Visual Studio.NET / VS2008 / VS2010 / VS2012. Many other examples exist on this website. Our Windows one-click online demo also shows source code for MFC C++ that directly interfaces with our DLL.

Prerequisites:

It is recommended that the namespace: Gigasoft.ProEssentials.Enums be included at the top of your source code files utilizing ProEssentials. In C++, use the using keyword. For example:

using namespace Gigasoft::ProEssentials::Enums;

The WinForm interfaces support adapting to changes in the parent form's font and background color. They are designed so that the grid number text size matches that of the other standard controls such as TextBox, Radio Button, and Labels. As long as you don't explicitly change the font and background color, you will be able to change the form's font size and backcolor and all controls on the form will adapt to match. Note that the default form text size of 8 points is fairly small. You may want to increase it to 9 or 10 points depending on your needs. This feature results in a clean looking user interface where the graphing control appears to be a true sibling of the other standard controls.

Our .NET interfaces currently have limited design time functionality. You will have to write a little code (simple, see below) to develop your graphing solutions. In the end, you'll prefer our .NET (property, method, event) interface. 99% of your code will set simple properties.

Bar Chart Walk-Through:

1) Start Visual Studio.NET and create a new project targeting a [Windows Forms Application (.NET)] using C++ as your language. Provide the project name [HelloWorld].  .

2) Under the Project menu, select "Project Properties". From the Build tab / Compile tab, select the "Advanced Compile Options..." button. Change the "Target CPU" Platform Target setting to x86. This is necessary as the following ProEssentials assembly links to a native 32 bit DLL. This setting will allow the resulting exe to run on both 32 and 64 bit systems and provide the easiest deployment. For native 64 bit, see our ReadMe.txt files in the ProEssentials7/DotNetAnyCpu or ProEssentials7/x64/DotNet64 directories where ProEssentials is installed.

Customize Toolbox... Dialog Adding ProEssentials to Visual Studio.NET...

3) Installing WinForm interfaces into Visual Studio.NET

  • Under the Tools menu, select [Choose Toolbox Items...],
  • If not selected, left click the [.NET Framework Components] tab,
  • Left click the [Browse...] button and find the file "Gigasoft.ProEssentials.dll" found in the DotNet20 subdirectory where you installed ProEssentials. By default, this should be located at "C:\ProEssentials7\DotNet20\", (Note Dll supports Framework 2 and beyond)
  • Select the file "Gigasoft.ProEssentials.dll" and close the [Open File] dialog,
  • The [Choose Toolbox Items] dialog should now show 5 highlighted controls: Pe3do, Pego, Pepco, Pepso, and Pesgo.
  • Close the dialog and the 5 new ProEssentials components will be at the bottom of the toolbox. The Pego control will look like a small bar chart.

 

Form1.h [Design]... Adding ProEssentials to a Form...
Bar Chart to be built in Visual Studio.

4) Double click the [Pego] tool within the toolbox. This places an instance of the Pego Bar Chart component within "Form1.h". Left click bottom-right corner of control and drag down-right to fill up client area of Form1. The adjacent image shows what you see.

This represents the default state of a ProEssentials Graph. The default state has one subset with four data points. In the course of constructing your own graphs, you'll set the properties PeData.Subsets and PeData.Points which define the quantity of data your graph will hold. You'll then pass data via the PeData.Y[subset, point] two dimensional property array. The following section shows example code of passing data.

ProEssentials uses the terms Subsets and Points but you can think of these as Rows and Columns. Passing data is as simple as filling each Subset with Points worth of data.

Adjusting design time settings...
Start the Bar Chart!

5) ProEssentials currently has limited point-and-click programmability so you'll have to write a tiny bit a code. Note, when setting color and font size attributes, we recommend setting the parent Form's versions as these properties as ProEssentials will use the parent form's settings to help facilitate a uniform look among sibling controls.

If new to Visual Basic or visual programming, the (Name) property is probably the most fundamental property as its name is reflected in all code. Example:   Pego1->PeData->Subsets = 1; is a line of code, and it shows how the (Name) property (Pego1) starts the line.

Form1.h [Code]...

6) Double click Form1's Title/Caption Bar to open the code view for "Form1.h" with default System::Void Form1_Load event initialized.

The cursor will be within the Form1_Load code section, enter the following code into this section.

You can copy and paste if you must, but hand-typing at least some of this code will really help familiarize yourself with the Gigasoft.ProEssentials namespace.  

Note: adding the following using declaration at the top of the namespace HelloWorld implementation will shorten enumeration syntax and is required for this example code.

using namespace Gigasoft::ProEssentials::Enums;

Note: Intellisense within C++ may not provide much help.   This makes WinForm/C++ development the most tedious compared to VB and C#.   For example, after typing...   [pego1->PeFont->FontSize]you will need help determining the possible options.   You may want to reference this help file to learn that the FontSize property is of type Gigasoft.ProEssentials.Enums.FontSize.   So typing [= Fontsize::] will show available options for this property (assuming you've added the above using declaration).

// Creating a Bar Chart //
pego1->PeString->MainTitle = "Hello .NET";
pego1->PeString->SubTitle = "";
pego1->PeData->Subsets = 1;
pego1->PeData->Points = 6;
pego1->PeData->Y[0,0] = 10.0F;
pego1->PeData->Y[0, 1] = 30.0F;
pego1->PeData->Y[0, 2] = 20.0F;
pego1->PeData->Y[0, 3] = 40.0F;
pego1->PeData->Y[0, 4] = 30.0;
pego1->PeData->Y[0, 5] = 50.0;
pego1->PeString->PointLabels[0] = "Jan";
pego1->PeString->PointLabels[1] = "Feb";
pego1->PeString->PointLabels[2] = "Mar";
pego1->PeString->PointLabels[3] = "Apr";
pego1->PeString->PointLabels[4] = "May";
pego1->PeString->PointLabels[5] = "June";
pego1->PeString->SubsetLabels[0] = "Framework";
pego1->PeString->YAxisLabel = "Microsoft";
pego1->PeColor->SubsetColors[0] = System::Drawing::Color::Red;
pego1->PeColor->BitmapGradientMode = true;
pego1->PeColor->QuickStyle = Gigasoft::ProEssentials::Enums::QuickStyle::LightInset;
pego1->PeTable->Show = GraphPlusTable::Both;
pego1->PeData->Precision = DataPrecision::NoDecimals;
pego1->PeFont->Label->Bold = true;
pego1->PePlot->Method = GraphPlottingMethod::Bar;
pego1->PePlot->Option->GradientBars = 8;
pego1->PeFont->FontSize = FontSize::Large;
pego1->PeUserInterface->HotSpot->Data = true;
pego1->PeFunction->ReinitializeResetImage();

pego1->Refresh(); // call standard .NET Refresh method to force paint

 

Form1.h [Design]... Adding a DataHotSpot event...
Bar Chart property window.

7) The code above enabled the DataHotSpot event. This allows users to click the bars within the bar chart. So we should place some appropriate code in the DataHotSpot event.

Left click the pego control within Form1 to give it the focus.

From the main menu select [View] and [Properties Window]

Within the [Properties Window], click the event icon.

Within the available events, double-click PeDataHotSpot

This opens the code view of "Form1.h" with cursor within the pego1_PeDataHotSpot event handler.

Add the following code to the pego1_PeDataHotSpot event.

// Event code when a user clicks the bar chart data //
System::String ^ps;
ps = "Point ";
ps += e->PointIndex.ToString();
ps += " has a value of ";
ps += pego1->PeData->Y[0, e->PointIndex].ToString();
System::Windows::Forms::MessageBox::Show(ps);

8) Save and run the project. Your project will show an image as follows. Move the mouse over a bar chart and click to trigger the DataHotSpot event.

Run the project... Success!!!

Bar Chart within your charting software.  6 Red Bars, Jan - June.

This completes this simple Bar Chart walkthrough.

Please read the remaining sections within Chapter 2 and review the demo code and documentation that's installed with the eval/product.

Once installed, the demo program can be accessed via shortcut...

Start / All Programs / ProEssentials v7 / PEDemo

Note that our main demo is replicated in VC MFC, VB.NET, C#.NET,  and VB6 projects all accessible from the start menu.   These are great for modifying an existing demo to test potential modifications before implementing within your applications.

 


Online developer reference

Complete online technical reference to the ProEssentials product. Chapter 2's .NET Reference is the best mechanism to navigate the large quantity of properties and features.  Walk-Throughs of .NET charting in VB.NET, C#.NET, ASP, VC, VB6, and Delphi get you started quickly.

learn more about creating Bar Charts

Online interactive demo

Bar Charts, Financial, Engineering, Scientific, and Business examples give you an instant taste of ProEssentials' power.

Bar Charts and much more

Letter from the President

CONGRATULATIONS! Reading this page means you're likely a product manager, product owner, or should be one.

Bar Charts are just the start!