How to bind RadHtmlChart for ASP.NET AJAX to EntityDataSource control

Posted by Lohith

Introduction:

This is the 3rd blog post in the series on RadHtmlChart, our HTML5 based charting control for ASP.NET AJAX and its data binding options. So far we have seen data binding the RadHtmlChart control with SQLDataSource and LinqDataSource. In this blog post we will look at one more data binding option namely binding to EntityDataSource.

In this blog post we will focus on how to create a EDM or entity Data Model using Entity Framework, then adding the EntityDataSource control to the web page and finally binding it to the RadHtmlChart. For the rest of this post it is assumed that you have already installed our RadControls for ASP.NET AJAX suite and also our free ORM called OpenAccess.

About EntityDataSource:

EntityDataSource is a control that was made available during the days of Visual Studio 2008 SP1 i.e. .NET 3.5. According to MSDN EntityDataSource control is defines as:

A control which can be used together with a data-bound control to retrieve data from an EDM and to display, edit, and sort data on a Web page by using little or no code.

I wont be spending too much time on discussing EntityDataSource control in this blog post. I suggest you to go through the overview article from MSDN available here: http://msdn.microsoft.com/en-us/library/cc488502.aspx. The article will get you up to speed with the EntityDataSource control.

Getting Started:

To start with, lets create a “C# RadControls Web Application”. Open a Visual Studio and navigate to File > New Project > Telerik > Web and select “C# RadControls Web Application”. Give it a name & click finish so that VS can go ahead and create the project for us.

Figure 1: New Project Dialog

Adding ADO.NET Entity Data Model:

Entity Data Source control requires a ADO.NET Entity Data Model to work with. Entity Data Source can be configured to work with a Entity Data Context for reading, creating, updating and deleting data with little or no code from the web page. In order to create a EDM, we need to first add Entity Framework bits to our project. Use the Nuget Package Manager to add a package named EntityFramework.

Figure 2: Nuget Package Manager

One of the best practice is to create a Models folder at the root of the web application. So lets create a folder called Models. Right click on the Models folder and select Add > New Item. In the new item dialog, under Data category select “ADO.NET Entity Data Model”, give it a name and click Add.

Figure 3: Add New Item Dialog

Next we will be presented with a EDM Wizard. In the interest of the time, I will post my settings in the wizard as a serious of images below:

Figure 4: Entity Data Model Contents

Figure 5: Data Connection

Figure 6: Database objects

Once we finish with the wizard, NorthwindEntityDataModel.edmx is created in the Models folder. Double clicking that we will be presented with a visual designer with one object called Product placed. Remember we had selected only one Table for this demo called Product. Here is the screen shot of the EDMX designer:

Figure 7: EDMX Designer

Now that we have the EDM created, next is to add the Entity Data Source control to the page.

Adding Entity Data Source Control:

Open Default.aspx page and add EntityDataSource control to the page. You can either drag and drop the entity data source control from toolbar and you can write the declarative code by hand. I will drag and drop it from the toolbox onto the page. Use the Entity Data Source control smart tag (either from the ASPX page or from the designer) to configure data source settings. Here is my settings for the data source:

Figure 8: Object Context Configuration

Fig 9: Data Selection Configuration

When we finish the configuration wizard, following code will be generated by the Visual Studio

 
<asp:entitydatasource id="NorthwindEntityDataSource" runat="server" 
defaultcontainername="NORTHWINDEntities" connectionstring="name=NORTHWINDEntities" 
enableflattening="False" entitysetname="Products" 
entitytypefilter="Product" 
select="it.[ProductName], it.[UnitPrice]">
</asp:entitydatasource>

Note that we couldn’t add the top 10 keywords when configuring using the wizard and also there was no way to provide the orderby clause. In order to specify the top keyword just prepend “top(10)” to the Select text. EntityDataSource supports OrderBy property. So add the property and provide the value “it.UnitPrice DESC”. Here is the final code:

 
<asp:EntityDataSource ID="NorthwindEntityDataSource" runat="server"
                DefaultContainerName="NORTHWINDEntities"
                ConnectionString="name=NORTHWINDEntities"
                EnableFlattening="False"
                EntitySetName="Products"
                EntityTypeFilter="Product"
                Select="top(10) it.[ProductName], it.[UnitPrice]"
                OrderBy="it.UnitPrice DESC" >
            </asp:EntityDataSource>

Add RadHtmlChart:

