This is a migrated thread and some comments may be shown as answers.

How to set different color for each SplineSeries if I use RadCartesianChart.SeriesProvider?

1 Answer 41 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Dmitry
Top achievements
Rank 1
Dmitry asked on 12 Sep 2016, 09:00 AM

Hello. I'm sorry for being bothersome. I use telerik:ChartSeriesProvider for visualizing of variable number of Spline series. I want each curve (series) has its own color. I've written the following XAML markup for it:

<UserControl x:Class="DeviceReading.Views.AutomaticGainControlView"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:local="clr-namespace:DeviceReading"
             prism:ViewModelLocator.AutoWireViewModel="True">
 
    <UserControl.Resources>
        <telerik:ChartPalette x:Key="customPalette">
            <telerik:ChartPalette.SeriesEntries>
                <telerik:PaletteEntryCollection SeriesFamily="Spline">
                    <telerik:PaletteEntry Fill="DarkBlue" Stroke="DarkBlue"/>
                    <telerik:PaletteEntry Fill="Purple" Stroke="Purple"/>
                    <telerik:PaletteEntry Fill="Red" Stroke="Red"/>
                    <telerik:PaletteEntry Fill="Green" Stroke="Green"/>
                    <telerik:PaletteEntry Fill="Cyan" Stroke="Cyan"/>
                    <telerik:PaletteEntry Fill="Sienna" Stroke="Sienna"/>
                    <telerik:PaletteEntry Fill="Magenta" Stroke="Magenta"/>
                    <telerik:PaletteEntry Fill="DodgerBlue" Stroke="DodgerBlue"/>
                </telerik:PaletteEntryCollection>
            </telerik:ChartPalette.SeriesEntries>
        </telerik:ChartPalette>
    </UserControl.Resources>
 
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <telerik:RadCartesianChart Visibility="{Binding IsAbsoluteSplineChartVisible}" Palette="{StaticResource customPalette}">
 
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis MajorStepUnit="Second" LabelInterval="5" LabelFormat="hh:mm:ss" FontFamily="Segoe UI" PlotMode="OnTicks" TickOrigin="{Binding AlignmentDate}"/>
            </telerik:RadCartesianChart.HorizontalAxis>
 
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis FontFamily="Segoe UI" Title="Decibels [Db]" />
            </telerik:RadCartesianChart.VerticalAxis>
 
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="3,4" MajorYLineDashArray="3,4"/>
            </telerik:RadCartesianChart.Grid>
 
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding SeriesData}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="Category" ValuePath="Value" ItemsSourcePath="ChartPoints">
                            <telerik:CategoricalSeriesDescriptor.TypeConverter>
                                <local:SeriesTypeConverter/>
                            </telerik:CategoricalSeriesDescriptor.TypeConverter>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
             
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

Just in case below is SeriesTypeConverter definition.

public class SeriesTypeConverter : IValueConverter
{  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
 {
    SeriesModel seriesItem = value as SeriesModel;
 
    if (seriesItem.SeriesType == "Spline")
    {
       return typeof(SplineSeries);
    }
    else if (seriesItem.SeriesType == "Line")
    {
       return typeof(LineSeries);
    }
    else
    {
       return typeof(BarSeries);
    }
    }
 
  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    /*throw new NotImplementedException()*/return null;
     }

}

The number of series now is vary from 2 to 8 (but upper bound may be larger and will, say 16). As you can see from XAML, I've define my own color palette (customPalette). I bag your pardon, but I do not know how to use it in my XAML, to each curve (series) had its own different color. Now all displayed series (1, 2, 3, 4,...8) are dark blue (have  DarkBlue color which is the first in 'customPalette'). Please tell me, how do I do so that each curve had its own different color. And that this color does not change with each session of the program.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dinko
Telerik team
answered on 14 Sep 2016, 03:12 PM
Hello Yaroslav,

Thank you for the provided code snippet.

In order to apply different colors to the SplineSeries, you can set the SeriesFamily property of the PaletteEntryCollection to Line. 
<telerik:PaletteEntryCollection SeriesFamily="Line">


Regards,
Dinko
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
ChartView
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Share this question
or