Dynamically adding different Series Types to a RadChartView

[Richard]

Hi,

I have spent alot of time researching and searching for a solution to this and while there are many posts on many forums about similar subjects, as solution to my particular problem eludes me.

I am using the RadChartView.  My datacontext is an ObservableCollection of Items.  Each Item have some properties as well as an ObservableCollection of datapoints.

I am using the code below to add a series for each item.

<telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding Data}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>

                        <telerik:CategoricalSeriesDescriptor ItemsSourcePath="DataPoints" ValuePath="Approved" CategoryPath="HorizontalAxis">
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:LineSeries">
                                    <Setter Property="Stroke" Value="{Binding ApprovedColor}"/>
                                    <Setter Property="StrokeThickness" Value="2"/>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>

                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>

            </telerik:RadCartesianChart.SeriesProvider>

So now my problem.  I want to be able to tell the chart whether my series my be a Line or Bar.  For instance the first Item's datapoints would be plotted as a line and the 2nd as a bunch of bars.  This setting would be a property in of an Item.

I have tried using converters on the CategoricalSeriesDescriptor.Style as well as a styleselector but to me I can't find a way to do this.

Please help.

Regards
RIchard

[Petar Marchev]

Hi Richard,

I think that you will be able to take advantage of the TypePath property described here.

Regards,
Petar Marchev
Telerik

[Richard]

Hi Petar,

Thanx for your reply.  Unfortunately the artical you provide is for Silverlight and I have a WPF issue hence why I posted in the WPF forum.  Be that as it may I already looked at the WPF version of this article and here is why it didn't/doesn't work for me:
1.  The article shows an example on how to make this work with static data.  I don't have static data.  My series are defined before runtime and can be of any size or type in any order depending on the chart that is been viewed.
2. Althought TypePath is mentioned, there is no actual example on HOW to use that property.

On further investigation of this article, as I said have already looked at it, I tried to use the TypePath property based on other articles I found.  I couldn't get it to work.  I got errors from can't find the element in the framework to the type that I was sending was incorrect.  I tried binding the TypePath property to a Type type property and a String type property in my model but nothing worked.

This is when I tried styleselectors, convertors and I also looked at using datatemplates to set the style of the series but again nothing wanted to work.

So I need an example on how to use a collection of items where each item has a collection of datapoints and each item can be a different series type with the RadChartView.

Regards
Richard

[Petar Marchev]

Hi Richard,

I have attached a simple project to demonstrate how you can use the TypePath property. Let me know if you have any other questions.

Regards,
Petar Marchev
Telerik

[Richard]

Hi Petar,

Thanx for the example.  This is actually one of the things that I tried but which didn't work.  I will change my code accordingly and post the error I got because etc for the random generator code you put in your example, I basically used the same code to set a property to the type series and then bound that to the TypePath in my xaml.

However I maybe did something else so I will get back to you ASAP.

Regards
Richard

[Richard]

Hi Petar,

Yes this solution works perfectly and going back in my TFS I see that I did implement this originally but I then ran into problems specifying  style of each series ie color, thickness.  Also legends.  From all the code i have seen this is stuff that is set in the styles.  How would I use the styles property to assign a different color per line.

As you can see from the code snippet in my original post, that code is the only way that I have been able to change colors of series at runtime and that implementation does not allow another style for another series so I don't know how else to accomplish this.

[Richard]

Hi Petar,

I remember reading this post http://www.telerik.com/forums/multiple-series-types-with-chartseriesprovider-and-typepath earlier and went back to it.  Implementing the RadChartView.Resources code has solved my style problem.

Thank you.

So all I have do now is figure out the Legend stuff and I am done.

I really appreciate your help with this.

Thanx
Regards
Richard

[Petar Marchev]

Hi Richard,

To include a legend you need to add a RadLegend and bind it to the LegendItems property of the chart. In order to tell the chart to produce legend items, you need to set legend settings to the series. Due to the fact that you are using the TypePath, you cannot use a style targeting a concrete series, say BarSeries. You need to use a Style targeting the CartesianSeries and a utility class to handle the different series types. I have attached a modified version of the previous project to demonstrate this.

Another way to go here would be not to use the TypePath, but use the descriptor selector capabilities of the series provider.

Regards,
Petar Marchev
Telerik

[Richard]

Hi Petar,

Ok so I got the legend working.  I am struggling to bind a color to the series now.  I was using the code below which worked with a normal LineSeries but I had problems getting the BarSeries to change color.  I even tried using the PointTemplate as seen below but I kept getting an error about inconsistent types.  Could I use the method that you implemented the legend to do this?

