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:

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. 


About the Author

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.

Related Posts

Comments

Comments are disabled in preview mode.