Step by Step Guide to work with RadHtmlChart for ASP.NET AJAX


In this post we will try to see how to work with a RadHtmlChart. We will go step by step in creating and using the RadHtmlChart in a web page. I will try to outline each piece that make up an RadHtmlChart and how to work with them. So if you are in need of using a RadHtmlChart in your pages, read through the following sections and follow along.



In order to follow along this blog post, you will need to have downloaded the RadControls for ASP.NET AJAX suite and installed it on your development machine/laptop. Here is the download link  to RadControls for ASP.NET AJAX Suite:


Create a Web Site Project:

First and foremost thing to do is to create a Web Site which will be our playground for this blog post. Once you install the RadControls for ASP.NET AJAX you will see Telerik project templates in Visual Studio New Project dialog. For this blog post I will be creating a “C# RadControls Web Site” project. Give it a name and keep the default settings in all of the dialog that comes up.


Adding RadHtmlChart to a page:

The RadControls Web Site project template when finishes the web site creation, will create a single web page namely Default.aspx. For the sake of simplicity I will just use this page to create the chart. There are two ways to add the chart on to the web page. First, you can drag it from the Toolbox on to the source. Secondly you can just type the tag on the source.


So I am going to type out the tag name and create the chart. Here is the code to instantiate the RadHtmlChart on a web page:

<telerik:RadHtmlChart runat="server" Width="800px" Height="500px" >

We can instantiate the RadHtmlChart from the telerik namespace. If you look at the web.config the telerik tagprefix is configured to be available on all the pages. Here is the code snippet:

    <add tagPrefix="telerik" namespace="Telerik.Web.UI" 

So if you now view the web page, you will see the following output:image

As you can see from the output, we get the a base for the chart. Now that we have a base, we will build up the chart one by one.

Chart Appearance:

Now that we have a chart coming up, lets give some facelift to the chart. We can control the appearance of the chart i.e. we can provide a background color to the chart. The RadHtmlChart provides Appearance property through which we can set the background color. The Appearance contains FillStyle property which exposes BackgroundColor attribute and we set the color to this attribute. Here is the code snippet:

    <FillStyle BackgroundColor="LightGray" />

I have set LightGray as the background color of the chart. If we now run the application and check the output, you will see the chart as below:


Chart Title:

Next thing to do is to set the chart title. For setting the title, chart exposes ChartTitle property. ChartTitle contains a text Property and you can provide the text you want to see on the chart. The appearance of the chart title can be configured through Appearance property of the chart title. Here is the code snippet:

<ChartTitle Text="Server CPU Load By Days">
    <Appearance Align="Center" BackgroundColor="White" Position="Top" />

Here is the snapshot of the chart after setting the title:


As you can see we have set the text and appearance of the title. Next we will take care of the legend.

Legend Appearance Settings:

Legend is nothing but a way to let the end user know what series belong to what context. So the way to style a legend is through Appearance property of Legend object. The appearance allows us to set the background color and position of the legend. Here is the code snippet for the same:

    <Appearance BackgroundColor="White" Position="Bottom" />

After adding the legend tag we cant see its effect immediately on the chart. That is because this comes into effect only when we provide the Y Axis items i.e. the main data points of the chart.

Plotarea Settings:

The plot area as the name goes is the area where the chart actually gets plotted. So We have the following options to play with respect to the play area:

  • Plotarea Appearance Settings
  • Plotarea X Axis Settings
  • Plotarea Y Axis Settings
  • Plotarea Series Settings

Lets look at the above points one by one.

Plotarea Appearance Settings:

The appearance of the plot area can be changed with Appearance property. Appearance property supports FillStyle child property where we can set the background color of the plot area. Here is the code snippet for the same:

      <FillStyle BackgroundColor="YellowGreen" />

Here is output after the plot area settings:


Plotarea X Axis Settings:

So far we have just prepared the chart area and the plot area. We haven’t yet defined any axis related information on the chart. The X Axis settings are set as a child element of Plotarea object. Let me show you the code snippet of the same and explain the different attributes that make up the X Axis setting. Here is the code snippet:

<XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" 
MinorTickType="Outside" Reversed="false">
        <telerik:AxisItem LabelText="Monday" />
        <telerik:AxisItem LabelText="Tuesday" />
        <telerik:AxisItem LabelText="Wednesday" />
        <telerik:AxisItem LabelText="Thursday" />
        <telerik:AxisItem LabelText="Friday" />
        <telerik:AxisItem LabelText="Saturday" />
        <telerik:AxisItem LabelText="Sunday" />
    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" />
    <MajorGridLines Color="#EFEFEF" Width="1" />
    <MinorGridLines Color="#F7F7F7" Width="1" />
    <TitleAppearance Position="Center" RotationAngle="0" Text="Days"/>

On the XAxis we can first set the Color of the X Axis line. I have set it to Black; this can be of any color. Then MajorTickType is the type of the ticks that mark the major grid lines and values can be None of Outside. Similarly MinorTickType is the type of the ticks that mark the minor grid lines and this can be either None or Outside. Reversed is a setting which is used to determine if the axis will be reversed i.e. low value in place of high value and vice versa. I have set it to false. Next I have given the items that make up the x axis. The Items collection takes a AxisItem object which conatins an attribute named Labeltext. So in my example I am setting the x axis to week day names.

Also notice that we have ability to configure the LabelsAppearance i.e. the x axis labels appearance. You can format the label text and also rotate the label using the RotationAngle attribute. The MajorGridLines allows us to configure the color and width of the major grid line and similarly the MinorGridLines property. We can also provide a title to the x axis and is done so by setting the TitleAppearance property. You can position the title through Position attribute or rotate the title using the RotationAngle and also the title text through Text attribute. In my example I have given the text as Days. Here is the output of the above code configuration:


Plotarea Y Axis Settings:

Similar to X axis setting the Y axis also can be configured and pretty much the same attribute structure is used. Here is the Y Axis setting I have done for my example. Take a look at the code snippet and I will explain the code in a moment:

<YAxis  Color="Black" MajorTickSize="1" MajorTickType="Outside"
        MinorTickSize="1" MinorTickType="Outside"
        MaxValue="100"  MinValue="0" Step="25">
    <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" />
    <MajorGridLines Color="#EFEFEF" Width="1" />
    <MinorGridLines Color="#F7F7F7" Width="1" />
    <TitleAppearance Position="Center" RotationAngle="0" 
                     Text="CPU Load" />

First, the Y axis setting is done on YAxis object of the RadHtmlChart. Pretty similar to X axis, we have the Color attribute of the Y axis line which can be configured. Then we set the MajorTickSize and MajorTickType. Similarly the MinorTickSize and MinorTickType is also set. The Min and Max value to be represented on the the Y Axis is set. We also can tell the increments in which the ticks have to be drawn through the Step attribute.

We can configure the Y axis labels through LabelsAppearance property. The MajorGridLines and MinorGridLines properties let us configure the color and width of the grid lines. The title of the Y axis is set through TitleAppearance property. Here is the output of the chart with the settings done so far:


Plotarea Series Settings:

So far we have set up the X & Y axis and configured them with respect to the axis title, major and minor grid lines. The main heart of the chart is the Series collection that Plotarea contains. Series collection is the property on which we define what kind of chart series we would like to plot. It can be a BarSeries or ColumnSeries or LineSeries etc etc. In this example I will be considering a simple example of Bar chart so we will see how to define a BarSeries.

We will need to add BarSeries object to Series collection. The BarSeries can be given a name using attribute Name. Then the actual values of the data points can be added to Items collection of BarSeries. The type of item to add is SeriesItem and it contains a attribute named YValue which needs to be filled with the data value. This is the data point which will be plotted on the chart. We can customize the labels and the tool tip of the bar series. Here is the code snippet for the same:

    <telerik:BarSeries Name="Week 1">
            <telerik:SeriesItem YValue="35" />
            <telerik:SeriesItem YValue="52" />
            <telerik:SeriesItem YValue="18" />
            <telerik:SeriesItem YValue="39" />
            <telerik:SeriesItem />
            <telerik:SeriesItem YValue="10" />
            <telerik:SeriesItem YValue="6" />
            <FillStyle BackgroundColor="Red" />
        <LabelsAppearance DataFormatString="{0}%" 
                          Position="OutsideEnd" />
        <TooltipsAppearance BackgroundColor="White" 
                            DataFormatString="{0}%" />

