RadHtmlChart vs. RadChart – Which ASP.NET AJAX Control to Use for My Project?

You may have already seen it, but just in case – take a look at our new HTML5 charting control that was introduced with the Q2 2012 release of Telerik’s ASP.NET AJAX controls. Its online demos are the perfect starting point.

One may wonder what the benefits of having the new Chart over the current one are. This blog post will explain the main differences between them so that you can choose the one that fits your scenario better.

Update: For those already familiar with the controls - an updated comparison is available here: RadHtmlChart vs. RadChart, round 2. Which one is right for me?.

First and foremost – the new RadHtmlChart renders entirely on the client through JavaScript. This is its most important performance benefit – the server no longer has to execute the expensive operations related to creating the image. This performance improvement can be felt immediately on the page.

The client-side rendering allows the control to employ client-side databinding as well and you get it by using a simple server datasource straight out of the box. Moreover, only serialized data is sent to the client instead of entire images which also reduces the size of the content that needs to be transferred. To make things even better – data can be loaded on demand by calling a simple JavaScript function only when needed.

Closely related to the new rendering is the fact that the special charting handler in the web.config is no longer needed to stream the image.

Currently RadHtmlChart does not expose any export capabilities in contrast with RadChart. Still one can take the raw SVG and edit it in an external vector graphics editor.

We were striving to provide a modern, easy-to-use control and therefore we focused on creating a simpler and more intuitive markup structure. Individual aspects of the chart’s elements are usually controlled via inner tags that expose additional attribute properties to allow for fine-tuning of the functionality and appearance. If they are not needed a basic set of properties in the major tags controls the most important features without flooding the intellisense with a myriad of properties.

The new RadHtmlChart is still very new compared to RadChart which is a well-known and mature control. The younger sibling inevitably lacks some of the functionality that you are already used to. Zooming, scrolling, text wrapping, scale breaks, visual designer and some other features are not present, yet it makes up by automatically preparing its layout. RadChart requires that you turn on the AutoLayout property or manually configure each element in terms of size, paddings, borders, etc., while RadHtmlChart does this automatically.

A tabular version that compares some of the main features each control boasts is available below:

* can be achieved with a method (also to be released soon) that returns the SVG and a library that can export it. Look forward to a Code Library project
** an online demo is coming soon, together with the client-side events
*** an online demo shows how to implement the functionality

The available series in RadChart are also more than those RadHtmlChart offers, but we are planning to add more types in the coming releases. The main difference is that the different series are now clearly separated and easy to use, since each has its own tag:

In conclusion – RadHtmlChart is not a complete replacement for RadChart (yet), but it is going strongly towards that future.

Are there any features that you’d like to see in RadHtmlChart? Let us know, so that we can make a component that will best fit your needs.