This page includes C# instructions for VS2015 / VS2012. Click here for VB.NET Instructions.
ProEssentials WebForm interfaces may be used to serve dynamically generated chart images (png jpg) and binary chart states (data and all settings to initialize a chart) to pass to a client side charting exe connected to the internet.
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.
Though our WebForms will mostly likely be used to have your client side EXEs initialize and or update charts via your server.
You 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.
See a similar pre-built example within the included ProEssentials10/PE10WebDemo directory.
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, render as an image tag followed by an ImageMap tag. - BinaryImageStream, render as binary data representing image data. - BinaryDataStream use with client side EXE LoadFromUrl to update/append real-time data from the cloud/server to the client side chart. |
RenderedImageType | When RenderingType is set to BinaryImageStream, this property controls the format of the binary image data. Possible settings are PNG, and JPEG. |
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. |
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.HotSpotnamespace. |
ImageMapEventArgs | This object is passed to the PeImageMap event to communicate parameters with the developer. |
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:
using Gigasoft.ProEssentials.Enums;
Walk-Through:
The 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 WebForms interfaces into Visual Studio.NET
VS2015 - VS2012 Instructions
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 VS2013.
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. If blank, ImageMap is the default, though adding the setting will clarify the project.
Within the Properties window, change the ImageUrl property to "Default2.aspx".
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".
6) Double click the PegoWeb tool within the toolbox and this places an instance of the PegoWeb component within "Default2.aspx".
Within the Properties window, change the RenderingTypeproperty to BinaryImageStream.
Within Visual Studio's main menu, select [View] and then [Markup].
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.
Within Visual Studio's main menu, select [View] and then [Code].
Add the following code to the Page_Load event handler. Type a few lines manually to see examples of embedded XML help and other intellisense features.
PegoWeb1.PeString.MainTitle = "Hello World";
PegoWeb1.PeString.SubTitle = "";
PegoWeb1.PeData.Subsets = 2; // Subsets = Rows //
PegoWeb1.PeData.Points = 6; // Points = Columns //
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[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] = Color.FromArgb(60, 0, 180, 0);
PegoWeb1.PeColor.SubsetColors[1] = Color.FromArgb(180, 0, 0, 130);
PegoWeb1.PeColor.BitmapGradientMode = false;
PegoWeb1.PeColor.QuickStyle = Gigasoft.ProEssentials.Enums.QuickStyle.LightShadow;
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.PePlot.SubsetLineTypes[0] = Gigasoft.ProEssentials.Enums.LineType.MediumSolid;
PegoWeb1.PePlot.SubsetLineTypes[1] = Gigasoft.ProEssentials.Enums.LineType.MediumDash;
PegoWeb1.PeConfigure.RenderEngine = Gigasoft.ProEssentials.Enums.RenderEngine.Direct2D;
PegoWeb1.PeConfigure.AntiAliasGraphics = true;
PegoWeb1.PeConfigure.AntiAliasText = true;
Once entered, select this code and copy it to clipboard. Similar code will be used within the first webpage code too.
7) Within Visual Studio's main menu, select [Window] and then "Default.aspx"
Within Visual Studio's main menu, select [View] and then [Code]
Paste the above code into the Page_Loadevent handler for "Default.aspx". Thus both "Default.aspx.cs" and "Default2.aspx.cs" now contain similar Page_Load code.
Add one additional line of code to the "Default.aspx.cs" This line will tell the server to produce ImageMap contents so user can click a bar.
PegoWeb1.PeUserInterface.HotSpot.Data = true; |
The Page_Load handler within "Default.aspx.cs" should look similar as below...
Your project code should look similar to...
8) 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.
Add the following code to the PegoWeb1.PeImageMap event handler.
if (e.HotSpotType == Gigasoft.ProEssentials.Enums.HotSpotType.DataPoint)
{
e.ToolTip = "Point " + e.Data2.ToString() +
" with a value of " + PegoWeb1.PeData.Y[e.Data1, e.Data2].ToString();
}
9) Save and run the project. Your project will show an image as follows. Move the mouse over a bar and click to see the DataHotSpot / PeImageMap logic in action.
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.
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 one would actually replace Default.aspx's instance of a ProEssentials asp.net control with a simple generic html image tag.
This completes this walkthrough.
Please read the remaining sections within Chapter 2 and review the demo code and documentation that's installed with the eval/product.
Once installed, the demo program can be accessed via shortcut...
Start / ProEssentials v10 / PeDemo
Note that our main charting demo is replicated in WPF and Winform C#.NET, VB.NET, VC++ MFC, Delphi, Builder all accessible from where you installed ProEssentials. These are great for modifying an existing demo to test potential modifications before implementing within your applications.
Your success is our #1 goal by providing the easiest and most professional benefit to your organization and end-users.
ProEssentials was born from professional Electrical Engineers needing their own charting components. Join our large list of top engineering companies using ProEssentials.
Thank you for being a ProEssentials customer, and thank you for researching the ProEssentials charting engine.