You can add a RadHtmlChart either by dragging and dropping from the toolbox onto the page or by writing the declarative code on the page. I will be dragging and dropping the control on to the page. Following 3 things need to be taken care while data binding to a EntityDataSource. They are:

DataSourceID: Set the DataSourceID property of the RadHtmlChart to the name of the Entity Data Source you want to bind to.
DataFieldY: Set the DataFieldY property of the data series to the column name from which the data points have to plotted on the Y axis. I am plotting the UnitPrice on the Y axis so I will set the DataFieldY property to “UnitPrice”
DataLabelsfield: Set the DataFieldsLabel property of the XAxis to the column name from which we need the X axis data points to be plotted. I am having the products name on the XAxis so I will set the DataLabelsField property to “ProductName”.

Here is the complete code for the RadHtmlChart:

 
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" 
                DataSourceID="NorthwindEntityDataSource" 
                Height="600px" Width="1000px">
                <ChartTitle Text="Top 10 Products By Price">
                    <Appearance>
                        <TextStyle FontSize="16px"></TextStyle>
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Top">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries Name="UnitPrice" DataFieldY="UnitPrice">
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="ProductName">
                        <LabelsAppearance RotationAngle="90" />
                        <MinorGridLines Visible="false" />
                        <MajorGridLines Visible="false" />
                    </XAxis>
                    <YAxis>
                        <TitleAppearance Text="Price" />
                        <MinorGridLines Visible="false" />
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>

Here is the output of the chart:

Figure 10: RadHtmlChart Output

Summary:

In this post we looked at one more data binding technique with RadHtmlChart. We looked at EntityDataSource, how to configure entity data source and finally how to bind it with RadHtmlChart. With just 3 things to take care its very easy to bind the chart with entity data source. Hope this makes you excited to start working with RadHtmlChart. Do let us know your experience with the RadHtmlChart.

Till next time – Happy Coding !

How to bind LinqDataSource to RadHtmlChart for ASP.NET AJAX

Posted by Lohith

Introduction:

RadHtmlChart which is a charting component in RadControls for ASP.NET AJAX suite supports binding to variety of data sources. In this post we will look at a scenario where we will see how to bind the RadHtmlChart to LinqDataSource. So the rest of this post is about how to achieve databinding linq data source to RadHtmlChatrt. So lets get started. First we will look at creating a new project in Visual Studio, then we will add a Data Context to the project, then add a LinqDataSource & use the data context to return top 10 products from Northwind database and finally add RadHtmlChart and see how to use LinqDataSource as the source of the chart.

Creating New Project:

To get started, let’s first create a new “C# RadControls Web Application”. Note you need to have our RadControls for ASP.NET suite installed before you can do this. Open a Visual Studio, select File > New Project > Telerik > Web and C# RadControls Web Application.

Figure 1: New Project Dialog

Visual Studio will go ahead and create a Web Application. It will have a single page named Default.aspx. For the rest of the demo, we will work with this page.

Add Northwind Data Context:

In order to work with Linq Data Source, I will create a Entity Data Context using our OpenAccess ORM. OpenAccess is a free tool to download and you can use this in your production too without any licensing involved. First Add New Item to your project of type “Telerik OpenAccess Domain Model”. Give it a name and click Ok.

Figure 2: Add New Item dialog

You will next be presented with a wizard. Here is the wizard dialog screen shots and the settings I have done:

Figure 3: OpenAccess Model Type

Figure 4: Database Connection

Figure 5: Database Items – Products Table Selected

Figure 6: Naming Rules

Figure 7: Code Generation Settings

Once you click finish, the wizard will create a .rlinq file in your project. If you double click the rlinq file, you will get a visual designer. For this post I have selected only Products table. So you will see the products table visually laid out:

Figure 8: OpenAccess Data Model

Next we will see how to add a LinqDataSource and hook that with our data model to return the products data.

Add LinqDataSource:

In order to add LinqDataSource to your page, you can either drag and drop from the tool box or directly code the tag in the source file. What we will do for this demo is, we will handle a specific event called OnSelecting. In the event handler we will instantiate our OpenAccess data model and return the top 10 products ordered by UnitPrice in descending order. Here is the code which defines LinqDataSource control on the page:

<asp:LinqDataSource ID="LinqDataSource1"
        runat="server"
        OnSelecting="LinqDataSource1_Selecting">
    </asp:LinqDataSource>

Here is the event handler definition:

protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e)
    {
        NorthwindDataModel context = new NorthwindDataModel();
        e.Result = context.Products
                          .OrderByDescending(p => p.UnitPrice)
                          .Take(10);
    }