with the above code here is how our chart looks like now:


Notice that the axis have been shifted automatically because the series we said to plot was a BarSeries and Bar is always plotted as a horizontal line. Also notice the appearance of the legend at the bottom. This is because as soon as we provided a series with a name, the name of the series becomes the legend text.

What if I want to add another series to the chart. Simple, just add another BarSeries to the Series collection and the chart will pick up the second series and plot it along with the first one. Here is the snapshot of the same chart after I added another series:


One of the cool features of RadHtmlChart is the fact that it will render the chart as a SVG on modern browsers and as a VML on older browser. So here is a screenshot of the same chart zoomed in at around 200%. Check out the clarity of the various chart details:


Here is the entire source code of the RadHtmlChart we have done so far:


In this blog post I attempted to construct a RadHtmlChart piece by piece and show how easy it is to configure different aspects of the RadHtmlChart control. Things to take care are the Chart Appearance, Chart Title, Legend and Plotarea. Hope this gives you all a jump start in to working with the RadHtmlChart.


It is not necessary to hand code all of the above mentioned configuration settings. RadHtmlChart control has a rich visual designer support. Using that with couple of clicks you can easily set all the above talked configuration settings on a GUI. I will be writing a separate blog post on this.

The appearance of the chart and other aspects of the chart need not be set explicitly by choosing color which configuring rather RadHtmlChart ships with default 19 skins and you can just set the skin on the RadHtmlChart and that will take care of the color aspect in the chart. I will be covering this in a separate blog post.

The items for the series need not be hard coded as shown in this blog post. This was just an attempt to show that how things work. The RadHtmlChart supports 9 types of data sources and the chart can be bound to any of those data source. That way the items of the Y Axis will be bound at run time from the data source. I will be covering this in a future blog post

Till next time – Happy Coding !


What are Performance Testing and Load Testing?

See How Telerik Test Studio helps in Load Testing

See How Telerik Test Studio helps in Performance Testing


Performance Testing

Performance Testing is being performed to measure smoothness and readiness of the application. While creating an application the vital factors should be kept in mind are as follows

  • Speed of the application at any given condition
  • Response time of the application
  • How much resources being used by the application
  • How stable is the application at given time
  • Throughput of the application
  • For web application times spent in making HTTP calls at server and client etc.

Performance Testing is type of testing that test application on above listed criteria.


Performance Testing measures performance of the application. After measuring performance of the application it sets the base line for further testing. Performance testing is very important since cooperate prestige of the application or decision on the final release of application based on the analysis of the results produced by this test. Performance testing does not find any defect in the application. Often, we perform Performance testing on a stable system.

Performance Test finds performance issue in the

  • Database access
  • Network latency like time spent on the network
  • Time spent on reading or writing files on the disc
  • Time spent on making HTTP calls etc.

So we can summarize Performance testing


Load Testing

Load Testing determines user experience when application is under load. In Load Testing, we test application with maximum number of users or with the expected number of users in the production environment.



Load Testing determines upper limit of the application. Load testing simulates expected number of users from the production environment and tests the application with that number of users. When we exceed number of users to test the application much beyond expected number of users from production environment then we call testing as STRESS TESTING. In majority of the time we consider Stress Testing as Load Testing.

Purpose of Load Testing is to find defect in the application when application is running under maximum load. Some of the defects could be as follows

  • Memory leak
  • Buffer Overflow
  • Server failure
  • Network failure
  • Input devices reading failure
  • Writing on output device failure etc.

We can summarize that Load Testing tests application behavior and sustainability with the maximum number of user inputs.

Make sure you have enabled Test Studio Add-ons in Firefox before executing test

I was trying to execute a functional test in Firefox browser. For that I selected FF and clicked on Run to execute the functional test in Firefox browser.


However while executing the test, I got this message and Test Studio was kept waiting for the browser to respond.


After investigation I found that in Add-ons of Firefox, Telerik Testing Framework Add-ons was not enabled.


Make sure to enable both the Add-ons and you will be able to execute the function test in Firefox.