<telerik:RadCartesianChart x:Name="dataPointChart" Grid.Column="0">
            <telerik:RadCartesianChart.Resources>
                <Style TargetType="telerik:LineSeries">
                    <Setter Property="StrokeThickness" Value="2"/>
                    <Setter Property="Stroke" Value="{Binding ApprovedColor}"/>
                    <Setter Property="CategoryBinding" Value="{Binding HorizontalAxis}"/>
                    <Setter Property="ValueBinding" Value="{Binding Approved}"/>
                </Style>
<Style TargetType="telerik:BarSeries">
                    <!--<Setter Property="PointTemplate" Value="{StaticResource HistoricalPointDataTemplate}"/>-->
                    <Setter Property="CategoryBinding" Value="{Binding HorizontalAxis}"/>
                    <Setter Property="ValueBinding" Value="{Binding Approved}"/>
                </Style>
            </telerik:RadCartesianChart.Resources>

[Petar Marchev]

Hi Richard,

When you use a PointTemplate, the chart does not know how you color the visuals and it does not know how to chose a color for the legend item. I think you should try using the DefaultVisualStyle instead of the PointTemplate for the BarSeries. This way the legend item will get its color automatically.  

Regards,
Petar Marchev
Telerik

[Richard]

Hi Petar,

Below is my final xaml.  I have added some other functionality that works.  I am still struggling with the setting of the bar color.  I have created a style and if I manually set the style's color then my xaml works.  However as soon as I want to bind to my model's color property, I get a blank color.  Is there such a thing as been too high up in the xaml to bind to the property?

The style block is in the UserControl.Resources block.  It is called barStyle.  If I set the value to say blue then it shows perfectly.  It is just the binding that doesn't work and I don't know why.

<UserControl x:Class="Lonmin.Modules.Charts.Views.DataPointView"
             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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
             xmlns:local="clr-namespace:Lonmin.Modules.Charts.Views"
             xmlns:helpers="clr-namespace:Lonmin.Modules.Charts.Helpers"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="341">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Lonmin.Modules.Charts;component/Resources.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <telerik:VisibilityToBooleanConverter x:Key="visibilityToBooleanConverter" />
            <local:dc x:Key="dc" />
            <Style TargetType="Border"  x:Key="barStyle">
                <Setter Property="Background" Value="{Binding ApprovedColor}"/>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition MaxWidth="150" />
        </Grid.ColumnDefinitions>
        <telerik:RadCartesianChart x:Name="dataPointChart" Grid.Column="0">
            <telerik:RadCartesianChart.Resources>
                <Style TargetType="telerik:LineSeries">
                    <Setter Property="StrokeThickness" Value="2"/>
                    <Setter Property="Stroke" Value="{Binding ApprovedColor}"/>
                    <Setter Property="CategoryBinding" Value="{Binding HorizontalAxis}"/>
                    <Setter Property="ValueBinding" Value="{Binding Approved}"/>
                    <Setter Property="helpers:ChartUtilities.SeriesLegendSettings" Value="{Binding LegendTitle, Converter={StaticResource dc}}" />
                </Style>
                <Style TargetType="telerik:BarSeries">
                    <Setter Property="DefaultVisualStyle" Value="{StaticResource barStyle}"/>
                    <Setter Property="CategoryBinding" Value="{Binding HorizontalAxis}"/>
                    <Setter Property="ValueBinding" Value="{Binding Approved}"/>
                    <Setter Property="helpers:ChartUtilities.SeriesLegendSettings" Value="{Binding LegendTitle, Converter={StaticResource dc}}" />
                </Style>

            </telerik:RadCartesianChart.Resources>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis LabelRotationAngle="45" LabelFitMode="Rotate" Title="{Binding HorizontalTitle}" />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding Data}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>

                        <telerik:CategoricalSeriesDescriptor ItemsSourcePath="DataPoints" ValuePath="Approved" CategoryPath="HorizontalAxis" TypePath="SeriesType"/>

                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>

            </telerik:RadCartesianChart.SeriesProvider>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis MajorStep="{Binding VerticalMjrStep}" Minimum="{Binding VerticalMin}" Maximum="{Binding VerticalMax}" />
            </telerik:RadCartesianChart.VerticalAxis>
        </telerik:RadCartesianChart>
        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Width="auto">
            <telerik:RadLegend Items="{Binding LegendItems, ElementName=dataPointChart}" BorderBrush="Black" BorderThickness="0" Width="auto">
                <telerik:RadLegend.ItemsPanel>
                    <ItemsPanelTemplate>
                        <telerik:RadWrapPanel />
                    </ItemsPanelTemplate>
                </telerik:RadLegend.ItemsPanel>
                <telerik:RadLegend.ItemTemplate>
                    <DataTemplate>
                        <telerik:RadToggleButton Content="{Binding Title}" Foreground="Black" FontFamily="Segoe UI" FontWeight="Normal" HorizontalContentAlignment="Center" FontSize="9"
                                                 IsChecked="{Binding Presenter.Visibility, Mode=TwoWay, Converter={StaticResource visibilityToBooleanConverter}}"
                                                 Background="{Binding MarkerFill}"/>
                    </DataTemplate>
                </telerik:RadLegend.ItemTemplate>
            </telerik:RadLegend>

        </StackPanel>
    </Grid>
