Charting multiple series

Nov 16, 2011 at 3:56 AM

Hi Guys,

I was wondering if I am missing out how to bind multiple series to one chart; the basic idea is to display different line series for each collection of values I am getting on my view model but I am failing to get it to work.

 

My view model looks like this:

/*-------------Main App View Model -------------*/
    public class AppViewModel
    {
        public AppViewModel()
        {
            Series = Enumerable.Range(1, 4).Select(index => new Serie(string.Format("title for serie {0}", index)));
        }

        public IEnumerable<Serie> Series { get; private set; }
    }


/*---------------Models representing series --------*/
    public class Serie
    {
        public Serie(string title)
        {
            Title = title;
            Values = Enumerable.Range(1, 10).Select(index => new ItemValue(index));
        }

        public string Title { get; private set; }
        public IEnumerable<ItemValue> Values { get; private set; }
    }

    public class ItemValue
    {
        public ItemValue(int index)
        {
            X = index;
            Y = index;
        }

        public int X { get; private set; }
        public int Y { get; private set; }
    }

And my XAML looks like this:

<UserControl x:Class="MyApp.Views.ChartControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyApp.ViewModels"
             xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <local:AppViewModel x:Key="appViewModel" />
    </UserControl.Resources>
    <Grid DataContext="{StaticResource appViewModel}" >
        <chartingToolkit:Chart LegendTitle="x/y" DataContext="{Binding Series}">
            <chartingToolkit:Chart.Resources>
                <DataTemplate DataType="{x:Type local:Serie}">
                    <chartingToolkit:LineSeries ItemsSource="{Binding Path=Values, Mode=OneWay}" Title="{Binding Path=Title, Mode=OneWay}" DependentValuePath="X" IndependentValuePath="Y" />
                </DataTemplate>
            </chartingToolkit:Chart.Resources>
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:LinearAxis Maximum="800" Minimum="0" ExtendRangeToOrigin="True" Orientation="Y" />
                <chartingToolkit:LinearAxis Maximum="60" Minimum="-1" ExtendRangeToOrigin="True" Orientation="X" />
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>
    </Grid>
</UserControl>

Expecting a chart with 4 series, each represented by a line series of different colours (now that I think about it this sample is bad because every series is going to sit on top of the previous one, but you will get different series if a similar implementation works).

Reading a bit more on the Internet I have found this link http://blog.thekieners.com/2010/02/07/databinding-multi-series-charts/ where Kiener implemented his own version of the multi-series-chart in which you could easy data template the data to present it as different series.

 

So, my question is: Is it possible to achieve the representation of multiple series with binding (no code behind)?

Cheers,