Dundas Data Visualization Support Site
Dundas Support Site Home  |  Contact Us  |  Dundas Data Visualization  
Contact Us via Email
Home

AJAX Drill Down with Preview

 
Q. Can you explain all of the steps involved to have an AJAX interactive drill down with preview when the mouse is moved over a datapoint?



A. The first thing that not everyone realizes before attempting to do any AJAX based projects is that AJAX is only supported in Visual Studio when you use ASP.NET. There is no need for AJAX in the Windows Forms environment since this sort of functionality already exists in the form of mouse events. In a website, mouse events exist but must be done through the use of JavaScript; hence the acronym Asynchronous JavaScript and XML. We are making up for this lack of functionality by having JavaScript do the work that ASP.NET alone cannot.


  1. The first thing that we need to do is add a new web form to our project. This web form will be responsible for the popup preview image. In our example, displayChart.aspx has been created in the project.
     
  2. Some other page will contain the main Chart control, which will display the drill-down preview image when the mouse is rolled over it (we will call this our "main" page.) Go to this page and view the source markup. Here you will add the JavaScript required for making the image appear and disappear based on the mouse movements. The following markup should be added to the document just after </form> appears in the source:

        <div class="FadingTooltip" id="FADINGTOOLTIP" style="Z-INDEX: 999; VISIBILITY: hidden; POSITION: absolute"></div>
    
        <script type="text/javascript" language="javascript">
            var FADINGTOOLTIP;
            var wnd_height, wnd_width;
            var tooltip_height, tooltip_width;
            var tooltip_shown = false;
            var transparency = 100;
            var timer_id = 1;
                    
            // override events
    
            window.onload = WindowLoading;
            window.onresize = UpdateWindowSize;
            document.onmousemove = AdjustToolTipPosition;
    
            function DisplayTooltip(tooltip_url)
            {
                FADINGTOOLTIP.innerHTML = '<IMG SRC="' + tooltip_url + '">';
                tooltip_shown = (tooltip_url != "") ? true : false;
                
                if(tooltip_url != "")
                {
                    // Get tooltip window height
                    tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
                    transparency=0;
                    ToolTipFading();
                } 
                else 
                    {
                        clearTimeout(timer_id);
                        FADINGTOOLTIP.style.visibility="hidden";
                    }
                }
    
                function AdjustToolTipPosition(e)
                {
                    if(tooltip_shown)
                    {
                        // Depending on IE/Firefox, find out what object to use to find mouse position
                        var ev;
                        if(e)
                            ev = e;
                        else
                            ev = event;
    
                        offset_y = (ev.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? - 15 - tooltip_height: 20;
                        FADINGTOOLTIP.style.visibility = "visible";
                        FADINGTOOLTIP.style.left = Math.min(wnd_width - tooltip_width - 10, Math.max(3, ev.clientX + 6)) + document.body.scrollLeft + 'px';
                        FADINGTOOLTIP.style.top = ev.clientY + offset_y + document.body.scrollTop + 'px';
                    }
                }
    
                function WindowLoading()
                {
                    FADINGTOOLTIP=document.getElementById('FADINGTOOLTIP');
            
                    // Get tooltip  window width 
                    tooltip_width = (FADINGTOOLTIP.style.pixelWidth) ? FADINGTOOLTIP.style.pixelWidth : FADINGTOOLTIP.offsetWidth;
                        
                    // Get tooltip window height
                    tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
    
                    UpdateWindowSize();
                }
                    
                function ToolTipFading()
                {
                    if(transparency <= 100)
                    {
                        FADINGTOOLTIP.style.filter="alpha(opacity="+transparency+")";
                        FADINGTOOLTIP.style.opacity=transparency/100;
                        transparency += 5;
                        timer_id = setTimeout('ToolTipFading()', 35);
                    }
                }
    
                function UpdateWindowSize() 
                {
                    wnd_height=document.body.clientHeight;
                    wnd_width=document.body.clientWidth;
                }
            </script>

    This markup is responsible for both showing the image and displaying the fading in and out effects.


  3. Next, we need to set the map area attributes on our data to call the JavaScript that was previously placed in the source for our main page. In this case, when the mouse is positioned over our data point, we will display our image and we will hide the image when the mouse moves out. Of course, any other JavaScript could be added here to get any other custom functionality.

    [C#]
    Chart1.Series[0].MapAreaAttributes = "onmouseover=\"DisplayTooltip('displayChart.aspx?Point=#VALX');\" onmouseout=\"DisplayTooltip('');\"";
    
    [VB.NET]
    Chart1.Series(0).MapAreaAttributes = "onmouseover=""DisplayTooltip('displayChart.aspx?Point=#VALX');"" onmouseout=""DisplayTooltip('');"""
    

    Note that in URL that we are passing to the JavaScript DisplayTooltip function, we include request URL parameters (the question mark, followed by argument1=value&argument2=value...) The code above passes the X-value of the individual point that the mouse rolls over to the displayChart.aspx page, using the #VALX keyword in the Chart. This will allow you to load data specific to the point the mouse is located over (see step 6.) You can also use different keywords: see "Using Keywords" in our documentation.


  4. In the designer for displayChart.aspx, create the chart that will be displayed for the preview image, making sure not to add anything other than the chart component. The addition of buttons, textboxes, other web controls or HTML will cause the image to fail to render in the tooltip and a red X will appear instead.

  5. After the chart has been created and the data has been bound to it, edit the HTML source for displayChart.aspx and remove all the markup not directly related to the creation of the chart image. Failure to remove all of this additional data will cause a red X to appear instead of the chart on your tooltip. (The HTML "&nbsp" will also cause this to fail.)

    For example, all of the following highlighted text must be removed"

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="displayChart.aspx.cs" Inherits="displayChart" %>

    <%@ Register Assembly="DundasWebChart" Namespace="Dundas.Charting.WebControl" TagPrefix="DCWC" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>

    <dcwc:chart id="Chart1" runat="server" palette="Pastel"><Series>
    <DCWC:Series BorderColor="64, 64, 64" ShadowOffset="1" Name="Series1"></DCWC:Series>
    <DCWC:Series BorderColor="64, 64, 64" ShadowOffset="1" Name="Series2"></DCWC:Series>
    </Series>
    <ChartAreas>
    <DCWC:ChartArea Name="Default"></DCWC:ChartArea>
    </ChartAreas>
    <Legends>
    <DCWC:Legend Name="Default"></DCWC:Legend>
    </Legends>
    </dcwc:chart>

    </div>
    </form>
    </body>
    </html>


  6. In the code-behind for displayChart.aspx, you can include code that will load data into the Chart using the parameter we passed in step 3. It is important to include a try-catch block here, since an uncaught exception will cause the tooltip image to be displayed unhelpfully as a red X. Here is an example that loads data from SQL Server:

    [C#]
    using System.Data.SqlClient;
    ...
            try
            {
                if (Request["Point"] != null)
                {
                    // Use the "Point" parameter to load drilled-down data:
                    string query = "SELECT * FROM Sales WHERE ID=" + Request["Point"];
    
                    SqlConnection connection = new SqlConnection("Data Source=localhost; Initial Catalog=Sales; Integrated Security=true");
                    connection.Open();
                    SqlCommand command = new SqlCommand(query, connection);
                    SqlDataReader reader = command.ExecuteReader();
    
                    Chart1.Series[0].Points.DataBind(reader, "ID", "Amount", null);
                }
            }
            catch (Exception ex)
            {
                Chart1.Titles.Add(ex.Message);
            }
    
    [VB.NET]
    Imports System.Data.SqlClient
    ...
            Try
                If Not Request("Point") Is Nothing Then
                    ' Use the "Point" parameter to load drilled-down data:
                    Dim query As String = "SELECT * FROM Sales WHERE ID=" + Request("Point") 
     
                    Dim connection As SqlConnection = New SqlConnection("Data Source=localhost; Initial Catalog=Sales; Integrated Security=true") 
                    connection.Open()
                    Dim command As SqlCommand = New SqlCommand(query,connection) 
                    Dim reader As SqlDataReader = command.ExecuteReader() 
     
                    Chart1.Series(0).Points.DataBind(reader, "ID", "Amount", Nothing)
                End If
            Catch ex As Exception
                Chart1.Titles.Add(ex.Message)
            End Try

  7. The last thing that we must do is set the RenderType property on the chart in displayChart.aspx to BinaryStreaming.



PoorExcellent