AJAX features provide interactivity and zooming/scrolling to Dundas Chart

What is AJAX?

AJAX (Asynchronous JavaScript and XML) enables you to refresh part of a web page without having to send the entire page back to the server. The AJAX-style of development is used in high-profile websites like Google, Flickr, and Amazon, and has rapidly gained popularity within the ASP.NET development community because of its ability to deliver rich, fast-loading, user-friendly applications that meet the demands of today's organizations.

Recognizing the importance of AJAX, Microsoft recently introduced the Atlas project, an extension to ASP.NET 2.0, designed to simplify the implementation of AJAX functionality. In addition, Microsoft has already launched web sites of their own that incorporate AJAX technologies and provide end users with an enhanced, responsive user interface.

AJAX in Dundas Chart

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

• Internal and external toolbars.
• Context menus.
• Property dialogs.
• Scrolling.
• Zooming.

Additionally, events have been provided to build customized chart-related functionality. This allows you to update elements on the chart or the web page without having to refresh the entire page, giving you tremendous flexibility to:

• Create real-time charts.
• Pop up windows and display detailed chart information.
• Expand and collapse legends, chart areas, labels, and more.
• Custom position an annotation.
• Show or hide chart elements.

As well as these features, you can write your own methods to handle events on the client-side without post-back, using our existing architecture. Since the interactive features are AJAX based, they are supported across a wide variety of browsers as there are no requirements on the browser.

Click here to download a full evaluation copy of Dundas Chart for ASP.NET.

Zooming and Scrolling

Enabling zooming and scrolling is now easier than ever with Dundas Chart for ASP.NET. For example, the following line of code enables zooming on the X-axis:

Chart1.ChartAreas[0].CursorX.UserEnabled = true;

The Chart automatically enables and disables AJAX as necessary. Thus, if an interactive function such as zooming is enabled, the Chart will automatically take the necessary steps to enable AJAX so that your Chart works.

Figure 1: Interactively selecting an area of the Chart

Once an area has been selected, the Chart will automatically zoom in and display this area along with an interactive scrollbar.

Figure 2: Interactive scroll bars after zooming in

The Chart's interactive scrollbar improves the user's experience by creating a much more interactive and intuitive environment.

To see online samples of Zooming and Scrolling in action, click here.

User Interface

Dundas Chart for ASP.NET includes a fully customizable AJAX enabled toolbar.

Figure 3: Default Toolbar

The toolbar allows you to remove, change, and add commands to it as well as to the context menu. For example, to change the Properties command icon, the following code is used:

// Find the "Properties" command
Command cmdProperties =
chart1.UI.Commands.FindCommand(ChartCommandType.Properties);

// Change "Properties" command image, text and description
cmdProperties.ImageTranspColor = Color.White;
cmdProperties.Image = "face.bmp";
cmdProperties.Text = "Modified Properties...";
cmdProperties.Description = 
  "Modified description of the Properties command.";

Which results in the following toolbar:

Figure 4: Toolbar with the Properties command icon changed

Removing items from the toolbar is easy and possible as well. For example, to remove the Pie Chart type out of both the toolbar and the context menu, you would simply write the following code:

// Find the Pie Chart command button in the chart types
Command command = 
  chart1.UI.Commands.FindCommand(ChartCommandType.SelectChartPie);
// Set the visibility of this button to false
command.Visible = false;

If the Properties icon is clicked, an interactive dialog is displayed, allowing the user to change the properties of the chart.

Figure 5: Properties window

As well as the toolbar, the Chart also includes a context menu. The context menu is a menu which appears when the Chart is right-clicked. This menu is fully customizable, and allows for yet another way to actively interact with the Chart.

Figure 6: Context menu

Adding commands to the context menu is very similar to adding them to the toolbar, and can be done as follows:

// Add a user defined command into the collection
Command userCommand = new Command();
userCommand.CommandID = 300;
userCommand.Text = "User Command Group";
userCommand.Image = "UserCommandImage.gif";
Chart1.UI.Commands.Add(userCommand);

// Add a user defined command into the context menu item collection
Chart1.UI.ContextMenu.Items.Add(userCommand);

To see online samples of the interactive User Interface features in action, click here.

Client Callbacks

The new CallbackManager class within the Dundas Chart for ASP.NET exposes several members to make callbacks on any element within the Chart easy to implement. To setup Chart to use a callback, the GetCallbackEventReference function and the Callback event within the Chart are used.

protected void Page_Load(object sender, EventArgs e)
{
    foreach (Dundas.Charting.WebControl.DataPoint p 
                         in Chart1.Series[0].Points)
    {
        p.MapAreaAttributes = "onclick=\"" +
        Chart1.CallbackManager.GetCallbackEventReference("PointClick", 
                                                      "#VALY") + "\"";
    }
}

protected void Chart1_Callback(object sender, CommandEventArgs e)
{
    if (e.CommandName == "PointClick")
    {
        string argumentString = e.CommandArgument.ToString();

        this.Label1.Text = "Point's Y-value: " + argumentString;
        Chart1.CallbackManager.UpdateClientControl(this.Label1);
    }
}

The above sample sets a callback on each DataPoint using GetCallbackEventReference which returns the y-value of the point clicked (#VALY). The Chart's Callback event is automatically setup to receive all callbacks created by the Chart. To identify which element of the Chart was clicked, CommandName must be compared to the original string used for identification, which in this case is PointClick. Once identified as a callback invoked by a click on a DataPoint, the function UpdateClientControl is then used to inform the Chart to update Label1 on the client-side. Note that Label1 is a standard .NET Label.

Since this is all done in the server-side C# code, there is no need to code any JavaScript directly nor to have in-depth knowledge of how the callbacks work; the Chart takes care of all the details for you.

Conclusion

The Dundas Chart for ASP.NET's integrated AJAX functionality allows for developers to quickly make an interactive Chart. Interactivity on the web is becoming an important feature as users expect a more fluid experience without the delay of post-backs, and Dundas Software is dedicated to making this easy to do.

Click here to download a full evaluation copy of Dundas Chart for ASP.NET.

*Note: AJAX functionality is only available in Dundas Chart for ASP.NET v5.5, VS2005.

**Google, Amazon, Flickr, and Microsoft are registered trademarks of their respective organizations in the United States and/or other countries.