After enabling that you should able to execute a function test in Firefox browser.

Setting up environment for Load Testing in Test Studio

In this post we will follow step by step approach to setup environment for Load Testing in Test Studio. Very first go to Program ->Telerik ->Test Execution and open Configure Load Test Services


Next you will get dialog box to configure the services.


In this dialog box you need to make sure that all the services are started and most importantly make sure that you have given correct database instance name in the Reporter Database Connection setting


In above case kumar is the database server name running on my machine. So I provided instance name kumar\sqlexpress. You do not need to create TestStudioReportingDB database manually. Test Studio will create this database in given database server. After making sure all the information is provided correctly click on Ok to restart all the services.

Next open Test Studio and create a test of type Load Test. Very first you will get following screen


Click on Okay and from the ribbon click on Manage


Here you got an option to Add Controller and manage the number of Virtual users. To Add Controller click on Add Controller button


In Add Controller dialog box give the name of the computer or IP of the computer you want to set as controller and click on Test Connection. After successful connection click on the Add button to add a controller


On the successful adding of controller you need to set the number of Virtual Users for the Controller as following. We have added 258 virtual users in this controller


Next we need to set Controller and Reporter. Select the computer from drop down and click on the connect button.


After successful connect you can see green signals beside Controllers, Reporters and Agents.


All three green signals imply that environment for load testing in Test Studio has setup successfully. Now you can go to design and create ass cases to perform Load Testing

RadHtmlChart for ASP.NET AJAX – Server Side Hierarchy


In previous blog post, we looked at the element structure that makes up a RadHtmlChart. Now that was more from a client side i.e. a visual structure of what makes the chart. In this blog post we will take a look at what makes up the RadHtmlChart API i.e. the server side hierarchy.


Server Side API:

Pretty much all the Telerik RadControls enable you to customize them according to your needs & wants and so does RadHtmlChart. RadHtmlChart allows you to perform detailed customizations when you use it. Being a Service Side control, it offers a large set of properties. A deep hierarchy exist among these properties and it is this hierarchy that makes it possible to organize the control.

Visual Hierarchy:

Below diagram depicts the visual hierarchy of properties that RadHtmlChart control supports. You can keep this diagram handy and keep it as a reference when you want to set a particular property in the markup.


When you want to customize something in the RadHtmlChart you should pay attention to the inner most tags and their properties. For e.g. in order to customize the Appearance of a RadHtmlChart – You will be customizing the Appearance property and specifically the FillStyle child property that Appearance contains.


Knowing a controls hierarchy visually helps us to understand how it is organized. And also it becomes easy when we want to customize the control according to our needs and wants. Through this blog post I hope I was able to make you understand the RadHtmlChart control hierarchy.

Download Slides and Source Codes from Rad Controls for Windows Phone Webinar

Download Resources of the webinar from here

Thank you so much for attending Webinar: Telerik Tools for Ninja Developers: RadControls fot Windows Phone . I hope it was useful. If you have not done it yet then I strongly recommend you to download free trial and start playing around Rad Controls for Windows Phone. You will find more resources at below given links

Download trial from here

Demos on Rad Controls

Resources on Rad Controls for Windows Phone

Documentation on Rad Controls for Windows Phone

Forum for Rad Controls for Windows Phone

In webinar we started from downloading and installing of Rad Controls. We did walkthrough of all popular Rad Controls and discussed in detail about

  • RadConversationView control
  • RadCalendar control
  • RadSlideView control
  • RadAutoComplete control

Download Resources of the webinar from here

If you need more information and any assistance then please feel free to get connected with me at @debug_mode or send me mail on . Thanks once again for attending the webinar.

Appreciate Telerik products? Vote for us

2012 DevPro Community Choice Awards

Windows ITPro Community Choice Awards

Closing date of voting: September 28

Telerik has been working hard to help you in “DELIVERING MORE THAN EXPECTED “. Due to our work and love, we manage to create a semantic and purposeful relationship between you and us. Whether you are a developer, tester, IT pro or a manger our products help you to perform your task more effectively and quickly. We have products for all steps of development process. We are committed to make our products better in order to serve you better.


