One of the new controls released as part of the Q2 2012 release for ASP.NET AJAX is RadHtmlChart. We at Telerik think that RadHtmlChart is a powerful Data Visualization tool out of the box for your applications.

RadHtmlChart is built on top of HTML5 and renders the chart as SVG when viewed on modern browsers and  renders the chart as VML in older browsers. It provides a flexible data binding options and a remarkable performance.

In this post we will spend some time getting a first look at different chart types supported by this control. RadHtmlChart supports the following 6 chart types at the moment:

• Bar Chart
• Column Chart
• Line Chart
• Pie Chart
• Scatter Chart
• Scatter Line Chart

Let us take closer look at each of the above chart types.

Bar Chart:

The Bar Chart shows the data as horizontal bars whose lengths vary according to their value. These types of charts are useful for showing a comparison between several sets of data. Each series will be colored differently automatically for easier reading.

Bar Chart allows you as a developer to fully customize it according to your needs.

Column Chart:

Unlike Bar Chart, the Column Chart shows the data as vertical bars. The length of the bars vary according to their value. Similar to Bar Chart this chart is also useful for showing comparisons between several sets of data. Pretty much similar to Bar Chart and can be fully customized to your needs.

Line Chart:

Line Chart shows the data as a continuous line that pass through points defined by their item’s value. These types of charts are useful in showing trends over time and can be used to compare several sets of same data. Again this chart is also fully customizable to your needs.

Pie Chart:

The Pie Chart displays the data  as sectors from a circle. These types of charts are useful for displaying data as parts of a whole. This chart displays a single series of data in a two dimensional circle.

Scatter Chart:

The Scatter Chart as the name goes scatters points on X and Y axis. It shows the data as points defined by their item’s value. The X axis in Scatter Chart is also numerical and does not require items. Scatter Charts are useful in showing relations between different sets of data for example scientific or experimental results. Again this can be fully customized according to your requirements.

Scatter Line Chart:

The Scatter Line Chart is very similar to Scatter Chart. This also shows data as points defined by their item’s values. X axis is also numerical and does not require any items. Difference between Scatter and Scatter Line chart is that the subsequent points are connected with lines. Thus it will account for any missing values in a series. A very useful chart when comparing two sets of data which are different in nature or can be used in scenarios where you have 2 numerical axes on a line type chart. Similar to all other charts this can be customized too.

In this post I just wanted to cover the different charting options that is provided by the new RadHtmlChart for ASP.NET AJAX. If you have a charting requirements I think this will play well due to the fact that this follows HTML5 standards and pretty much all the new modern browsers have embraced HTML5 quite well. Hope you have got an idea of the different options available as part of this control and you are ready to try them out. I will be covering another series of post on how to create each of these report in a future post. The RadControls for ASP.NET AJAX is available for a free 30 day trial. So what you waiting for – go ahead, download and play with it.