Telerik blogs

RadHtmlChart began as a rather simple ASP.NET AJAX charting control with a lot of promises and expectations to fulfill. I do believe it has done a marvelous job so far and this is one of the reasons why I wanted to match its feature set to the one of the older and more mature charting control the RadControls for ASP.NET AJAX suite offers – RadChart. The other reason is that the previous comparison is, obviously, hopelessly outdated :). Right below you will find several tables that compare the main areas of the two charting controls – main concepts, different chart types, axis configuration and more.

Types of series

I decided to have the available chart types in a separate section, because most of the features below will apply to any of them. Also, because a short text introduction may help rest your eyes for all the tabular data. Hey, I didn’t say it was going to be short; we have been working really hard this past year to deliver all this functionality :)

 Chart type
 RadHtmlChart RadChart
 yes  yes
 yes  yes
 yes  yes
 yes  yes
 yes  yes
 yes  no
 yes  yes
 yes  yes
Point (scatter)
 yes  yes
Scatter line  yes  yes
Stacked bar
 yes  yes
Stacked column
 yes  yes
Bezier  no  yes
Gannt  no  yes
Spline  no  yes
Spline area  no  yes
Stacked area
 no  yes
Stacked area 100%
 no  yes
Stacked bar 100%
 no  yes
Stacked column 100%
 no  yes
Stacked spline area 100%
 no  yes

Feature comparison

Let’s get down to business. Scroll down and examine the tables I prepared for you. If the short explanations in the first column are not sufficient – most of the rows have links to back my words up in the second and third column. Dig in!

 RadHtmlChart  RadChart
uses latest web standards (SVG, CSS, JS)  yes  no
intuitive markup structure  yes  no
consistent skins with the rest of the suite  yes  no
rendering animations  yes  no
hover effects and interactive animations  yes  no
toggle series visibility when clicking on the legend  yes  can be done
client-side click events  yes  can be done
server-side click events  no  yes
client-side rendering  yes  no
client-side databinding  yes  no
databinding to various server datasources  yes  yes

* If you are wondering what “can be done” means – some additional code needs to be written in order to get the given effect/functionality

 Main Features
RadHtmlChart RadChart
negative values support  yes  yes
empty values support  yes  yes
sparkline charts*  October 2013
 can be done
visual designer  yes  yes
zooming  no  yes
scrolling  no  yes
drilldown  can be done
 can be done
automatic layout adjustment  yes  yes
export  can be done
marked zones  no  yes
grouping for stacked series  October 2013
built-in data grouping**  no  yes
exploding pie series items  yes  yes

* sparkline charts are more like a set of configurations for the chart – no axes or labels, smaller size. RadHtmlChart will make them for you with just one property
** I would advise grouping the datasource itself anyway, before passing it to the chart

 Appearance and styling
RadHtmlChart RadChart
detailed customization of the elements positions  no*  yes
detailed customization of the elements appearance  yes  yes
adjust color for an individual item  yes  yes****
modify pen styles  yes**
line series markers can be modified  yes  yes
control over bars width and overlap  no  yes
modify the legend items  yes***  yes
custom background images  can be done
formatting numbers in labels  yes  yes
formatting numbers in tooltips  yes  can be done

* positions can be chosen (e.g. bottom, left, right, top), but exact numbers like left=20px cannot be used
** for line series – line width and color, the line type cannot be changed (e.g. to dots, dashes)
*** only their appearance, the legend contents are generated from the series collection
**** only for bar series

 Labels and tooltips
RadHtmlChart RadChart
tooltips per item  yes*  can be done
automatic text wrapping  no  yes
multiline labels**  no  yes
intelligent labels that avoid overlap  no  yes

* for a databound RadHtmlChart the powerful ClientTemplates can be used
** there simply is no such thing as a line break in SVG text elements

 Axis related
RadHtmlChart RadChart
multiple y-axes  yes  yes*
datetime support  yes  yes**
scale breaks  no  yes
logarithmic axis  no  yes***
reversed axes  yes  can be done
control over the axis labels position according to the tick  no  yes
axis labels step  yes  yes
the first axis labels can be skipped  yes  no

* only one
** limited, requires custom code
*** only the y-axis

Accessibility and Internationalization RadHtmlChart RadChart
render the chart data as table can be done yes
localization can be done yes

Things that happened recently

Go through the following post from my colleague Stamo on the change in the way series items are created in RadHtmlChart programmatically, in case you missed it. A lot of work has been put into this control to help our new recruit measure up with the veterans.

What is next

You may have spotted a couple of rows read “October 2013” for RadHtmlChart. This comes to say that these features are nearly complete and they will definitely make it in the next major release.

If you want to see something else implemented – drop us a line below or post in our Feedback Portal.

Don’t forget to play around with the RadHtmlChart online demos and go through its online documentation, because there is a lot more information there than I can possibly squeeze into this post.

Marin Bratanov
About the Author

Marin Bratanov

Marin Bratanov was a Principal Technical Support Engineer in the Blazor division.


Comments are disabled in preview mode.