Overview

AJAX (Asynchronous Javascript and XML) is a development technique that enables you to refresh a part of a web page without having to send the entire page, as a postback, to the server. By eliminating post-backs and state persistence issues, the use of AJAX can create a more responsive user interface while reducing overall server load.

How the Chart uses AJAX

Dundas Chart for ASP.NET uses AJAX to engineer the following features:

Toolbars.
Context Menus.
Property Dialogs.
Scrolling.
Zooming.

In addition to this, events have been provided to allow you to update the chart and other controls at the client. This allows you to update elements on the page without having to refresh the entire page.

Using AJAX has several advantages because it will allow you to:

Eliminate postbacks to enhance user-experience.
Easily handle all client-side functionality by using Chart events.
Display your content in many commonly used browsers such as Internet Explorer, Firefox, Netscape, and Opera.

Flash, SVG, and EMF image file formats are incompatible with all AJAX features and will generate exceptions. To use AJAX features please avoid using any of these image file formats.

Handling the Chart Click Event

The Click event fires when any part of the chart has been clicked by the user. This event allows you to programmatically update the chart's data at run-time without having to post the entire web page back to the server. Using AJAX you can update the chart image as required after each chart click.

Example

This example demonstrates how to use the Click event to update a chart without using a postback to refresh the page's data.

Visual Basic Copy Code

Visual Basic	Copy Code
Imports Dundas.Charting.WebControl ... ' Chart Click event handler. Protected Sub Chart1_Click(sender As Object, e As ImageClickEventArgs) ' Using the coordinates of the Click event determine which chart ' element was clicked. Dim hitTestResult As HitTestResult = Chart1.HitTest(e.X, e.Y) If Not (hitTestResult Is Nothing) Then ' Update chart title with the name of the last clicked chart element. Chart1.Titles("ClickedElement").Text = "Last Clicked Element: " + hitTestResult.ChartElementType.ToString() End If End Sub

Imports Dundas.Charting.WebControl
...

' Chart Click event handler.
Protected Sub Chart1_Click(sender As Object, e As ImageClickEventArgs)
   ' Using the coordinates of the Click event determine which chart 
   ' element was clicked.
   Dim hitTestResult As HitTestResult = Chart1.HitTest(e.X, e.Y)
   
   If Not (hitTestResult Is Nothing) Then
      ' Update chart title with the name of the last clicked chart element.
      Chart1.Titles("ClickedElement").Text = "Last Clicked Element: " + 
         hitTestResult.ChartElementType.ToString()
   End If
End Sub

C# Copy Code

C#	Copy Code
using Dundas.Charting.WebControl; ... // Page Load event handler. protected void Page_Load(object sender, System.EventArgs e) { // Hookup to the chart click event. Chart1.Click += new ImageClickEventHandler(Chart1_Click); } // Chart Click event handler. protected void Chart1_Click(object sender, ImageClickEventArgs e) { // Using the coordinates of the Click event determine which chart // element was clicked. HitTestResult hitTestResult = Chart1.HitTest(e.X, e.Y); if (hitTestResult != null) { // Update chart title with the name of the last clicked chart element. Chart1.Titles["ClickedElement"].Text = "Last Clicked Element: " + hitTestResult.ChartElementType.ToString(); } }

using Dundas.Charting.WebControl;
...

// Page Load event handler.
protected void Page_Load(object sender, System.EventArgs e)
{
    // Hookup to the chart click event. 
    Chart1.Click += new ImageClickEventHandler(Chart1_Click);
}

// Chart Click event handler.
protected void Chart1_Click(object sender, ImageClickEventArgs e)
{
    // Using the coordinates of the Click event determine which chart
    // element was clicked.
    HitTestResult hitTestResult = Chart1.HitTest(e.X, e.Y);

    if (hitTestResult != null)
    {
        // Update chart title with the name of the last clicked chart element.
        Chart1.Titles["ClickedElement"].Text = "Last Clicked Element: " + 
          hitTestResult.ChartElementType.ToString();
    }
}

Using Client Callbacks

The Callback event provides you with a greater degree of freedom when implementing AJAX solutions. Using Javascript events, you can fire the Callback event to refresh information relating to a specific chart element. To use the Callback event, you must use the GetCallbackEventReference method of the CallbackManager class. This method can be used with the MapAreaAttributes property of individual chart elements.

The following chart elements have a MapAreaAttributes property that you can use in the manner described above:

Annotations.
Axes.
Custom labels.
Data points.
Legend cells.
Legend cell columns.
Legend items.
Series.
Strip lines.
Titles.

GetCallbackEventReference Method

This GetCallbackEventReference method will create the necessary Javascript code to initiate the client call back for when an event is fired. Normally, this code is used when a click event is fired, but it can also be used with other events. This method's first parameter is used to identify the target being handled in the Callback event. The second parameter is used in the Callback event to specify arguments like a chart element, or keyword.

For more information on using keywords, see the topic on Using Keywords.

Example

This example demonstrates how to use the Callback event to explode a pie slice when that slice is clicked.

Visual Basic Copy Code

