Chart Image Rendering (Chart Controls)

  • Article

In the Chart control for ASP.NET, you can define the way the Chart control renders the chart image. To do this, use the RenderType property. Three options are available.

ImageTag Option

By default, the Chart control for ASP.NET uses this method to render chart images. This is the simplest rendering method. It caches the rendered chart image either in memory or as temporary files. This improves performance for charts with static data and appearance that are accessed frequently.

Usage

Set the RenderType property to ImageTag. You can specify how rendered images are managed. For more information, see Image File Management.

BinaryStreaming Option

This option causes the chart image to be streamed directly to the client without being saved on the server. It causes the ASP.NET page to behave like a static image when requested, enabling you to place the ASP.NET page into any HTML <img> tag. For example:

<img src="DetailedChart.aspx" />

Use this option to improve performance when the chart data and appearance change frequently or when a server cluster is used. However, it has the following disadvantages:

  • No image caching.

  • No support for AJAX or interactivity features. To use the interactivity features, you must use this option together with the ImageMap option.

  • Cannot share the Chart control with other HTML element in the same source file.

Usage

When using this option, the ASP.NET page that contains the Chart control must contain only the following elements:

  • The @ Page directive

  • The <asp.Chart> element

  • Any run-time code

The following example shows an ASP.NET that contains a binary streamed Chart control.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>
<asp:Chart ID="Chart2" runat="server" RenderType="BinaryStreaming">
   <series>
      <asp:Series Name="Series1" ChartArea="ChartArea1">
         <Points>
            <asp:DataPoint YValues="4" />
            <asp:DataPoint YValues="5" />
         </Points>
      </asp:Series>
   </series>
   <chartareas>
      <asp:ChartArea Name="ChartArea1" />
   </chartareas>
</asp:Chart>

ImageMap Option

This method is used when you want to use interactivity features with the BinaryStreaming option. In this option, you use two ASP.NET pages:

  • The first page contains the binary streamed chart. This page uses the BinaryStreaming option in the Chart control's RenderType property.

  • The second page requests the binary streamed chart and applies map areas to the streamed chart image.

Usage

To set up the ASP.NET pages for the ImageMap option

  1. Create the first page using the BinaryStreaming option in the Chart control.

  2. In the first page, set all data, appearance, and interactivity properties as you would in a fully customized and interactive chart, such as series tooltips. Also, add all run time code to the first page or its code-behind file.

  3. Copy and paste the Chart control from the first page into the second page.

  4. Copy and paste all run time code from the first page into the second page or its code-behind file.

  5. In the second page, set the Chart control's RenderType property to ImageMap, and the ImageLocation property to the location of the first page.

    Note

    In order for streamed image and the image map to be synchronized, the Chart controls' data and appearance properties, as well as run-time code, must be identical between the two ASP.NET pages.

See Also

Other Resources

Advanced Topics