Now that we have the data model and the linq data source only thing left out is to add the RadHtmlChart and bind it to linq data source.

Add RadHtmlChart:

So now we are ready to add the chart. You can either drag & drop the chart from the toolbox on to the page or code the chart definition directly on the page. In this post I will just add the RadHtmlChart code and highlight the main points you need to take care while wiring it with LinqDataSource.

So here is my chart definition:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1"
                DataSourceID="LinqDataSource1" Width="1000" Height="700">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="UnitPrice" Name="Price">
                            <LabelsAppearance>
                                <TextStyle Bold="true" FontSize="15" Color="Orange" />
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false" />
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="ProductName">
                        <LabelsAppearance RotationAngle="90" />
                        <MajorGridLines Visible="false" />
                        <MinorGridLines Visible="false" />
                    </XAxis>
                    <YAxis>
                        <LabelsAppearance><TextStyle Bold="true" /></LabelsAppearance>
                        <TitleAppearance Text="Units" />
                        <MinorGridLines Visible="false" />
                    </YAxis>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
                <ChartTitle Text="Top 10 Products by Price">
                </ChartTitle>
            </telerik:RadHtmlChart>

Here are the things you need to do for wiring up the chart with LinqDataSource:

On the chart set the DataSourceID property to the ID of the LinqDataSource
When you define a series, set the DataFieldY property to a value “UnitPrice”. Here UnitPrice is the column in my data source which I want to bind and plot the points on Y axis
On the XAxis definition, set the DataLabelsField property to a value “ProductName”. Here ProductName is the column to which I want to bind and plot the XAxis points.

And that’s all its there to wiring up the RadHtmlChart to LinqDataSource. Now build the project and run to see the output. Here is a screenshot of the chart we just created:

Figure 9: RadHtmlChart output

Summary:

In this blog post I wanted to show one of the data binding option that RadHtmlChart supports – namely LinqDataSource. As we have seen it is very easy to create a LinqDataSource and bind it to RadHtmlChart. We just need to take care of 3 things to make the chart work with the LinqDataSource. I hope this blog post gives you a head start if you are working with LinqDataSource and the RadHtmlChart. Do let us know your feedback/comment you may have on this post.

Till next time – Happy Coding.

How to Bind RadHtmlChart for ASP.NET AJAX to SQL Data Source Control

Posted by Lohith

Introduction:

RadControls for ASP.NET AJAX contains a HTML5 powered charting control known as RadHtmlChart. This charting component outputs SVG and is completely client side rendering of the chart. The charting component will output SVG on modern browsers and falls back to VML when running in older browsers. When it comes to data binding the chart, it supports a wide range of data binding mechanism starting from simple array to your custom object collection. In this blog post we will take a look at one of the data binding mechanism namely binding to SqlDataSource.

Pre-Requisites:

In order to follow this post, you will need our RadControls for ASP.NET AJAX suite. You can download a 30 day free trial from http://www.telerik.com/products/aspnet-ajax.aspx. So download the trial and install it on your system. If you already have a licensed version installed that’s even better. Following sections assume that you have done this.

Getting Started:

First lets create a “C# RadControls Web Application”. Fire up a Visual Studio and do the customary File > New Project action. In the new project dialog, you will see Telerik as one of the installed template. Expand Telerik and you will see Web as one of the nodes. Select Web and you will presented with different project templates. Select “C# RadControls Web Application”. Give your project a name and click Ok.

Fig 1: New Project Dialog

You will be presented with 2 more dialogs to select theme and web settings. Select appropriately and finish the wizard. Visual Studio will go ahead and create the project.

Adding SQL Data Source to the page:

The project template will add all references required for Telerik ASP.NET Ajax controls, necessary updates to Web.config and create a Default.aspx page. We will be working with Default.aspx for this blog post. Since we need to bind the chart to a SqlDataSource control, lets go ahead and add one to the page. You can configure the data source using the smart tag option in the ASPX page or just go to design and select the smart tag on the control.

Fig 2: Configuring SqlDataSource

Clicking on Configure Data Source, will open “Choose Your Data Connection” dialog. So go ahead and set up your connection for the data source. For this example I will be using Northwind as the database and Products table. Once you pass the connection settings dialog, you will be required to configure the select statement. For this demo I will just do a select of top 10 products by their price in descending order. Here is how my test query looks like:

Fig 3: Test Query Dialog

