Dundas Gauge for ASP.NET Send comments on this topic
Rendering Methods
See Also

Glossary Item Box

Overview

This topic discusses the ways in which the Gauge control can be rendered.

Rendering Methods

The Gauge control can be rendered in one of several ways:

The RenderType property of the root GaugeContainer class determines the rendering method when the gauge is displayed as an image, and the default method is image tag rendering. 

For information on how to stream real-time data back to client see the topic titled Real Time Data.

Each of the above mentioned methods for rendering a gauge control are discussed below.

Image Tag Method

With this method a gauge image is generated and then saved to disk at the server, in a format that is determined by the ImageType property of the root GaugeContainer class. The gauge image can be displayed as a BMP, JPEG, or PNG file, and is rendered via an <IMG> tag with its SRC attribute set to the image file saved to disk.

The URL where the image file is saved is determined by the ImageUrl property of the root GaugeContainer class. This property is very important when using the image tag method since this property can be used to:

For more information see the topic on Managing Image Files.

Advantages

Disadvantages

It may be wise to employ this method if the gauge image rarely changes. For example, a temperature gauge that displays room temperature is not likely to fluctuate greatly under normal circumstances. 

Binary Streaming Method

With this method the gauge image is sent directly to the client using the Binary.Write method. The gauge is implemented as an attribute of an html tag that displays an image (e.g., the Src attribute of an Image tag set to another .aspx page that generates the image, etc.). When the browser requests the gauge, it does this in the same manner as when it requests a static image from a web server.

This method should be employed if a web farm is being used, or if the gauge image is subject to frequent changes.

 

  Note
When using Flash or SVG image types an <Embed> tag should be used to display the image.

 

To use this method certain criteria must first be met:

  1. The .aspx page that is generating the gauge must be used as the source for a tag attribute in the page that displays the image (e.g., the Src attribute of an Image tag, the imageUrl attribute of an ImageButton tag, etc.). This tag can be used within any web page (such as Default.aspx) and there is no code used that is associated with the rendering of the gauge.
     
    Example

     

    ASPX (Default.aspx) 
    <head>
   <body>
      <img src="gaugeRenderingPage.aspx">
   </body>
</head>

     

  2. No html code can be put into the .aspx page that generates the image. Only Web Server control code and gauge XML code should be present. This page will only generate the gauge image, and stream it to the requesting browser. The RenderType property of the page that is generating the image must be set to BinaryStreaming.

    Example

    Code that resides in the gaugeRendering.aspx page. 

     

    ASPX (gaugeRenderingPage.aspx) 
    <%@ Page Language="vb" AutoEventWireup="False" codebehind="WebForm1.aspx.vb" Inherits="VBGaugeWeb.WebForm1"%>
<%@ Register TagPrefix="dgwc" Namespace="Dundas.Gauges.WebControl" Assembly="DundasWebGauges" %>
<DGWC:GaugeContainer id="GaugeContainer1" style="Z-INDEX: 101; LEFT:
    112px; POSITION: absolute; TOP: 58px" runat="server" Width="532px"
    Height="317px" RenderType="BinaryStreaming">
    <Frame FrameStyle="None"></Frame>
    
    <CircularGauges>
       <DGWC:CircularGauge Name="Default">
           <Ranges>
              <DGWC:CircularRange Name="Default"></DGWC:CircularRange>
           </Ranges>
           <Pointers>
              <DGWC:CircularPointer Name="Default"></DGWC:CircularPointer>
           </Pointers>
           <Frame FrameStyle="Edged"></Frame>  
           <Scales>
              <DGWC:CircularScale Name="Default">
                 <MinorTickMark Shape="Rectangle" Length="3" Width="1"></MinorTickMark>
              </DGWC:CircularScale>
           </Scales>
       </DGWC:CircularGauge>
    </CircularGauges>
    
    <Values><DGWC:InputValue Name="Default">
       </DGWC:InputValue>
    </Values>
</DGWC:GaugeContainer>

     

Advantages

Disadvantages

If tooltips and hrefs are required with a binary streamed gauge, binary streaming becomes more complex.

For more information see the topic titled Client-Side Maps and Binary Streaming.

Input Tag Method

This method is similar to the "Image Tag Method", the difference being that the gauge's server-side Click event can be used to perform some action in response to the end-user clicking on a gauge element. Although an <Input> tag is used instead of an <Image> tag, the information given in the Image Tag Method concerning image file management, such as the ImageType and ImageUrl properties, still apply to the <Input> tag method.

The gauge element the end-user clicked on can be determined by using the HitTestResult object that is returned by the GaugeContainer.HitTest method.

 

  Note
If you want to implement drill-down functionality we highly recommend using client-side image maps instead.

 

Advantages

Disadvantages

Image Map Method

This method is only used to create an image map for the gauge when binary streaming is the rendering type (two instances of the gauge must be created). See the Client-Side Maps and Binary Streaming topic for further details.

Flash Rendering Method

Flash is a vector graphics-based image animation program owned by Macromedia Corporation. The viewer required to view Flash animated images is made available to the public, free of charge, by Macromedia. Flash files are often used in web pages to display animated graphics, and can also be played using a standalone Flash player.

Advantages

Disadvantages

Setting a gauge to render its images using a Flash format can be done by simply setting the ImageType property to Flash.

See Also