This page includes C# instructions for VS2010. Click here of VS2012.
ProEssentials WebForm interfaces may be used to serve dynamically generated images and ActiveX binary states.
ProEssentials' web charting 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 uncompromising 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 binary content.
Why two webform pages? The answer is that 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 ProEssentials implementation.
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.
Possible settings are:
- ImageMap, render as
an image tag followed by an ImageMap tag.
- ActiveX, render as an
ActiveX object tag.
- BinaryImageStream, render as binary data
representing image data.
- BinaryActiveXStream, render as binary
data representing an ActiveX binary state
upon page load.
- BinaryDataStream use with client side EXE or IE LoadFromUrl
to update/append real-time data from the cloud/server to the client side chart.
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.
Also, 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:
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 Start menu).
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".
If you have already installed the ProEssentials WebForm interfaces, skip to step 4.
3)Installing Asp.Net controls into Visual Studio.NET
VS2010 / VS2012 / VS2013 Instructions
- 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.ProEssentialsWeb.dll" found in the DotNetAnyCpu subdirectory where you installed ProEssentials. By default, this should be located at "C:\ProEssentials8\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.
4) Add a new paragraph to the Default. aspx page as shown. Click the PegoWeb tool icon in palette and drag the tool to your new paragraph. The adjacent image shows what you see using VS2010.
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.
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 "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 "Default2.aspx".
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 RenderingType
property to BinaryImageStream.
10) Within Visual Studio's main menu, select [View]
and then [Markup].
11) Remove all HTML content from this page. The resulting Markup / HTML Source content should only be tags...
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 being served to Default.aspx on the client. If there is mistakenly ascii, Default.aspx may show a red x instead of an image as the binary data received from server is not recognized as a bitmap.
12) Within Visual Studio's main menu, select [View]
and then [Code].
13) 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 World";
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, 180, 0);
PegoWeb1.PeColor.SubsetColors = System.Drawing.Color.FromArgb(80, 0, 0, 130);
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;
Once entered, select this code and copy it to clipboard.
14) Within Visual Studio's main menu, select [Window]
and then "Default.aspx"
15) Within Visual Studio's main menu, select [View]
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) Add one additional line of code to the "Default.aspx.cs"
PegoWeb1.PeUserInterface.HotSpot.Data = True;
The Page_Load handler within "Default.aspx.cs" should look similar as below...
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 event handler.
19) Add the following code to the _PeImageMap handler...
e.ToolTip = "Point " + e.Data2.ToString()
+ " with a value of " + PegoWeb1.PeData.Y[e.Data1,
20) Run the project. Your browser will show an image
as follows. Move the mouse over bars to see the image
You'll 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 completes 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 could actually replace Default.aspx's instance of a
ProEssentials asp.net control with a generic html image
For SVG Charting: set RenderedImageType for Default2.aspx from PNG to SVG.
For ActiveX: 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 web charting control. Right click the control to access the user interface. Read the AspReadme for client-side examples and CAB file issues.
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.
See Chapter 2 for
more Asp.Net graphing Info