ASP.NET AJAX

Chart Types supported by RadHtmlChart for ASP.NET AJAX

Posted by

0

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.

Charts overview

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.

htmlchart-barchart-simple-example

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.

htmlchart-columnchart-simple-example

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.

htmlchart-linechart-simple-example

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.

htmlchart-piechart-simple-example

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.

htmlchart-scatterchart-simple-example

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.

htmlchart-scatterlinechart-simple-example

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.

image

Advertisement

RadControls for Web – New controls in Q2 release

Posted by

0

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

image

HTML Chart:

HTML5 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.

image image

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

HeatMap

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.

image

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.

RadControls for Web – And you ask why?

Posted by

2

Overview:

In this post, we will quickly look at the factors that will compel you to consider Telerik RadControls as the framework for all your User Interface layers in your projects. So buckle up and let’s go for a ride with Telerik RadControls.


RadControls Defined:

Rad or RAD – stands for Rapid Application Development and RadControls are nothing but controls which help you in Rapid Application Development. Telerik offers over 10 years of aggressive development which includes a set course of 3 releases per year & the Service Packs, has been able to come out with industry leading UI component suite for Microsoft ASP.NET technology which includes AJAX, MVC and Silverlight. There are nearly 175+ controls under the combined umbrella of   AJAX, MVC and Silverlight. The controls themselves, enhance the framework provided controls with a lot of out of the box features. For e.g. If you consider the RadGridView we complement the framework Grid with features such as Filtering, Grouping, Sorting, Paging and export capability. Imagine if you had the onus of writing the paging and export all by yourself. I have been a programmer for close to a decade and I would say it will be like reinventing the wheel. So, with RadControls you just have to worry about your business need and the control complements your requirement with out of the box features.

image     Telerik Extensions for ASP.NET MVC   image

RadControls Decision Factors:

Having known about RadControls and what they are, next question will be – Why should you choose RadControls? Lets quickly run through some of the check list before you decide:

  • You want to develop a professional web application.
  • You want to deliver your application fast to the Client/Market.
  • You want to build apps which adhere to certain standards like Accessibility standards.
  • You want to meet your deadlines and budgets.
  • You want to cut down your development cost and development time.
  • You want to rapidly provide custom software for ever changing needs of clients.
  • You want to quickly create working prototypes.

If you have answered Yes to the above checklist – then – RadControls is what you need. RadControls will help you to achieve all of the above mentioned points in the check list. So I highly recommend you to download a trial and test drive the following RadControls:

RadControls and Developers:

Developer friendliness is one of the important factors for any UI component vendor. Keeping the developers in mind helps Telerik adopt the highest degree of friendliness when it comes to the UI controls. There are three main factors which we think makes a developers life easy when working with our RadControls. They are:

  • Visual Studio Integration – All our suites extend Visual Studio by integrating seamlessly with the Visual Studio toolbox. This allows developers to use the controls quickly by simply dragging and dropping on the working area. Currently we have support for Visual Studio 2012 as well.

 

  • Design Time Wizards – When working with the controls in design time, RadControls provide wizard interfaces on all controls to easily configure the features you need.

 

 

  • Familiarity – Whole of the RadControls framework mirrors the Microsoft .NET framework. So as a developer if you understand the .NET framework, RadControls is no different. So the learning curve is very minimal and you will be able to get on with it in a jiffy.

 

RadControls and Themes:

One of the deciding factors we looked at earlier was that of developing a professional looking web application. What we needed to make our application look like a professional app is style sheets. Be it Web app or Silverlight app, styles play a pivotal role in the look and feel of any User Interface. Most of the developers are not designers – which includes me too :). So the RadControls suite comes to the rescue by way of packaging what we call as Themes i.e. a complete style sheet which adheres to one common color scheme across the controls. The Telerik RadControls suite comes bundled with close to 25+ themes under the combined umbrella of ASP.NET AJAX, MVC and Silverlight. So out of the box we ship 25+ themes to use in your production level application. If that is not enough you can always create your own theme and embed the same in your application. ASP.NET AJAX and MVC suites provide a Visual Theme Builder which can be used to create your custom themes. Here are the links for Visual Theme Builder:

Summary:

Telerik RadControls for Web provides a lot of benefit to enterprises in not only speeding up the development life-cycle but also cuts down on the cost and time of development. It also is developer friendly with seamless Visual Studio integration and design time wizard to help code faster. As said in the previous sections, there are nearly 175+ controls to play around in the area of AJAX, MVC and Silverlight. If that doesn’t excite you then I don’t know what will :). Download the 30 day trial we have and give it a try. I bet you will fall in love with the RadControls.

Till next time – Happy Coding !!!