SVG Chart C# WebForm example code for Visual Studio

[ C# SVG Chart Server-Side Development ]

This page includes C# instructions for VS2008 / VS2010 / VS2012...

ProEssentials Chart WebForms are used to serve dynamically generated SVG images.

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 true vector output and great for HTML5 based reporting where printed output produces razor sharp results via very small file sizes.

See a similar pre-built example within the included ProEssentials8/PE8WebDemo directory. See example 4, with related files within the Walk-Through4 folder.

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

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.

CodebaseUrl

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.

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 C#.NET, use the usings keyword. For example:

using Gigasoft.ProEssentials.Enums;

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

VS2008 / VS2010 / VS2012 Instructions

  • Under the Tools menu, select [Choose 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 Items] dialog should now show 7 highlighted controls: Pe3doWeb, PegoWeb, PepcoWeb, PepsoWeb, PesgoWeb, and PEBaseWeb/Pedo.
  • Deselect the controls PEBaseWeb and Pedo as they should not be used for development,
  • Close the dialog and the 5 new ProEssentials components will be at the bottom of the toolbox.

 

WebForm.aspx ... Add an Img tag.
Tags

4) For a simple svg example, simply add an HTML IMG tag and point the src to WebForm2.aspx.

For this example we set the width=800 and height=400

5) Within Visual Studio's main menu, select [WebSite] and then [Add New Item...] and add a new Webform. Accept the default name of "WebForm2.aspx".

WebForm2.aspx ...

6) Double click the PegoWeb tool within the toolbox and this places an instance of the PegoWeb component within "WebForm2.aspx".

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

8) Within the Properties window, change the RenderedImageType property to SVG.

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

10) Remove all HTML content from this page. The resulting Markup / HTML Source content should only be tags...

Asp.Net Chart ASPX Tag

NOTE: It is important the entire page looks as above. No ascii characters can be outside < > tags. Any ascii would corrupt the binary data being served to WebForm.aspx on the client. The client is expecting binary data from WebForm2.aspx which represents an image.

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

12) Add the following code to the Page_Load event handler for WebForm2. Type it in manually to see examples of embedded XML help and other Intellisense features. Or follow below.

PegoWeb1.PeString.MainTitle = "Hello ASP.NET";
PegoWeb1.PeString.SubTitle = "";
PegoWeb1.PeData.Subsets = 1;
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.PePlot.Method = Gigasoft.ProEssentials.Enums.GraphPlottingMethod.Bar;
PegoWeb1.PeFont.FontSize = Gigasoft.ProEssentials.Enums.FontSize.Large

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

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

15) Paste the above code into the Page_Load event handler for "WebForm2.aspx".

16) Save and run the project. Your browser will show an image as follows.

Run the project...

Asp.Net Chart producing svg within browser

 

Online developer reference

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

Online interactive demo

Financial, Engineering, Scientific, and Business examples give you an instant taste of ProEssentials' power.

view our online .Net Graph Demo