Introduction to Telerik RadControls for Metro (Bar Chart)

Telerik is one of the lead providers of .NET components and development tools. At work, my group utilizes a lot of Telerik products, so when I learned that Telerik is jumping into metro style application bandwagon, I would like to try it.

The first component that I look at today is a chart component. When we talk about Line-Of-Business (LOB) application, besides grids and forms, charts are other type of controls that are used often. WinRT (either XAML or HTML) provides vector-based drawing API that we can used to draw a chart, but it is better to be able to utilize reusable components for common charts like bar, pie, or line charts.

In this post, I will create a simple bar chart using Telerik chart control for metro in XAML. As always, I will reuse my Person and SamplePeople classes that I used in other posts about Windows 8. In this example, I will plot number of my customers by gender in each state using bar chart.

First, let’s download Telerik RadControls for Metro beta here.

image

After I create a C#/XAML blank app and add references to Telerik libraries as shown in the above screenshot, I start by adding telerik namespace and a RadCartesianChart control which I can use to create several type of charts including bar chart. RadCartesianChart control uses the Cartesian coordinate system to plot series of data within X and Y axes.

image

Here is the code in Main.xaml

        <telerik:RadCartesianChart x:Name="radChart" Grid.Row="1" Margin="120 0 0 0" PaletteName="DefaultDark">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>            
        </telerik:RadCartesianChart>    

Inside the RadCartesianControl, I define two axes, a horizontal categorical axis which will arrange the plotted data points in defined categories (e.g., name of state) and linear vertical axis which uses the numeric value (e.g., number of customers in each state).

In the code-behind, I get the sample people and group them by state, so I can count them. Then I create two bar series, one for male and another for female, and bind category to Name (StateData.Name) and value to Count (StateData.Count). I also need to specify the series combined mode. There are four modes, None, Cluster, Stack, and Stack100. Cluster makes the series combined next to each other while stack forms stacks and so on.

Here is the code-behind in Main.xaml.cs

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            SamplePeople.BuildSamplePeople();

            AddSeries("Male");
            AddSeries("Female");
        }

        private void AddSeries(string gender)
        {
            var peopleByStates = from p in SamplePeople.People
                                 where p.Gender == gender
                               group p by p.ResidenceState into g
                               orderby g.Key
                               select new { State = g.Key, People = g };
           
            var series = new BarSeries();
            series.CombineMode = Telerik.Charting.ChartSeriesCombineMode.Stack;
            series.CategoryBinding = new PropertyNameDataPointBinding("Name");
            series.ValueBinding = new PropertyNameDataPointBinding("Count");
            

            var itemSources = new List<object>();
            foreach (var state in peopleByStates)
            {
                var item = new StateData { Name = state.State, Count = state.People.Count() };
                itemSources.Add(item);
            }

            series.ItemsSource = itemSources;
            radChart.Series.Add(series);
        }
    }

    public class StateData
    {
        public double Count { get; set; }
        public string Name { get; set; }
    }    

Let’s run the app and see how it looks. The first screenshot is the bar chart in Cluster mode and the second one is the bar chart in stack mode.

image

image

As you see, just couple lines of code, I now have nice looking bar chart in my app. There are a lot more components in the beta download including, DatePicker, Slider, DropDownList, and other chart types like pie chart and so on. I am going to post about them in the future. As of now, enjoy coding!

Advertisements

4 thoughts on “Introduction to Telerik RadControls for Metro (Bar Chart)

  1. Pingback: Introduction to Telerik RadControls for Metro (Bar Chart)

  2. Pingback: Introduction to Telerik RadControls for Metro (Pie Chart) | Cyan By Fuchsia

  3. We absolutely love your blog and find many of your post’s to be exactly I’m looking for.

    Would you offer guest writers to write content available for you?

    I wouldn’t mind composing a post or elaborating on some of the subjects you write with regards to here. Again, awesome weblog!

  4. Pingback: Playing with CalendarControl from Mindscape: Part 1 | Cyan By Fuchsia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s