MVVM in stacked bar chart

[Melvin]

Hi,

I am a newbie in silverlight and also RAD controls. I am currently doing a project whereby the data will be displayed in stacked bar chart.

This is the summary of the things to be displayed:
Xaxis: Refers to "Service Name" (eg: Service A, B, C...etc)
YAxis: Refers to "Revenue"
Bar: Each bar comprises of few segments, namely "Country" (eg: Malaysia, Japan, Korea, etc)

I found a good reference at:

http://demos.telerik.com/silverlight/#Chart/Gallery/StackedBar
http://demos.telerik.com/silverlight/#Chart/Gallery3D/StackedBar 
My only concern is that the code requires the number of series to be specified explicitly. The reason is that, the data I acquired from the database may change (might include new "Service Name" or even "Country" items) which requires code change.

I am not sure if there is a way (using binding) that I can use in RAD controls which allows data to be dynamically displayed whenever there is a change in database items?

In other words, even in future a new item is added in "Country", the chart display will automatically have additional segment added in each bar in the stacked bar chart without changing the xaml or cs files (I need to know how I can bind the items without specifying collection index etc explicitly).

I need some advice on this. Thanks!

[Bartholomeo Rocca]

Hello Melvin,

Recent versions of RadChart allow you to define multiple datasources via the SeriesMapping.ItemsSource property (instead of using the approach with RadChart.ItemsSource and nested collection with CollectionIndex) so you can define the SeriesMappingCollection in your ViewModel and bind the RadChart.SeriesMappings property directly to the property in your ViewModel.


Greetings,
Bart.

[Melvin]

Hi Bart,

Thanks a lot for your reply. I am now trying to work out with the stacked bar chart. It works if I have static data to be pumped to the bar chart. As for your suggestion, I would appreciate if you could provide me some examples or code snippets.

Again, thanks for your help.

Thanks and regards,
Melvin Liew

[Bartholomeo Rocca]

Hello Melvin,

Here is a sample code snippet that demonstrates how to declare the mappings in the viewmodel and bind them to the chart instance in XAML:

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:SilverlightApplication1"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.DataContext>
        <local:ViewModel />
    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadChart x:Name="RadChart1" SeriesMappings="{Binding Mappings}" />
    </Grid>
</UserControl>

C#

using System.Collections.Generic;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class ViewModel : ViewModelBase
    {
        private SeriesMappingCollection mappings;

        public ViewModel()
        {
            var temp = new SeriesMappingCollection();

            var sm = new SeriesMapping();
            sm.SeriesDefinition = new StackedBarSeriesDefinition();
            sm.ItemMappings.Add(new ItemMapping("Category", DataPointMember.XCategory));
            sm.ItemMappings.Add(new ItemMapping("Data", DataPointMember.YValue));
            sm.ItemsSource = new List<ChartData>()
            {
                new ChartData("C1", 1),
                new ChartData("C2", 5),
                new ChartData("C3", 7)
            };

            temp.Add(sm);

            var sm2 = new SeriesMapping();
            sm2.SeriesDefinition = new StackedBarSeriesDefinition();
            sm2.ItemMappings.Add(new ItemMapping("Category", DataPointMember.XCategory));
            sm2.ItemMappings.Add(new ItemMapping("Data", DataPointMember.YValue));
            sm2.ItemsSource = new List<ChartData>()
            {
                new ChartData("C1", 10),
                new ChartData("C2", 7),
                new ChartData("C3", 18)
            };

            temp.Add(sm2);

            this.Mappings = temp;
        }

        public SeriesMappingCollection Mappings
        {
            get
            {
                return this.mappings;
            }
            set
            {
                if (this.mappings != value)
                {
                    this.mappings = value;
                    this.OnPropertyChanged("Mappings");
                }
            }
        }
    }

    public class ChartData
    {
        public ChartData(string c, double d)
        {
            this.Category = c;
            this.Data = d;
        }

        public string Category { get; set; }
        public double Data { get; set; }
    }
}

Greetings,
Bart.