MVVM SeriesProvider with PointSeries, using BitmapRenderOptions. How to set the color of the points?

[James]

I have implemented a chart which displays a dynamic set of series (displayed as points), using BitmapRenderOptions with a SeriesProvider in an MVVM environment.  However, I have been unable to figure out how to control the color of each series.  The color of the series lives in each DataObject instance in the ChartSeriesProvider Source collection.

I have been able to set the color of the series based on this value if I chart the data as a LineSeries (by setting the Stroke property in the LineSeries style within the CategoricalSeriesDescriptor.Style declaration), but I haven't found a solution for PointSeries' yet.  In other charts in the project (that don't require a SeriesProvider), I have been able to set the color for the point series via PointSeries.DefaultVisualStyle.

I am able to get each series to be a different color using a palette, but since I need the series to match a specific color, even a custom palette wouldn't work (as I have no way to link the correct color to the series).

I know that I can't use a PointTemplate, as I want/need the BitmapRenderOptions, so how do I bind the color?  I know there must be a simple solution that I'm missing!

Thanks

[Petar Marchev]

Hi James,

I think that the easiest way to go here is to use a converter. You need to again set the DefaultVisualStyle, as you have already done in your other projects. The little difference is that the style now depends on a brush that is in your series-view-model entity. So, you will need to use a converter:

<telerik:CategoricalSeriesDescriptor CategoryPath="XCat" ValuePath="YVal" ItemsSourcePath="Data">
 <telerik:CategoricalSeriesDescriptor.Style>
  <Style TargetType="telerik:PointSeries">
   <Setter Property="DefaultVisualStyle" Value="{Binding PointFill, Converter={StaticResource FillToPathStyleConverter}}" />

I have attached a small project to demonstrate this. I hope this helps.

Regards,
Petar Marchev
Telerik

 

 

[James]

Thanks, that did the trick, much appreciated!

[James]

Thanks, that did the trick, much appreciated!

[Petar Marchev]

Hi James,

We are glad that we were able to help. Don't forget to set the DefaultVisualsRenderMode property of the render options to Batch (information here).

Regards,
Petar Marchev
Telerik

 

 

[li]

Hello,Petar Marchev。 I am Li，i have a problem for Setting each  LineSeries' color when use SeriesProvider

i download your example ,and change some:

###########my XAML:

 <telerik:ChartSeriesProvider Source="{Binding}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="XCat" ValuePath="YVal" ItemsSourcePath="Data" TypePath="Type">
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:LineSeries">
                                    <Setter Property="StrokeThickness" Value="2"/>
                                    <Setter Property="RenderOptions" Value="{StaticResource BitmapRenderOptions}" />
                                    <Setter Property="DefaultVisualStyle" Value="{Binding PointFill, Converter={StaticResource FillToPathStyleConverter}}" />
                                     <Setter Property="TrackBallInfoTemplate">
                                        <Setter.Value>
                                            <DataTemplate>
                                                <Border>
                                                    <StackPanel Orientation="Horizontal" >
                                                        <TextBlock Text="{Binding DataPoint.Presenter.DataContext.name,StringFormat='线名称: {0}'}"/>
                                                        <TextBlock Text="{Binding DataPoint.Value,StringFormat='输出参数: {0}'}"/>
                                                    </StackPanel>
                                                </Border>
                                            </DataTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>

 

########

but it cannot work in LineSeries, I don't know what to do,please give me some help. Thank you very much!

[Martin Ivanov]

Hello Li,

The color of a LineSeries is determined by its Stroke property or the applied palette. On the other hand the DefaultVisualStyle is applied only on the visual element of the data points. In order to color each line in a different color I can suggest you couple approaches:

• Use the chart's palettes. This way the series will be colored automatically based on their index in the Series collection of the chart and the entries in the palette. You can also create a custom palette and assign it to the chart.
• Bind the Stroke property of the LineSeries. You can define a property of type Brush in the view model of the series. Then bind it using the series descriptor's Style. For example:
  

  <telerik:CategoricalSeriesDescriptor CategoryPath="XCat" ValuePath="YVal" ItemsSourcePath="Data" TypePath="Type">
      <telerik:CategoricalSeriesDescriptor.Style>
          <Style TargetType="telerik:LineSeries">
              <Setter Property="Stroke" Value="{Binding PointFill}" />
              <Setter Property="StrokeThickness" Value="2"/>
              <!-- some other properties here -->
          </Style>
      </telerik:CategoricalSeriesDescriptor.Style>
  </telerik:CategoricalSeriesDescriptor>

I hope this information helps.

Regards,
Martin
Telerik by Progress

[li]

Thanks, I found a clue from the Forum，use "StrokeShapeStyle"  and set its property  named "Stroke":

<Setter Property="StrokeShapeStyle">
                                            <Setter.Value>
                                                <Style TargetType="Path">
                                                    <Setter Property="Stroke" Value="{Binding LineSeriesFill}"/>
                                                </Style>
                                            </Setter.Value>

 </Setter>

 

Now I know  "Stroke"  is the key.   Thank you very much!