Dundas Chart for ASP.NET
Image Maps and Binary Streaming
See Also Send comments on this topic.
Using Dundas Chart > Working With Images > Image Maps and Binary Streaming

Glossary Item Box

Overview 

Client-side image maps can be used to add drilldown capabilities, tooltips, and more to all of your charts.

When a chart is rendered using the Binary Streaming approach, two ASPX pages are used. The first page has an IMG tag with the image source pointing to the second page, the second page creates the chart web control, and streams back the chart image binary data. This rendering method is fast, does not require any disk space (since a temporary image file is not used), and also does not require security access to create and write data to its temporary image files.

Since an image map cannot be a part of the binary stream that gets sent back by the second page, the only place where an image map can be rendered is within the first page using an image tag.

 

Using Image Maps with Binary Streaming

To use image maps with binary streaming, perform the following steps:

  1. Create a .aspx page (BinaryStreamedImageAndMap.aspx). This page will be used to render your chart as an image map using an IMG tag.
  2. Create a second .aspx page (BinaryStreamedChart.aspx). This page will be used to stream chart data back to the first page that was created above.
  3. Add the chart web control to your (BinaryStreamedImageAndMap.aspx) page, and set its appearance and data properties.
  4. Set the RenderType property of the chart to ImageMap.
  5. Set the ImageUrl property of the chart to the name of your second .aspx page (BinaryStreamedChart.aspx). This step will allow for the stream back of the chart data.

     

    After completing all of the above steps, your .aspx file should look similar to the HTML code that follows. It is worthy to note that, Run-time code behind could have been used to initialize the control, but for simplicity, we chose to do it at design-time.

HTML - BinaryStreamedImageAndMap.aspx Copy Code
<%@ Page language="c#" CodeFile="BinaryStreamedImageMap.aspx.cs" AutoEventWireup="false" 
Inherits="ProjectNameSpace.BinaryStreamedImageMap"%>
<%@ Register TagPrefix="dcwc" Namespace="Dundas.Charting.WebControl" 
Assembly="DundasWebChart" %>
<html>
  <head></head>
  <body>
    <form>
      <DCWC:CHART id="Chart1" runat="server" RenderType="ImageMap" ImageUrl="BinaryStreamedChart.aspx" ImageType="Png">
        <Series>
          <dcwc:Series ChartType="SplineArea" Name="Default" Href="http://www.dundas.com" ToolTip="My series tooltip!">           
            <Points>
              <dcwc:DataPoint YValues="6"></dcwc:DataPoint>
              <dcwc:DataPoint YValues="9"></dcwc:DataPoint>
              <dcwc:DataPoint YValues="3"></dcwc:DataPoint>
            </Points>
          </dcwc:Series>
        </Series>
        <ChartAreas>
          <dcwc:ChartArea BorderColor="" Name="Default" BackColor="Transparent"></dcwc:ChartArea>
        </ChartAreas>      
      </DCWC:CHART>   
    </form>
  </body>
</html>

 

  1. Add a chart web control to the BinaryStreamedChart.aspx page, and make sure that no other HTML tags exist in this file.
  2. Initialize the chart in EXACTLY the same way you did in step number 3 for the page that displays the chart image. It is critically important that all the properties and data for both charts be the same. Also, if any runtime code is added to the page rendering the Image Map (BinaryStreamedImageAndMap.aspx), it MUST also be added to this page (BinaryStreamedChart.aspx).
  3. Set the RenderType property of the chart object in BinaryStreamedImageAndMap.aspx to BinaryStreaming.

     

    After completing all of the above steps, your .aspx file should look similar to the HTML code that follows. Remember that the chart control must be exactly the same as it was in the first page. Also, this page cannot contain any other HTML tags.

HTML - BinaryStreamedChart.aspx Copy Code
<%@ Page language="c#" CodeFile="BinaryStreamedChart.aspx.cs" AutoEventWireup="false" 
Inherits="ProjectNameSpace.BinaryStreamedChart" %>
<%@ Register TagPrefix="dcwc" Namespace="Dundas.Charting.WebControl" Assembly="DundasWebChart" %>
<DCWC:CHART id="Chart1" runat="server" RenderType="BinaryStreaming" ImageType="Png" >
  <Series>
    <dcwc:Series ChartType="SplineArea" Name="Series1">
      <Points>
        <dcwc:DataPoint YValues="6"></dcwc:DataPoint>
        <dcwc:DataPoint YValues="9"></dcwc:DataPoint>
        <dcwc:DataPoint YValues="3"></dcwc:DataPoint>
      </Points>
    </dcwc:Series>
  </Series>
  <ChartAreas>
    <dcwc:ChartArea BorderColor="" Name="Default" BackColor="Transparent">
    </dcwc:ChartArea>
  </ChartAreas>
</DCWC:CHART>



 


    

  1. Now the chart is ready to be tested. When you load your BinaryStreamedImageAndMap.aspx page in a browser you should see HTML source code that looks similar to this: 


 






HTML
 Copy Code




<html>
   <head></head>
   <body>
      <form name="Form1" method="post" action="BinaryStreamedImageAndMap.aspx" id="Form1">
         <input type="hidden" name="__VIEWSTATE" value="dDwxNzEyMzEwNjcyOzs+U0vp3PHcm9pNhiT3JmI+zRn3zxE=" />
         <img src="BinaryStreamedChart.aspx" id="Chart1" name="Chart1" USEMAP="#Chart1ImageMap">
         <map NAME="Chart1ImageMap">
            <area SHAPE="rect" HREF="http://www.dundas.com" Title="My series tooltip!" COORDS="244,166,274,204">
            <area SHAPE="rect" HREF="http://www.dundas.com" Title="My series tooltip!" COORDS="207,72,237,204">
            <area SHAPE="rect" HREF="http://www.dundas.com" Title="My series tooltip!" COORDS="170,91,199,204">
         </map>
      </form>
   </body>
</html>



 


See Also






Copyright © 2001 - 2009 Dundas Data Visualization, Inc. and others.