3 Easy Steps to Replace Existing Charts with Telerik’s HTML5-based ASP.NET Chart

In the past year we put conscious effort into enhancing the data visualization components offered in Telerik’s control suite for ASP.NET AJAX development and we thought it was about time we started showcasing them in the Sales Dashboard sample application.

Since this was an interesting experience some of you might also be going through, we decided to share our know-how. This blog post is going to walk you through the 3 steps it takes to migrate from the existing charting component in the Sales Dashboard demo to HTML5 data visualization.     

The application at hand and the plan

The Sales Dashboard sample application has been around for quite a while and has always been showcasing that using together Telerik RadControls even from different technologies could bring great user experience with little effort. The application uses Northwind data to visually present sale representatives and how well they are performing. You could go through detailed information on the orders, sales in different years and the countries that orders have been made for each individual representative.

Step #1: Remove the code of the original charting component and all dependencies

Go to your solution and delete all assemblies and references in the solution explorer to the old chart, because you won’t need them anymore.

The next step is removing the code that initialized and loaded the Silverlight application on the page. In our case it is just 13 lines of code.

Step #2: Define RadHtmlChart controls and set their styles

The fun comes when you start playing with Telerik’s HTML5-based ASP.NET Chart control, RadHtmlChart. The component features rich functionality and could be styled easily the same way as the RadChart. The definition for the required DonutSeries is just couple of lines which utilizes client templates, data formatting and appearance settings.

Take a quick look at the code to get a general idea of how little it takes to achieve such rich user experience.

Step #3: DataBind using existing database data

Binding RadHtmlChart is very specific to each individual case. However, looking at the code below it is easy to notice how convenient and simple the chart programmatic creation is. And that is not all. The data visualization view packs both RadHtmlChart and RadGauge. The one liner at the end of the code snippet below shows how to set the value of Telerik’s ASP.NET Gauge control.

Benefits

With these three easy steps we have been able to utilize the latest and greatest HTML Charts for ASP.NET by taking advantage of the fast performance and small HTML footprint resulting in great end user experience.  It’s always best if you see it for yourself so go to the Sales Dashboard application in the link here and take a look at the performance of the charts and what that brings to the user experience.

It’s your turn

Migrating existing charting applications or creating a brand new data visualization solution from scratch is made easy with the help of Telerik’s HtmlChart and Gauge controls. Check out the cool demos and if you have any questions do not hesitate to contact our support team.