Coloring Candlesticks

[Rotem]

Hi,

Is there a possibility to set a different color to each one of the candlesticks?

[Missing User]

Hi Rotem,

Please take a look at the attached sample project. It shows how to customize the candlestick color based on each item's High property. However, you should be able to change the color based on other factors as well.

Regards,
Ivan N.
the Telerik team

[Rotem]

Hi,
Thanks for the help,
I tried to use your code, but without success - The candlestick property that binded to DataPoint.DataItem.MyUpFill just returning null.
Same heppans at the project that you attched (After that I fix it because my Visual didn't agree to open it).

The bindind isn't wrong, it doesn't fail, It just dont work. I set breakpoint inside IdentityConverter but it doesn't stop there.
The weird thing when I used Snoop to look why it failed, then the VS stopped at the breakpoint, and showed currect values.

I used this style:

 

<Style x:Key="MyCandlestickStyle" TargetType="telerik:Candlestick">
  <Setter Property="UpFill" Value="{Binding Path=DataPoint.DataItem.MyUpFill, RelativeSource={RelativeSource Self} ,PresentationTraceSources.TraceLevel=High, Converter={StaticResource identityConverter}}"/>
  <Setter Property="DownFill" Value="Black"/>
  <Setter Property="UpStroke" Value="Green"/>
  <Setter Property="DownStroke" Value="Red"/>
</Style>

 
So I'm guessing that the chart just need an update after the series is loaded.
Then I Created AttachedProperty for that, but I still can't get it work well.

private static void OnSetMainSeriesStyleChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
    var mainCharts = dependencyObject as MainChartsArea;
    if (mainCharts == null || mainCharts.MainChart == null || mainCharts.MainChart.mainDataSeries == null) return;
    Binding upBinding = new Binding("DataPoint.DataItem.MyUpFill");
    upBinding.RelativeSource = new RelativeSource(RelativeSourceMode.Self);
    upBinding.Converter = new Converters.IdentityConverter();
    mainCharts.MainChart.mainDataSeries.DefaultVisualStyle.Setters.Clear();
    mainCharts.MainChart.mainDataSeries.DefaultVisualStyle.Setters.Add(new Setter(Candlestick.UpFillProperty, upBinding));
    mainCharts.MainChart.InvalidateVisual();
}

Do you know what is the problem? Why its working when I selecting each CandleStick at Snoop but it doesn't succeeded to bind to the property correctly?

Thanks.

[Missing User]

Hi Rotem,

I apologize for misleading you. It appears that the WPF version of RadCartesianChart currently has some limitations that prevent bindings such as those in my previous post to succeed. We've logged a feature request that will address the situation. By following this link, you can track our progress on it and vote to raise its popularity. Your Telerik points have been updated as well.

In the meantime, you can achieve that functionality by subscribing to the MainWindow's LayoutUpdated event and using the following code:

void MainWindow_LayoutUpdated(object sender, EventArgs e)
{
    bool isLoaded = Telerik.Windows.Controls.ChildrenOfTypeExtensions.ChildrenOfType<Candlestick>(this).Any();
    if (isLoaded)
    {
        this.LayoutUpdated -= this.MainWindow_LayoutUpdated;
        (this.RadChart1.Series[0] as PointTemplateSeries).DefaultVisualStyle = this.Resources["MyCandlestickStyle"] as Style;
    }
}

While I wish to be able to answer why bindings succeed with Snoop, regretfully, I cannot say. It appears to be behavior specific to Snoop and it's out of our support scope.

Kind regards,
Ivan N.
the Telerik team

[Rotem]

Hi Ivan,
Thank you so much for your reply.
I tried the suggested solution, but sadly it still behave the same way.

I thought on different approach that hopefully will achieved the desired behaviour.
To set a template selector via PointTemplateSelector chartview's property,
and in the selector code set the candlestick's UpFill/DownFill brushes.

The TemplateSelector signature is

public override DataTemplate SelectTemplate(object item, DependencyObject container)

item is OhlcDataPoint type
and container is CandlestickSeries type

I didn't found yet how I can access from OhlcDataPoint to Candlestick type, in order to change it's UpFill/DownFill brushes.

Can I get the Candlestick type?
If not, I guess that there is no escape from recreate the CandleStick datatemplate.

Thanks for all the help,
Rotem.

 

 

 

 

[Missing User]

Hello Rotem,

I regret to hear that you still encounter problems. Would you please confirm that you don't set the DefaultVisualStyle through XAML anymore and set it only in code-behind, as shown in my previous post? For your convenience, I've attached a working sample project that's runnable straight away without additional setup and a screenshot that shows the application running. I don't think using a PointTemplateSelector or any other ways of bypassing that limitation will be necessary anymore.

Kind regards,
Ivan N.
the Telerik team

[Rotem]

Hi Ivan,
Again, Thanks for all the help and all your patience.

I finally succeeded to color my candlesticks, but I have one problem -
I have a lot of data, so I'm using the zoom and pan behavior.

The coloring happens only once and instead to be related to the object, the color is related to the position from the start of the screen.
So If I'm changing the zoom and/or moving the showed section the candlesticks replacing their colors.

I tried to register to HorizontalZoomBarSelectionChanged and to set the style again as DefaultVisualStyle but it doesn't help.

I've changed your sample project and added pictures.
Do you have any idea how to solve this?

Thanks again for all your help.

[Petar Marchev]

Hello Rotem,

The reason you get this behavior is that the chart uses virtualization for its visuals. Once you zoom in enough so that the first visual is not in the visible area - it is used for the first visual item, which is really the second data point. At this time the Fill bindings do not kick in because the DataPoint property you have used in the style binding is not a dependency property.

I think that the best way to go here is to use a PointTemplate. I have attached a demo project for this. Let us know how it goes.

All the best,
Petar Marchev
the Telerik team

[Rotem]

Hi Petar

Thanks for the solution. Its working! :)
There are no problems at all.

Thanks again for all the Help and for the solution,
And thanks for all your patience... Telerik have a great support.

Rotem.