Visual Basic	Copy Code
Imports Dundas.Charting.WebControl ... ' Page Load event handler. Protected Sub Page_Load(sender As Object, e As EventArgs) ' We add points to the chart only when the page is first rendered If Not IsPostBack Then Chart1.Series(0).Points.Clear() Chart1.Series(0).Points.AddXY(1, 4) Chart1.Series(0).Points.AddXY(2, 5) Chart1.Series(0).Points.AddXY(3, 2) Chart1.Series(0).Points.AddXY(4, 1) End If ' Use GetCallbackEventReference method to create Javascript. ' We use chart keyword #INDEX as a parameter for the Callback event. Chart1.Series(0).MapAreaAttributes = "onclick=""" + Chart1.CallbackManager.GetCallbackEventReference("PieClick", "#INDEX") + """" End Sub ' Chart Callback event handler. Protected Sub Chart1_Callback(sender As Object, e As CommandEventArgs) If e.CommandName = "PieClick" Then ' Reset pie chart so that no pie slices are exploded. Dim point As DataPoint For Each point In Chart1.Series(0).Points point("Exploded") = "False" Next point ' Explode the correct pie slice. Dim index As Integer = Integer.Parse(e.CommandArgument.ToString()) Chart1.Series(0).Points(index)("Exploded") = "True" End If End Sub

Imports Dundas.Charting.WebControl
...

 ' Page Load event handler.
Protected Sub Page_Load(sender As Object, e As EventArgs)
   ' We add points to the chart only when the page is first rendered
   If Not IsPostBack Then
      Chart1.Series(0).Points.Clear()
      Chart1.Series(0).Points.AddXY(1, 4)
      Chart1.Series(0).Points.AddXY(2, 5)
      Chart1.Series(0).Points.AddXY(3, 2)
      Chart1.Series(0).Points.AddXY(4, 1)
   End If
   
   ' Use GetCallbackEventReference method to create Javascript.
   ' We use chart keyword #INDEX as a parameter for the Callback event.        
   Chart1.Series(0).MapAreaAttributes = "onclick=""" + 
   Chart1.CallbackManager.GetCallbackEventReference("PieClick", "#INDEX") + """"
End Sub


' Chart Callback event handler.
Protected Sub Chart1_Callback(sender As Object, e As CommandEventArgs)
   
   If e.CommandName = "PieClick" Then
      ' Reset pie chart so that no pie slices are exploded.
      Dim point As DataPoint
      For Each point In  Chart1.Series(0).Points
         point("Exploded") = "False"
      Next point 
      ' Explode the correct pie slice.
      Dim index As Integer = Integer.Parse(e.CommandArgument.ToString())
      Chart1.Series(0).Points(index)("Exploded") = "True"
   End If
End Sub

C# Copy Code

C#	Copy Code
using Dundas.Charting.WebControl ... // Page Load event handler. protected void Page_Load(object sender, EventArgs e) { // We add points to the chart only when the page is first rendered. if (!IsPostBack) { Chart1.Series[0].Points.Clear(); Chart1.Series[0].Points.AddXY(1, 4); Chart1.Series[0].Points.AddXY(2, 5); Chart1.Series[0].Points.AddXY(3, 2); Chart1.Series[0].Points.AddXY(4, 1); } // Use GetCallbackEventReference method to create Javascript. // We use chart keyword #INDEX as a parameter for the Callback event. Chart1.Series[0].MapAreaAttributes = "onclick=\"" + Chart1.CallbackManager.GetCallbackEventReference("PieClick", "#INDEX") + "\""; } // Chart Callback event handler. protected void Chart1_Callback(object sender, CommandEventArgs e) { if (e.CommandName == "PieClick") { // Reset pie chart so that no pie slices are exploded. foreach (DataPoint point in Chart1.Series[0].Points) point["Exploded"] = "False"; // Explode the correct pie slice. int index = int.Parse(e.CommandArgument.ToString()); Chart1.Series[0].Points[index]["Exploded"] = "True"; } }

using Dundas.Charting.WebControl
...

// Page Load event handler.
protected void Page_Load(object sender, EventArgs e)
{
    // We add points to the chart only when the page is first rendered.
    if (!IsPostBack)
    {
        Chart1.Series[0].Points.Clear();
        Chart1.Series[0].Points.AddXY(1, 4);
        Chart1.Series[0].Points.AddXY(2, 5);
        Chart1.Series[0].Points.AddXY(3, 2);
        Chart1.Series[0].Points.AddXY(4, 1);
    }

        // Use GetCallbackEventReference method to create Javascript.
        // We use chart keyword #INDEX as a parameter for the Callback event.        
        Chart1.Series[0].MapAreaAttributes = "onclick=\"" + 
           Chart1.CallbackManager.GetCallbackEventReference("PieClick", "#INDEX") + "\"";
}

// Chart Callback event handler.
protected void Chart1_Callback(object sender, CommandEventArgs e)
{

    if (e.CommandName == "PieClick")
    {
        // Reset pie chart so that no pie slices are exploded.
        foreach (DataPoint point in Chart1.Series[0].Points)
                point["Exploded"] = "False";        
        
        // Explode the correct pie slice.
        int index = int.Parse(e.CommandArgument.ToString());        
        Chart1.Series[0].Points[index]["Exploded"] = "True";
    }
}

Dundas Chart for ASP.NET implements AJAX technologies by serializing the chart's current state into a session variable. For this reason, you only need to set the chart's appearance when the page is first rendered. For a chart that contains a 1000 points, memory usage would be approximately 100 KB.

Helper Methods

There are a variety of methods that can be used in the CallbackManager to provide greater flexibility when implementing AJAX-based solutions.

The ExecuteClientScript method allows you to execute Javascript on the client-side.
The UpdateClientControl method allows you to update any specified client-side controls such as list boxes, or text boxes without having to post the entire web page back to the server.
The GetCallbackClientHyperlink method can be used to set a hyperlink for any client-side control, and functions in the same manner as the GetCallbackEventReference method.

Dundas Chart for ASP.NET
Using AJAX Technology
See Also Send comments on this topic.

Overview

How the Chart uses AJAX

Handling the Chart Click Event

Example

Using Client Callbacks

GetCallbackEventReference Method

Example

Helper Methods

See Also