Introducing the SeriesItems Collection in RadHtmlChart for ASP.NET AJAX

Intro

You might have already noticed the change in Telerik's ASP.NET Chart based on HTML5 in Q2 2013 Beta - the introduction of the new SeriesItems collection, which is used for creating series items that are specific for the chosen chart type. This property comes as a replacement for the obsolete Items collection. Follow through this blog post to find out how easy it is to do the transition to the new and improved SeriesItems!

Why did we introduce the SeriesItems collection?

There are many reasons why we introduced the new SeriesItems collection. The main points are:

• Making the configuration of the RadHtmlChart a lot easier.
• Creating series items which are specific for the corresponding series type – this means that you are able to set only the necessary data properties you want. As the obsolete Items collection is populated with only one series item type (SeriesItem), you should always ask yourself “Do I need this property in my case? Can I use the Open, Close, High and Low properties in a Bar chart or they are only applicable for a Candlestick chart?” Now that you have the new SeriesItems collection, you should not worry about answering these questions.

I want to switch to the new SeriesItems collection. How can I do that?

Using the SeriesItems collection in the markup.

In order to convert this example, all we need to do is to replace the obsolete Items property with the SeriesItems collection and use the new telerik:CategorySeriesItem item type. This results in:

So what’s the benefit after all? Well, the main difference is that the IntelliSense of the telerik:SeriesItem gives us a big list of  properties, which might not be applicable for the BarSeries’ items:

Fortunately, the telerik:CategorySeriesItem’s IntelliSense shows us only the necessary properties that we can use:

Populating the SeriesItems collection programmatically.

In order to create the series items programmatically, we should cast the type of the series explicitly to get access to its SeriesItems collection as it is specific for the corresponding series type:

Do you see anything new? That’s right, we can add a CategorySeriesItem (which is specific for the ColumnSeries) instead of the old SeriesItem, but we get something more as well–the ability to set the item’s background color. This is also a new feature introduced in the Q2 2013 Beta release, so go ahead - colorize you chart, colorize yourself!

In addition, if we want to add one more ColumnSeries, then we can go this way:

As you probably expected, the code snippet uses the previous approach of populating CategorySeriesItems. Finally, we simply add the ColumnSeries to the chart’s PlotArea and we are done! This is our final result:

The new series item types on the horizon

The SeriesItems collection allows you to set only the necessary series items for your RadHtmlChart. The full list of the new series items and the corresponding series type looks like this:

Introducing these series item types in your code is very intuitive so the transition to the new SeriesItems property takes as little effort as possible.

Migrate to the new SeriesItems collection!

We encourage you to take advantage of the new SeriesItems collection and start using it today.  As the Items property has become obsolete in Q2 2013 Beta, this is the best way to stay up-to-date with the latest functionality!