This page includes C# instruction for Visual Studio VS2003 and earlier, click here for VS2005 / VS2008 / VS2010 / VS2012.
Asp.Net Chart WebForm is used to serve dynamically
generated images and ActiveX binary states.
The simplest implementation is using a html IMG tag src="MyDynamicImageBits.asxp" and creating the dedicated MyDynamicImageBits.aspx page to send the image data. For our chart on this WebForm, set RenderingType=BinaryImageStream, and RenderedImageType=SVG or PNG. Your server will produce our default chart. See step 11 below on how this aspx page should look, it's important there's no ascii outside the .net tags.
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 sizes.
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. Your webpage's meta tags should target IE8 to force IE's compatibility view mode.
ASP.NET development is very similar to standard ASP development. Generally, you will implement server side behavior in pairs of files much like standard ASP development. One file, either .HTM, .ASP 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 binary content.
We often get asked why two webform pages are needed. The answer is that the first webform renders as viewable ascii html and the second webform renders as non-viewable binary data streamed directly to the browser. 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 ProEssentials implementation. Note the first form can include a ProEssentials object, or if a simple image is needed, can optionally contain an IMG tag pointing the second form with the ProEssentials object's RenderingType set to BinaryImageStream. Similarly, the first form can optionally contain the simple Class ID to our ActiveX and the second form would then contain a ProEssentials object with its RenderingType set to BinaryActiveXStream.
See a similar pre-built example within the included ProEssentials7/PE7WebDemo 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.
- BinaryActiveXStream, render as binary
data representing an initial ActiveX binary state
upon the page loading.
- BinaryDataStream, render as ActiveX binary
state for use with the LoadFromUrl ActiveX method
via client-side script. This allows updating the
ActiveX without refreshing the page.
When RenderingType 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.
When RenderingType 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 map support.
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
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
- Data2, its meaning is dependent upon
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 as VBScript.
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:
Our ASP.NET charting 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.
following information demonstrates how to create your
first ASP.NET / ProEssentials implementation using the
C Sharp language. It discusses using ASP.NET to serve
up a dynamically generated PNG image. Other examples
are provided within the
Also refer to the "ReadMe.htm", "AspReadMe.htm",
and "AspNetReadMe.htm" files installed onto
your system with the eval/product (accessible via Start
1) Start Visual Studio.NET and create a new project
targeting an ASP.NET Web Application using C# as our
language. Accept the default name of [WebApplication1].
2) When the new project opens, you will be presented
the design view of "Webform1.aspx".
3) Installing WebForm interfaces into Visual Studio.NET
VS2003 and Earlier Instructions
- Double check that the [Web Forms] tab on the tool box is active (Pointer, Label, TextBox... should be visible),
- Right click anywhere in the toolbox and select [Customize Toolbox... or Add/Remove Items...],
- Left click the [.NET Framework Components] tab,
- Left click the [Browse...] button and find the file "Gigasoft.ProEssentialsWeb.dll" found in the DotNet20 subdirectory where you installed ProEssentials. By default, this should be located at "C:\ProEssentials7\DotNet20\",
- Select the file "Gigasoft.ProEssentialsWeb.dll" and close the [Open File] dialog,
- The [Customize Toolbox] dialog should now show 6 highlighted controls: Pe3doWeb, PegoWeb, PepcoWeb, PepsoWeb, PesgoWeb, and PEBaseWeb.
- Deselect the control PEBaseWeb as it should not be used for development,
- Close the [Customize Toolbox] dialog and the 5 new ProEssentials components will be at the bottom of the toolbox.
4) Double click the [PegoWeb]
tool within the toolbox. This places an instance
of the PegoWeb component within "Webform1.aspx".
The adjacent image shows what you see.
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 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,
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.
5) Double check that the RenderingType property within the Properties window shows the
default state of ImageMap.
6) Within the Properties window, change the ImageUrl
property to "Webform2.aspx"
7) Within Visual Studio's main menu, select [Project]
and then [Add
Webform...] Accept the default name of "Webform2.aspx"
and left click the [Open] button.