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?.
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:
Consistent skins with the rest of the suite
User experience (series highlighting, styled tooltips, interactive animations)
Distinct series configuration for each series type
Easy set up
Negative values support
Empty (missing) values support
Aautomatic layout adjustment
In TODO list
Zooming and scrolling
Additional fine-tuning of the appearance
Server-side click events
* 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:
Stacked Bar 100%
Stacked Column 100%
Stacked Area 100%
Stacked Spline Area 100%
in TODO list
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.
Marin Bratanov is a Principal Technical Support Engineer in the ASP.NET AJAX division. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and GooglePlus.