| Chapter 2: VB ASP.NET Charting Walk-Through VS2022-2015 |
|
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.
ProEssentials web functionality is limited to 3 use cases...
1. static images with optional hotspots.
2. client side EXEs requesting chart binary states from your server. Passing data and or completely initialized charts.
3. appending partial amounts of data via your server. Creating a real-time client side chart that appends data from the web.
One will implement server side behavior in pairs of files. One file, either .HTML or .ASPX will contain an image tag with source attributes pointing to a secondary .ASPX page which will dynamically generate the respective binary content. Why two webform pages? The first webform renders as viewable ascii html and the second webform renders as non-viewable binary data. The first form usually contains a ProEssentials object with the RenderingType set to ImageMap. The second form then respectively has a ProEssentials object with the RenderingType set to BinaryImageStream. The two forms work in unison to provide the complete ProEssentials implementation.
See a similar pre-built example within the included ProEssentials10/PE10WebDemo 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:
|
RenderingType
|
This property controls how this instance of the control is rendered.
Possible settings are:
- ImageMap, the control is rendered as an image tag followed by an ImageMap tag.
- BinaryImageStream, render as binary data representing image data.
- BinaryDataStream, used with client side EXE or IE call to LoadFromUrl method to update chart.
|
|
RenderedImageType
|
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.
|
|
ImageUrl
|
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.
|
Also, there is one Event and one EventArgs which is used to implement image map support.
|
PeImageMap
|
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.
|
|
ImageMapEventArgs
|
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 as VBScript.
|
It is recommended that the namespace: Gigasoft.ProEssentials.Enums be included at the top of your source code files utilizing ProEssentials. In VB.NET, use the Imports keyword. For example:
Imports
Gigasoft.ProEssentials.Enums
Walk-Through:
1) Start Visual Studio.NET and create a new WebSite project targeting an ASP.NET Web Application using VB 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.
| Customize Toolbox... Dialog |
Adding ProEssentials to Visual Studio.NET... |
|
3) Installing WebForm 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.ProEssentialsWeb.dll" found in the DotNet48\x64 folder where you installed ProEssentials. By default, this should be located at "c:\ProEssentials10\DotNet48\x64",
-
Select the file "Gigasoft.ProEssentialsWeb.dll" and close the [Open File] dialog,
-
The [Choose Toolbox Items] dialog should now show highlighted controls: Pe3doWeb, PegoWeb, PepcoWeb, PepsoWeb, PesgoWeb
, and Pedo data control.
-
Close the dialog and the 6 new ProEssentials components will be at the bottom of the toolbox.
|
| Default.aspx... |
Adding ProEssentials to a Form... |
 |
4) Add a new <p> paragraph as shown. Click the PegoWeb control within the tool palette and drag to your new paragraph. The adjacent image to left shows what your screen should resemble.
This represents the default state of a ProEssentials Graph. The default state has one subset with four data points. In the course of initializing 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.
|
| |
Adjusting design time settings... |
 |
5) Check that the RenderingType property within the Properties window shows the default setting 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".
|
|
| 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 or 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. The client is expecting pure binary data from Default2.aspx which represents an image. If there is mistakenly some 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) = 75 : PegoWeb1.PeData.Y(1, 3) = 54
PegoWeb1.PeData.Y(1, 4) = 25 : PegoWeb1.PeData.Y(1, 5) = 43
PegoWeb1.PeString.PointLabels(0) = "Jan"
PegoWeb1.PeString.PointLabels(1) = "Feb"
PegoWeb1.PeString.PointLabels(2) = "Mar"
PegoWeb1.PeString.PointLabels(3) = "Apr"
PegoWeb1.PeString.PointLabels(4) = "May"
PegoWeb1.PeString.PointLabels(5) = "June"
PegoWeb1.PeString.SubsetLabels(0) = "For .Net Framework"
PegoWeb1.PeString.SubsetLabels(1) = "or MFC, ActiveX, VCL"
PegoWeb1.PeString.YAxisLabel = "Simple Quality Rendering"
PegoWeb1.PeColor.SubsetColors(0) = System.Drawing.Color.FromArgb(120, 0, 180, 0)
PegoWeb1.PeColor.SubsetColors(1) = 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, 122, 192, 218)
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.DataShadows = Gigasoft.ProEssentials.Enums.DataShadows.ThreeDimensional
PegoWeb1.PeFont.FontSize = Gigasoft.ProEssentials.Enums.FontSize.Large
PegoWeb1.PeUserInterface.HotSpot.Data = True
PegoWeb1.PeLegend.Location = Gigasoft.ProEssentials.Enums.LegendLocation.Left
PegoWeb1.PePlot.Option.BarGlassEffect = True
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" the first Webform created with project.
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".
17) Add one additional line of code to the "Default.aspx.vb"
|
PegoWeb1.PeUserInterface.HotSpot.Data = True
|
Tthe Page_Load handler should look similar to...
18) Add the event to Default.aspx to dynamically prepare results for imagemap events via the event [PeImageMap].
19) Add the following code to the _PeImageMap handler...
|
If (e.HotSpotType = Gigasoft.ProEssentials.Enums.HotSpotType.DataPoint) Then
e.ToolTip = "Point " + e.Data2.ToString() + " with a value of " + PegoWeb1.PeData.Y(e.Data1, e.Data2).ToString()
End If
|
20) Run the project and your browser will show an image as follows. Move the mouse over bars to see the image map content.
|
| Run the project... |
Serving up a PNG... |
|
|
You'll notice that nearly identical code was required for "Default.aspx.vb" and "Default2.aspx.vb" 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 should be set to the same size.
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.vb" and Default could contain a simple html image tag instead of a chart object.
For SVG charting: remove the HotSpot.Data setting from both pages and 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 charting control. Right click the control to access the user interface. Read the AspReadme for client-side examples and CAB file issues.
|
|