Today we have come to you with a request. If you love and appreciate our products then please vote for us. Vote for us in DevPro and ITPro community choice award. Our products are nominated in 25 different categories. Find details about award at links given below,

2012 DevPro Community Choice Awards

Windows ITPro Community Choice Awards


For DevPro our products are nominated in following categories



Best Add-In Product

Telerik JustCode

Best Charting and Graphics Tool Product

Telerik RadChart for ASP.NET AJAX

Best Component Set

Telerik DevCraft Ultimate

Best Content Management System


Best e-Commerce Package

Sitefinity Ecommerce

Best Email Control Product

Sitefinity Email Campaigns

Best Forum Application

Sitefinity Forums

Best Grid Product

Telerik RadGrid for ASP.NET AJAX

Best Memory Management/Profiling Product

Telerik JustTrace

Best Navigation Control Product

Telerik RadMenu for ASP.NET AJAX

Best Online Editor

Telerik RadEditor for ASP.NET AJAX

Best Printing/Reporting Tool

Telerik Reporting

Best Project Management/Defect Tracking Product

Telerik TeamPulse

Best Scheduling/Calendar Tool

Telerik RadScheduler for ASP.NET AJAX

Best SharePoint Development Tool

Telerik RadControls for ASP.NET AJAX

Best Silverlight Product

Telerik RadControls for Silverlight

Best Testing/QA Tool

Telerik Test Studio

Best Training Product or Book

Telerik Training

Best Utility

Telerik JustDecompile

Best Free Tool

Telerik JustDecompile

Best Vendor Support




For ITPro our products are nominated in following categories



Best Management Suite

Telerik TeamPulse

Best SharePoint Product

Telerik RadControls for ASP .NET AJAX

Best Free Tool

Telerik JustDecompile

Best Vendor Tech Support



We appreciate your support. Looking forward for prolong relationship with you. Thanks for voting for us.

WebMatrix 2, NuGet, Kendo UI Web = Awesome combination

In this blog post, we will look at how easy it is to get started with Kendo UI Web using WebMatrix as a development tool. we will look at what is this WebMatrix in brief and how you can play with Kendo UI Web widgets within WebMatrix.

image Kendo logo

What is WebMatrix:

WebMatirx is a free and lightweight web development tool. You can create, publish and maintain your website with ease right within WebMatrix. You can know more about WebMatrix here:


Installing WebMatrix:

WebMatrix can be installed by using the Web Platform Installer 4.0. Click the following button to install the WebMatrix. This will download an exe and launch the Web Platform Installer 4.0.


The Web Platform Installer will have an option to select WebMatrix 2 Release Candidate. Just select that and perform the installation.


Creating a Web Site using WebMatrix:

Once installed launch the WebMatrix from Start Menu. With WebMatrix we have 2 options to create a new web site.


We can use the Templates option to select from a pre defined 12 templates which includes ASP.NET, PHP, Node & HTML templates or we can use App gallery to download 61 open source application to start with.

SNAGHTML1d2bc8f2 SNAGHTML1d317d72

For this blog post, I will be creating an empty site which can be found under Templates option. Give a name to the new site and hit Next button.


WebMatrix will go ahead and get the pre requisite for the template we have selected, install and configure the site for us.


Once configured the site dashboard will look like below:


As you can see, the site is created in user’s Documents folder.

Integrating Kendo UI:

One of the new features added to WebMatrix 2 is the support of NuGet packages. From the web site dashboard, select the Files workbench located in the left hand bottom corner. This will show the file structure of the project. Also notice the change in the ribbon in this view. On the far right hand top corner you will see a familiar NuGet Package icon. Similar to the package addition experience in Visual Studio here also within WebMatrix we can perform pretty much the the same steps to get a package. So lets see how to get Kendo UI Web.


Click on the NuGet Gallery button. You will be presented with NuGet Gallery window as below:


In the search string enter “Kendouiweb” and wait for the results to come back. NuGet will find one package with that search string and show you that in the results pane. Select the package and click Install.


Next screen it will show information of the package. Click Install again on this screen.


At this point, WebMatrix will retrieve the package information from NuGet server. It will get the End User License Agreement if any and show you that. You have option to Accept or Reject the EULA. If you accept the agreement package will be installed otherwise installation will be skipped.


