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.
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:
| Feature | RadHtmlChart | RadChart |
| Uses latest web standards (SVG, CSS, JavaScript) | yes | no |
| Client-side rendering | yes | no |
| Consistent skins with the rest of the suite | yes | no |
| User experience (series highlighting, styled tooltips, interactive animations) | yes | no |
| Distinct series configuration for each series type | yes | no |
| Easy set up | yes | no |
| Load-on-demand | yes | no |
| Negative values support | yes | yes |
| Empty (missing) values support | yes | yes |
| Aautomatic layout adjustment | yes | yes |
| Multiple y-axes | In TODO list | yes |
| Logarithmic axis | no | yes, y-axis |
| Scale breaks | no | yes |
| Zooming and scrolling | no | yes |
| Additional fine-tuning of the appearance | Coming soon | yes |
| Server-side click events | no | yes |
| Client-side events | In TODO list | yes |
| Visual designer | In TODO list | yes |
| Export | no (*) | yes |
| Drilldown | yes (**) | yes (***) |
* 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:
| Chart type | RadHtmlChart | RadChart |
| Bar | yes | yes |
| Stacked Bar | yes | yes |
| Stacked Bar 100% | no | yes |
| Column | yes | yes |
| Stacked Column | yes | yes |
| Stacked Column 100% | no | yes |
| Pie | yes | yes |
| Point (Scatter) | yes | yes |
| Scatter Line | yes | no |
| Line | yes | yes |
| Area | coming soon | yes |
| Stacked Area | no | yes |
| Stacked Area 100% | no | yes |
| Spline Area | no | yes |
| Stacked Spline Area 100% | no | yes |
| Bubble | in TODO list | yes |
| CandleStick | no | yes |
| Gannt | no | yes |
| Bezier | no | yes |
| Spline | no | yes |
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.