Web Chart Example Code

ProEssentials Web Chart WebForm is used to serve up dynamically generated images and ActiveX binary states. The dynamic images have the option of supporting image maps. Because content is streamed directly to the browser, ProEssentials can be used within scalable WebFarm environments.

Prerequisites:

ASP.NET development is very similar to standard ASP development. Generally, you will implement server side behavior in pairs of files. 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 web form renders as viewable ascii html and the second web form 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 to 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. So technically, two aspx pages are not required, only the one that serves the binary content is mandatory. However, this example uses two aspx pages for simplicity.

The ProEssentials WebForm interfaces have a few key properties and one event which will control server-side specific functionality. These are as follows:

Also, there is one Event and one EventArgs which is used to implement image map support.

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

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.

Walk-Through:

The following information demonstrates how to create your first ASP.NET / ProEssentials implementation using the Visual Basic language. It discusses using ASP.NET to serve up a dynamically generated PNG image. Other examples are provided within the product/evaluation. Also refer to the "ReadMe.htm", "AspReadMe.htm", and "AspNetReadMe.htm" files installed onto your system with the eval/product (accessible via Start menu).

1) Start Visual Studio.NET and create a new project targeting an ASP.NET Web Application using VB 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". Right click anywhere inside the form, select [Properties], change the [Page Layout] setting to FlowLayout. This is generally recommended as only advanced browsers support GridLayout. select [Ok] button to close property page.

WebForm1.aspx [Design]...

Adding ProEssentials to a Form...

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. 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...

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. 8) Repeat the steps to change the page layout: right click anywhere inside the form, select [Properties], change the [Page Layout] setting to FlowLayout. This is generally recommended as only advanced browsers support GridLayout. Select [OK] button to close property page.

9) Again, double click the PegoWeb tool within the toolbox and this places an instance of the PegoWeb component within "Webform2.aspx".

10) Within the Properties window, change the RenderingType property to BinaryImageStream.

11) Within Visual Studio's main menu, select [View] and then [HTML Source]

12) Remove all HTML content from this page. The resulting content for this file should be...

13) Within Visual Studio's main menu, select [View] and then [Code].

14) 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.

Once entered, select this code and copy it to clipboard.

15) Within Visual Studio's main menu, select [Window] and then "Webform1.aspx"

16) Within Visual Studio's main menu, select [View] and then [Code]

17) Paste the above code into the Page_Load event handler for "WebForm1.aspx".

18) Add one additional line of code to the "Webform1.aspx.vb"

So, the Page_Load handler within "Webform1.aspx.vb" should now contain...

19) At the top of the code window, use the left drop down combo box to select [PegoWeb1]. Then use the right drop down combo box to select [PeImageMap]. You should see...

20) Add the following code to the _PeImageMap handler...

21) Save and run the project. Your browser will show an image as follows. Move the mouse over bars to see the image map content.

You'll notice that nearly identical code was required for "Webform1.aspx.vb" and "Webform2.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 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 "WebForm2.aspx.vb" and could actually replace WebForm1's instance of a ProEssentials WebForm control with a generic html image tag.

Try This!

To modify this example to work with ActiveXs, change the RenderingType setting for "Webform1.aspx" to ActiveX, and the RenderingType setting on "Webform2.aspx" to BinaryActiveXStream. Give it a try! The browser will contain a fully interactive graphing control. Right click the control to access the user interface.

Because the WebForm interfaces can serve ActiveX binary states, we recommend that you also review the standard ASP/ActiveX technical information in the "AspReadme" file installed with the eval.