Note: At this moment it is important for you to know that you are downloading Kendo UI Web trial version and I urge you to read the trial license without fail. This trial download allows you a free trial of Kendo UI Web framework for 30 days.  You can click on the “View License Terms” to understand the EULA. Alternatively, you can visit the licensing FAQ here and here

Once you click on Accept, the package will be retrieved and installed in our application. Here is the folder structure after package installation.


As you can see from the above screen shot, Kendo UI framework related files have been downloaded and added to our application. The stylesheet’s are placed in Content folder and java script files are placed in Scripts folder. Next we will see how to work with Kendo UI Web Widgets

Create UI with Kendo:

Working with Kendo UI Web framework is 3 steps – Stylesheet reference, JavaScript reference and defining the HTML. So we will see them one by one.

Open the Default.cshtml and start by placing reference to Kendo UI Web stylesheets. Kendo UI comes with the following themes out of the box:

  • Black
  • Blue Opal
  • Default
  • Metro
  • Silver

Apart from the above theme stylesheets, we have a common stylesheet which is required for all other theme stylesheets to work. So here is the stylesheet reference code:

<link href="/Content/kendo/2012.2.710/kendo.common.min.css" 
rel="stylesheet" />
<link href="/Content/kendo/2012.2.710/kendo.default.min.css" 
rel="stylesheet" />

Next, we reference the javascript required to work with Kendo UI. Here is the script tag snippet:

<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>

Next we defined the HTML. In this example I am going to create a UI Widget called DateTimePicker i.e. a widget which allows users to select Date and as well as Time in a single control. In the body of the page declare a input tag, give it an id and set a value to any date and time value. Here is the code snippet:

<input id="datetimepicker" value="10/12/2012 01:00 PM"
style="width:200px;" />

Next, on document ready we will refer the input tag by its id and ask kendo to transform that into an DateTimePicker widget with just one line of code as below:

    $(document).ready(function() {
        // create DateTimePicker from input HTML element

We use JQuery to get a reference to the input tag by its id and then invoke a kendo function kendoDateTimePicker() which does the magic under the hood to transform the input tag to a date time control like below:

image image

Here is the complete HTML code snippet of Default.cshtml:

<!DOCTYPE html>

<html lang="en">
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <!-- Step 1 : StyleSheet Reference -->
        <link href="/Content/kendo/2012.2.710/kendo.common.min.css" 
            rel="stylesheet" />
        <link href="/Content/kendo/2012.2.710/kendo.default.min.css" 
            rel="stylesheet" />

        <!-- Step 2 : JavaScript Reference -->
        <script src="~/Scripts/jquery-1.7.2.min.js"></script>
        <script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
        <div id="example" class="k-content">
            <div id="to-do">
                    <input id="datetimepicker" value="10/12/2012 01:00 PM" 
                    style="width:200px;" />
            $(document).ready(function() {
                // create DateTimePicker from input HTML element

Here is the output of the code we just wrote:


Well that’s how easy it is to work with Kendo.


WebMatrix is a great tool which is free and is best suited for lightweight web development. Through this post we have now seen the webMatrix support for NuGet packages. We saw how easy it is to get going with Kendo UI Web controls right from the step of looking at the package to installing to coding our first example with Kendo – all done within WebMatrix.

More information about Kendo UI can be seen at You can view more demos of Kendo UI Web at the site itself. Here is a direct link to launch the demos –


You can also download Kendo UI directly from the site for a 30 day free trial. Here is the direct link for the download:


Hope this excites you to start coding with Kendo UI. Looking forward to your experiences with Kendo. Till next time – Happy Coding !.

Element Structure of RadHtmlChart for ASP.NET AJAX

In the blog post, we will take a look at the things which make up the RadHtmlChart pictorially. We will look at the different element which make up a chart and how they are placed visually.

Take a look at the following screenshot of a RadHtmlChart with all the elements tagged for better understanding:


As you can see above, all the elements which make up the RadHtmlChart is laid out and tagged very clearly so that you can make out what element goes where.

The elements are self explanatory in nature. I don’t think I need to explain anything more on this one Smile

We will see the server side control hierarchy visually in next post.