Click Finish to finish configuring the SqlDataSource. Next we will see how to work with RadHtmlChart.

Adding RadHtmlChart to the page:

From the Toolbox, drag and drop a RadHtmlChart on the page. In the ASPX page, select the smart tag on the RadHtmlChart. It will open a configuration window. We will configure the RadHtmlChart now to work with SqlDataSource control.

Fig 4: RadHtmlChart Smart Tasks

Select the DataSource from the Choose Data Source drop down.Then click on the Open Configuration Wizard. You will see the following Configuration Wizard pop up:

Fig 5: RadHtmlChart Configuration Wizard

We will go through the configuration one by one.

Chart Type:

For this blog post I will be going with Column chart. So in the Type tab, select Column Chart.

Fig 6: Chart Type selection

Data:

Now to let the chart know where to read the data from, select the Data tab. The data source would have been defaulted to the sql data source we had added in previous section. Now we need to add a series to the chart. Click on the “+” button next to the Series section. Provide Name, AxisName, Type of the series and what field in the data source should the Y axis data point be read from. For this example UnitPrice will be my Y axis data point. I will be plotting the price on the Y axis. Here is how my settings look like:

Fig 7: Series configuration

X Axis:

Now we need to configure how our X axis will look like. If you want to customize the Min Value, Max Value, Step and Axis Crossing Value or you want to hard code the X axis items, you can do so in the XAxis tab.

Fig 8: XAxis Configuration

Once done with the settings click Apply. Now we need to show the product name as the X axis data point. For that we will need to get back to the code, add a property called “DataLabelsField” and value of this property will be the column name from the data source which will contain the data points. In our case this will be ProductName column. Here is the code:

<XAxis DataLabelsField="ProductName"></XAxis>

Y Axis:

Similar to XAxis you can customize how you want the YAxis to look. The YAxis tab provides you options to customize the axis and also allows you to add additional Y Axis to the chart.

Fig 9: YAxis Configuration

In our current example, we don’t have to do anything here. The Min and Max value and Step will be calculated automatically based on the data source.

Legend, Title:

Last but not the least, we can customize how the Legend and the Title of chart should look like. Click on the Legend/Title tab and provide the appropriate data. Here is my settings:

Fig 10: Legend, Title Configuration

Click Ok when done. This will generate the following code in the ASPX:

<telerik:RadHtmlChart ID="RadHtmlChart1"
runat="server" DataSourceID="SqlDataSource1">
 <ChartTitle Text="Top 10 Products By Price">
 <Appearance>
 <TextStyle FontSize="16px"></TextStyle>
 </Appearance>
 </ChartTitle>
 <Legend>
 <Appearance Position="Top"></Appearance>
 </Legend>
 <PlotArea>
 <XAxis DataLabelsField="ProductName">
 </XAxis>
 <YAxis Name="Price">
 </YAxis>
 <Series>
 <telerik:ColumnSeries Name="Price"
 DataFieldY="UnitPrice" />
 </Series>
 </PlotArea>
 </telerik:RadHtmlChart>

So we are now done with the RadHtmlChart configuration. We have configured it to work with the Sql Data Source we added in the previous section. We have set what chart we want and configured the series, XAxis, YAxis and Legend/Title. Its time now to look at the output.

Output:

Build and run the project. It should open up a browser and show you the following chart output:

Fig 11: RadHtmlChart output

Conclusion:

In this post we saw how easy it is to configure RadHtmlChart to work with Sql Data Source. Also we looked at the RadHtmlChart configuration wizard which makes it super easy to configure the chart with various settings and best of all you don’t have to write any code. The configuration wizard gives you a GUI and when you are done with the settings, it will generate the code for you. I say this is a productivity gainer. Let us know how you are using RadHtmlChart in your projects. We will love to hear your feedback or suggestions. So do drop in a line in the comments.

Till next time, Happy Coding.

RadHtmlChart for ASP.NET AJAX – Server Side Hierarchy

Posted by Lohith

Introduction:

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.

Conclusion:

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.

Element Structure of RadHtmlChart for ASP.NET AJAX

Posted by Lohith

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:

htmlchart-elements-structure

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.

Chart Types supported by RadHtmlChart for ASP.NET AJAX

Posted by Lohith

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.

RadControls for Web – New controls in Q2 release

Posted by Lohith

We at Telerik shipped our second release of the year which we call it as Q2 release, in June 2012. In this post we will look at what are the new controls available under RadControls for Web which includes ASP.NET AJAX, ASP.NET MVC and Silverlight.