</UserControl>

[Richard]

Hi Petar,

This is the error I get when I try and change from a hardcoded color to a binding for the bar series color stuyle.

System.Windows.Data Error: 40 : BindingExpression path error: 'DataPointItem' property not found on 'object' ''CategoricalDataPoint' (HashCode=58413280)'. BindingExpression:Path=DataPointItem.ApprovedColor; DataItem='CategoricalDataPoint' (HashCode=58413280); target element is 'Border' (Name=''); target property is 'Background' (type 'Brush')

I really don't know what else to do.

[Petar Marchev]

Hi Richard,

The DataContext of the Border is a DataPoint. The data point has a DataItem property which is the actual business object, so you need to include this in the binding's Path:

<Style TargetType="Border"  x:Key="barStyle">
 <Setter Property="Background" Value="{Binding DataItem.ApprovedColor}" />

Regards,
Petar Marchev
Telerik

[Richard]

Hi Petar,

Ok to make that work I had to add a property for each DataPoint ie. for every value that will be plotted on the bar.

I don't understand why the BarSeries is implemented differently from the LineSeries after all a line is also made up of points and it is not necessary to have a color per point for the LineSeries.

Anyway I think I got it to work now.

Thanx

[Petar Marchev]

Hi Richard,

I reread your post a few times and I must confess that I am slightly confused. There appears to be some miscommunication regarding the series' styling.

The BarSeries and LineSeries work pretty much the same, in terms of data point visuals. There are a few differences though - the BarSeries works with default visuals (Border elements) while the LineSeries don't. If you were to use a chart palette, all bars would be colored with the same brush. If you do not use a palette, you can set a style (or a point template) for the bars and you can set the same brush for each bar, or have individual colors for each bar (based on the data item). Well, if you set a point template for the LineSeries you get the same effect, you can either set the same brush for all visuals or have each visual colored in a different way, based on the data item.

So in both series (bar and line) you need to use the DataItem. prefix in the binding. Keep in mind that the data context of the data point visual is a data point and the data context of the series is some view model.

Regards,
Petar Marchev
Telerik

[Richard]

H Petar,

That sounds more correct.  Is it possible for you to give me an example of using the point template for both series please?

I am also struggling with 2 other issues now.  Ever since your post 2 days ago about binding to the DataItem for the color of the BarSeries, my colors aren't working.  I noticed it accidentally when I was cleaning up my configuration table and since then no matter what I do, the colors don't change.  I suspect that you point template might solve this....hopefully.

The other issue is that I can't get the LineSeries to shown on top of the BarSeries.  I have been researching this issue for 2 days now and nothing I have read or any telerik example I have looked at shows any indication of a property or setting to toggle which series is ontop of the other.  It is really frustrating. 

[Petar Marchev]

Hi Richard,

I have attached a simple project that demonstrates the use of the DefaultVisualStyle, StrokeShapeStyle and PointTemplate properties of the series. I have used BarSeries, LineSeries and PointSeries for this purpose. I hope that you will now fully understand how styling and templating works.

As for the last question, one series being on top of another - things are very simple. When you add series s2 after you have added series s1, the s2 series is drawn on top of s1. This is similar to how the rest of the framework works. If you want to see s1 on top of s2, I suggest you add s2 first and then add s1. If that is not possible for some reason, you can use the ZIndex property of the series. Note that this is not the Panel.ZIndex property, but a property of the series. So you can set a ZIndex 10 to the series you want on top.

Regards,
Petar Marchev
Telerik

[Henry]

Petar:
How do I give --thumbs up--  or 5 Stars for your demo!
Exactly what I was looking for.
Thanks,
HH

[Petar Marchev]

Hello Henry,

I am very glad that the project was helpful to you : )
You cannot rate the project or response because there is no rating in our forums (only support tickets). Here we have a "Mark as answer" functionality and one of the answers is already marked with this tag. Thank you for your feedback.

Regards,
Petar Marchev
Telerik