|Chapter 2: C# Visual Studio ASP.NET Charting
ProEssentials WebForm interfaces
may be used to serve dynamically generated images and ActiveX binary states.
ProEssentials' web strength is in rendering quality and robustness:
Where a chart shape, size, and large annotation property set can automatically
produce a quality image packed with details. Our SVG HTML5 chart rendering
option is also true vector output and great for HTML5 based reporting
where printed output produces razor sharp results via very small file
ActiveX rendering is an option
for those wanting to provide Internet Explorer users with desktop functionality
within a webpage. If ActiveX is targeted, we recommend that you also review
the standard ASP/ActiveX technical information in
Chapter3 and AspReadme. This is mostly for proprietary
websites needing advanced graphics and user interaction within the browser.
Your implementation may also render as png if Internet Explorer is not
the current browser.
You will implement server
side behavior in pairs of files. One file, either .HTML or .ASPX will
contain an image tag or ActiveX object tag with source attributes pointing
to a secondary .ASPX page which will dynamically generate the respective
Why two webform pages? The first webform renders as viewable ascii html and the
second webform renders as non-viewable binary data. This architecture
allows for scalability and efficient processing without the need for passing
large amounts of viewstate information back and forth between the client
and server. The first form usually contains a ProEssentials object with
the RenderingType set to ImageMap or ActiveX. The second form then respectively
has a ProEssentials object with the RenderingType set to BinaryImageStream
or BinaryActiveXStream. The two forms work in unison to provide the complete
See a similar pre-built example within the included ProEssentials8/PE8WebDemo
directory. See example 1-4, with related files within the Walk-Through1,
Walk-Through2, Walk-Through3, and Walk-Through4 folders.
The ProEssentials WebForm
interfaces have a few key properties and one event which will control
server-side specific functionality. These are as follows:
This property controls
how this instance of the control is rendered into HTML.
Possible settings are:
- ImageMap, the control is rendered as an image tag followed by
an ImageMap tag.
- ActiveX, the control is rendered as an ActiveX object tag.
- BinaryImageStream, render as binary data representing image data.
- ActiveXImageStream, render as binary data representing an ActiveX
- BinaryDataStream, use with client side EXE LoadFromUrl method
to update chart from the cloud.
is set to BinaryImageStream, this property controls the format of the
binary image data. Possible settings are SVG, PNG, and JPEG. SVG producing
an HTML5 chart.
is set to ImageMap, this property must point to a URL identifying an .ASPX
page containing a ProEssentials control with its RenderingType property
set to BinaryImageStream.
When RenderingType is set to ActiveX, this property must point to a URL
identifying an .ASPX page containing a ProEssentials control with its
RenderingType property set to BinaryActiveXStream.
When RenderingType is set to ActiveX, this property
may optionally be used to point to a CAB file containing the ActiveXs
and DLL to support automatic installation onto the client system.
there is one Event and one EventArgs which is used to implement image
This event is only used when the RenderingType property
is set to ImageMap.
This event will be triggered (generally multiple occurrences) during the
image generation process when hot spots have been enabled via properties
found within the PeUserInterface.HotSpot namespace.
This object is passed to the PeImageMap event to communicate
parameters with the developer.
Members include these properties:
- HotSpotType, defined as Gigasoft.ProEssentials.Enums.HotSpotType.
- Data1, its meaning is dependent upon HotSpotType.
- Data2, its meaning is dependent upon HotSpotType.
Members also include these write only properties:
- ToolTip, optionally set to assign tool tip text to image map area.
- Href, optionally set to assign a URL to image map area.
- Attributes, optionally set to assign attributes to map area such
It is recommended that the namespace: Gigasoft.ProEssentials.Enums
be included at the top of your source code files utilizing ProEssentials.
In C#.NET, use the usings keyword. For example:
following information demonstrates how to create your first ASP.NET /
ProEssentials implementation using the C# language. It discusses using
ASP.NET to serve up a dynamically generated PNG image. Also refer to the
"ReadMe.htm", "AspNetReadMe.htm", and "AspReadMe.htm"
files installed onto your system with the eval/product (accessible via
1) Start Visual Studio.NET and create a new
WebSite project targeting an ASP.NET Web Application using C# as our language.
Accept the default name of [WebSite1].
2) When the new project opens, you will be
presented the design view of "Default.aspx".
have already installed the ProEssentials WebForm interfaces, skip to step
ProEssentials to Visual Studio.NET...|
Installing WebForm interfaces into Visual Studio.NET
VS2008 / VS2010 / VS2012 / VS2013...
- Under the Tools
menu, select [Choose
If not selected, left click the [.NET Framework Components] tab,
Left click the [Browse...] button and find the file "Gigasoft.ProEssentialsWeb.dll"
found in the DotNetAnyCpu subdirectory where you installed ProEssentials.
By default, this should be located at "c:\ProEssentialsá\DotNetAnyCpu\",
Select the file "Gigasoft.ProEssentialsWeb.dll"
and close the [Open File] dialog,
The [Choose Toolbox Items]
dialog should now show 6 highlighted controls: Pe3doWeb,
PegoWeb, PepcoWeb, PepsoWeb, PesgoWeb, and Pedo.
Close the dialog and the 6 new ProEssentials
components will be at the bottom of the toolbox.
ProEssentials to a Form...|
4) Add a new paragraph to the Default.aspx
page. Click the PegoWeb tool icon in palette and drag the tool to your
new paragraph. The adjacent
image shows what you see.
chart represents the default state of a ProEssentials Graph Object. The
default state has one subset with four data points. In the course of constructing
your own charts, you'll set the properties PeData.Subsets
and PeData.Points which define the quantity of data your chart
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.
design time settings...|
5) Double check that the RenderingType property within the Properties window shows
the default state of ImageMap.
6) Within the Properties window, change the
property to "Default2.aspx".
7) Within Visual Studio's main menu, select
[WebSite] and then [Add
New Item...] and add a new Webform. Accept the default name of
8) Double click the PegoWeb tool within the toolbox and this places
an instance of the PegoWeb component within "Default2.aspx".
9) Within the Properties window, change the
property to BinaryImageStream.
10) Within Visual Studio's main menu, select
[View] and then [Markup].
Remove all HTML content from
this page. The resulting Markup or HTML Source content should only be
NOTE: It is important the entire page looks as above. No ascii
characters can be outside < > tags, not even a space character.
Any ascii would corrupt the binary data. The client is expecting pure binary data from Default2.aspx
which represents an image. If there is mistakenly ascii, Default.aspx
may show a red x instead.
12) Within Visual Studio's main menu, select
and then [Code].
Add the following code to the Page_Load
event handler. Type it in manually to see examples of embedded XML help
and other Intellisense features.
PegoWeb1.PeString.MainTitle = "Hello
PegoWeb1.PeString.SubTitle = "";
PegoWeb1.PeData.Subsets = 2;
PegoWeb1.PeData.Points = 6;
PegoWeb1.PeData.Y[0, 0] = 10; PegoWeb1.PeData.Y[0, 1] = 30;
PegoWeb1.PeData.Y[0, 2] = 20; PegoWeb1.PeData.Y[0, 3] = 40;
PegoWeb1.PeData.Y[0, 4] = 30; PegoWeb1.PeData.Y[0, 5] = 50;
PegoWeb1.PeData.Y[1, 0] = 15; PegoWeb1.PeData.Y[1, 1] = 63;
PegoWeb1.PeData.Y[1, 2] = 74; PegoWeb1.PeData.Y[1, 3] = 54;
PegoWeb1.PeData.Y[1, 4] = 25; PegoWeb1.PeData.Y[1, 5] = 34;
PegoWeb1.PeString.PointLabels = "Jan";
PegoWeb1.PeString.PointLabels = "Feb";
PegoWeb1.PeString.PointLabels = "Mar";
PegoWeb1.PeString.PointLabels = "Apr";
PegoWeb1.PeString.PointLabels = "May";
PegoWeb1.PeString.PointLabels = "June";
PegoWeb1.PeString.SubsetLabels = "For .Net Framework";
PegoWeb1.PeString.SubsetLabels = "or MFC, ActiveX, VCL";
PegoWeb1.PeString.YAxisLabel = "Simple Quality Rendering";
PegoWeb1.PeColor.SubsetColors = System.Drawing.Color.FromArgb(120, 0,
PegoWeb1.PeColor.SubsetColors = System.Drawing.Color.FromArgb(80, 0,
PegoWeb1.PeColor.BitmapGradientMode = true;
PegoWeb1.PeColor.QuickStyle = Gigasoft.ProEssentials.Enums.QuickStyle.LightShadow;
PegoWeb1.PeColor.Desk = System.Drawing.Color.FromArgb(255, 255, 255, 255);
PegoWeb1.PeTable.Show = Gigasoft.ProEssentials.Enums.GraphPlusTable.Both;
PegoWeb1.PeData.Precision = Gigasoft.ProEssentials.Enums.DataPrecision.NoDecimals;
PegoWeb1.PeFont.Label.Bold = true;
PegoWeb1.PePlot.Method = Gigasoft.ProEssentials.Enums.GraphPlottingMethod.Bar;
PegoWeb1.PePlot.Option.GradientBars = 8;
PegoWeb1.PePlot.Option.BarGlassEffect = true;
PegoWeb1.PeLegend.Location = Gigasoft.ProEssentials.Enums.LegendLocation.Left;
PegoWeb1.PePlot.DataShadows = Gigasoft.ProEssentials.Enums.DataShadows.ThreeDimensional;
PegoWeb1.PeFont.FontSize = Gigasoft.ProEssentials.Enums.FontSize.Large;
PegoWeb1.PeConfigure.RenderEngine = Gigasoft.ProEssentials.Enums.RenderEngine.GdiPlus;
PegoWeb1.PeConfigure.AntiAliasGraphics = true;
PegoWeb1.PeConfigure.AntiAliasText = true;
entered, select this code and copy it to clipboard.
14) Within Visual Studio's main menu, select
and then "Default.aspx" the first Webform created
15) Within Visual Studio's main menu, select
and then [Code]
16) Paste the above code into the Page_Load
event handler for "Default.aspx". Thus both "Default.aspx.cs"
and "Default2.aspx.cs" now contain similar Page_Load code.
17) Now, make sure last line is add one additional
line of code to the "Default.aspx.s"
handler should now contain...
18) Within Visual Studio's main menu,
select [Window] and then [Default.aspx]. Left click the PegoWeb
control within the form to give it the focus. Then left click the [Event] icon within
the [Properties] window. Double
click the PeImageMap event which
opens the file "Default.aspx.cs" located at the PegoWeb1_PeImageMap
Add the following code to the _PeImageMap
(e.HotSpotType == Gigasoft.ProEssentials.Enums.HotSpotType.DataPoint)
= "Point " + e.Data2.ToString() + " with a value of "
+ PegoWeb1.PeData.Y[e.Data1, e.Data2].ToString();
Save and run the project. Your browser
will show an image as follows. Move the mouse over bars to see the image
up a PNG...|
notice that nearly identical code was required for "Default.aspx.cs"
and "Default2.aspx.cs" except for the hot spot code which triggers
the PeImageMap event. Anytime
you develop with image maps, you will need to have similar initialization
code for both forms. Also, the control size on both forms must be set
to the same size.
this walkthrough. If you do not wish to support image maps, ignore the
PeUserInterface.HotSpot and the
PeImageMap event handler code.
If not using image maps, you will only need code within "Default2.aspx.cs"
and Default could use a generic html image IMG tag instead of a chart
remove the HotSpot.Data setting from both pages and set RenderedImageType
for Default2.aspx from PNG to SVG.
and working with Internet Explorer, change the RenderingType
setting for "Default.aspx" to ActiveX,
and the RenderingType setting
on "Default2.aspx" to BinaryActiveXStream.
The browser will contain a fully interactive charting control. Right click the control to access the user
interface. Read the AspReadme for client-side examples and CAB file