RadControls for Web consists of the following suites:

RadControls for ASP.NET AJAX
RadControls for ASP.NET MVC
RadControls for Silverlight

So lets look at new controls added in Q2 release one by one.

RadControls for ASP.NET AJAX:

This suite is a complete ASP.NET AJAX development toolset. RadControls for ASP.NET AJAX contains over 70 controls and helps in rapid component based UI development. In Q2 2012 release we have added 3 new controls. They are:

HTML5 Chart
BarCode
ODataDataSource

HTML Chart:

HTML5 Chart control also known as RadHtmlChart provides a powerful charting mechanism. The charts are based on SVG format for modern browsers and VML for older browsers. Here are some of the salient features of HTML5 Chart control:

Client Side Rendering – Rendered entirely through JavaScript and hence reduces the amount of work to be done by Server. Only serialized data is sent to the client which boosts the performance of the application.
Control Data Loading – You have the full control over the data loading process. Load the data after page is loaded or invoke a callback via JavaScript.
Customize Appearance – The markup structure exposes all properties necessary to customize the appearance.

See Demos

Barcode:

Barcode control enables you to quickly and easily create industry standard barcode formats to your applications. Here again the barcode is generated in SVG format for modern browsers and VML format for older browsers.

See Demos

ODataDataSource:

ODataDataSource control enables you to codelessly bind your controls to OData Services.This control supports a Visual Studio design time wizard to query any Odata service supporting JSON and XML. So you can visualize the data even before you binding it. As said earlier this allows you to codelessly bind the odata services to controls like TreeView, Grid etc,

See Demos

RadControls for ASP.NET MVC:

With Q2 release we no longer promote the ASP.NET MVC extensions, rather we advice you to migrate to our new breed of UI framework known as Kendo UI which composes of Web, DataVisualization and Mobile contols. Kendo UI is the new platform for HTML5/JavaScript development. Kendo UI Web controls also comes with server side wrappers for ASP.NET MVC for easier development. You can know more about Kendo UI at www.kendoui.com.

In Q2 release 1 new widget was added to Kendo UI Web suite.

DateTimePicker:

As the name goes this is a UI widget which allows you to select Date as well as time within in one single widget/control. If your scenario requires for a Date and Time to be shown, this control can be used instead of two controls – one to show Date and another to show Time.

See Demos

RadControls for Silverlight:

This suite is one of the industry’s leading suite of Silverlight controls for today’s Line Of Business (LOB) application development. RadControls for Silverlight helps you to create engaging and interactive user experiences for Web and Desktop. This suite contains over 65 controls which will surely cut your development time.

In Q2 release, there were 2 new controls added to the suite. They are:

RadHeatMap
RadGanttView

RadHeatMap:

Heat Map control is a matrix like control that uses color to encode values along two axes. Some of the features of this controls are:

Interactive tool tips – provides context aware detail on the heat map
Colorizers – allows you to use different colors to encode values
Super fast rendering – uses immediate mode bitmap based rendering and proprietary hit-testing and lay outing to render vast amount of visual detail without slowing down and sacrificing the interactivity

See Demos

RadGanttView:

This control as the name goes, allows you to visualize and manage hierarchical project data as a Gantt Chart. This has the capability to visualize different types of project data such as Tasks, Milestones, Summaries, and also the relations between them. You can highlight different types of important items like late or critical tasks. Another feature of the control is the ability to import data from your MS project and visualize it in a friendly way.

See Demos

Summary:

In this post we looked at new controls released as part of the Q2 Release under RadControls for Web suite. We looked at 3 core technologies under Web i.e. ASP.NET AJAX, ASP.NET MVC and Silverlight – and looked at the new controls available under each of those suites, Hope you are excited to try these new controls yourselves. Don’t forget that all these controls suites are available for free 30 Day trial downloads.

Helping Ninja Technologists

Developer Experiences powered by GTM Catalyst

RadHtmlChart

How to bind RadHtmlChart for ASP.NET AJAX to EntityDataSource control

How to bind LinqDataSource to RadHtmlChart for ASP.NET AJAX

How to Bind RadHtmlChart for ASP.NET AJAX to SQL Data Source Control

RadHtmlChart for ASP.NET AJAX – Server Side Hierarchy

Element Structure of RadHtmlChart for ASP.NET AJAX

Chart Types supported by RadHtmlChart for ASP.NET AJAX

RadControls for Web – New controls in Q2 release