Problem extending the CandleStick control for a Box Plot

[Jason]

Hello,
I am attempting to use the CandleStick control to display a Box Plox that includes the median value. The example found at the link below indicates this should be possible but I am seeing the same behavior as the comment indicates, the custom line is drawn correctly but all of the CandleStick elements are not visible. The PART_CenterRectangle is the correct size but has an opacity of 0 while the Upper and Lower line elements simply do not seem to be sized correctly.

http://blogs.telerik.com/blogs/posts/11-04-21/how-to-create-scatter-error-bars-and-box-plot-series-with-radchart-for-sl-wpf.aspx

I have successfully created a custom 'Series' type that works as long as CreateChartItem() returns a CandleStick object, but as soon as CreateChartItem() creates any type that extends CandleStick (even if that class is completely empty) the CandleStick visuals do not appear. Thanks,
Jason

[Jason]

I wrote up a small test app that shows the behavior I am seeing.The Telerik DLLs I am referencing all appear to be version 2011.3.1116.40. Below are screenshots of the behavior I am seeing as well as the code I am using.

BoxPlotVsCandleStickScreenshot.png - A screenshot of the running application. The custom box-plot is shown on the left, the standard candlestick shown on the right.
BoxPlotVsCandleStickSnoop.png - A screenshot taking of the Snoop Zoomer feature that shows that the center rectange does exist.

MainWindow.xaml

<Window x:Class="BoxPlotApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:mscorlib="clr-namespace:System;assembly=mscorlib" Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <mscorlib:Double x:Key="StickLineStrokeThickness">2</mscorlib:Double>
            <mscorlib:Double x:Key="CandleStickLineStrokeThickness">2</mscorlib:Double>
            <mscorlib:Double x:Key="CandleRadiusX">1</mscorlib:Double>
            <mscorlib:Double x:Key="CandleRadiusY">1</mscorlib:Double>

            <SolidColorBrush x:Key="CandleStickEmptyRectangleFill" Color="#07000000" />

            <Style x:Key="CustomCandleStickStyle" TargetType="telerik:CandleStick">
                <Setter Property="EmptyFill" Value="{StaticResource CandleStickEmptyRectangleFill}"/>
                <Setter Property="RadiusX" Value="{StaticResource CandleRadiusX}" />
                <Setter Property="RadiusY" Value="{StaticResource CandleRadiusY}" />
                <Setter Property="LineThickness" Value="{StaticResource CandleStickLineStrokeThickness}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:CandleStick">
                            <Canvas x:Name="PART_MainContainer">
                                <telerik:ParametricLine x:Name="PART_UpperLine" LineStyle="{TemplateBinding ItemStyle}"
                                    StrokeThickness="{TemplateBinding LineThickness}" />
                                <telerik:ParametricLine x:Name="PART_LowerLine" LineStyle="{TemplateBinding ItemStyle}"
                                        StrokeThickness="{TemplateBinding LineThickness}" />
                                <Rectangle x:Name="PART_CenterRectangle"
                                           Height="{TemplateBinding CandleHeight}"
                                           Canvas.Top="{TemplateBinding MinYValue}"
                                           Style="{TemplateBinding ItemStyle}"
                                           RadiusX="{TemplateBinding RadiusX}"
                                           RadiusY="{TemplateBinding RadiusY}" />
                                <telerik:ParametricLine x:Name="PART_DojiLine"
                                      Visibility="{TemplateBinding DojiLineVisibility}"
                                      LineStyle="{TemplateBinding ItemStyle}"
                                      StrokeThickness="{TemplateBinding LineThickness}" />
                                <telerik:ParametricLine x:Name="PART_CustomLine"
                                      LineStyle="{TemplateBinding ItemStyle}"
                                      StrokeThickness="{TemplateBinding LineThickness}" />
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <telerik:RadChart x:Name="RadChart1" />

        <telerik:RadChart x:Name="RadChart2" Grid.Column="1" />
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using Telerik.Windows.Controls.Charting;

namespace BoxPlotApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            _InitializeBoxPlot();
            _InitializeCandleStick();
        }

        private void _InitializeBoxPlot()
        {
            DataSeries series = new DataSeries();
            series.Definition = new CustomCandleStickSeriesDefinition()
                { ItemStyle = this.LayoutRoot.Resources["CustomCandleStickStyle"] as Style };
            series.Add(new DataPoint() { Open = 10, High = 30, Low = 5, Close = 15 });
            series.Add(new DataPoint() { Open = 15, High = 40, Low = 10, Close = 20 });
            series.Add(new DataPoint() { Open = 20, High = 35, Low = 15, Close = 30 });
            series.Add(new DataPoint() { Open = 10, High = 25, Low = 5, Close = 18 });
            series.Add(new DataPoint() { Open = 15, High = 40, Low = 10, Close = 20 });
            series.Add(new DataPoint() { Open = 20, High = 35, Low = 9, Close = 30 });
            series.Add(new DataPoint() { Open = 10, High = 25, Low = 5, Close = 15 });
            series.Add(new DataPoint() { Open = 15, High = 30, Low = 7, Close = 25 });

            RadChart1.DefaultView.ChartArea.DataSeries.Add(series);
            RadChart1.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
            RadChart1.DefaultView.ChartArea.AxisX.Title = "Experiment No";
            RadChart1.DefaultView.ChartArea.AxisY.Title = "Results";
            RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;
        }

        private void _InitializeCandleStick()
        {
            DataSeries series = new DataSeries();
            series.Definition = new CandleStickSeriesDefinition()
            {
                ItemStyle = this.LayoutRoot.Resources["CustomCandleStickStyle"] as Style
            };
            series.Add( new DataPoint()
            {
                Open = 10,
                High = 30,
                Low = 5,
                Close = 15
            } );
            series.Add( new DataPoint()
            {
                Open = 15,
                High = 40,
                Low = 10,
                Close = 20
            } );
            series.Add( new DataPoint()
            {
                Open = 20,
                High = 35,
                Low = 15,
                Close = 30
            } );
            series.Add( new DataPoint()
            {
                Open = 10,
                High = 25,
                Low = 5,
                Close = 18
            } );
            series.Add( new DataPoint()
            {
                Open = 15,
                High = 40,
                Low = 10,
                Close = 20
            } );
            series.Add( new DataPoint()
            {
                Open = 20,
                High = 35,
                Low = 9,
                Close = 30
            } );
            series.Add( new DataPoint()
            {
                Open = 10,
                High = 25,
                Low = 5,
                Close = 15
            } );
            series.Add( new DataPoint()
            {
                Open = 15,
                High = 30,
                Low = 7,
                Close = 25
            } );

            RadChart2.DefaultView.ChartArea.DataSeries.Add( series );
            RadChart2.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
            RadChart2.DefaultView.ChartArea.AxisX.Title = "Experiment No";
            RadChart2.DefaultView.ChartArea.AxisY.Title = "Results";
            RadChart2.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;
        }
    }

    public class CustomCandleStick : CandleStick
    {
        private ParametricLine CustomLine
        {
            get
            {
                return this.GetTemplateChild( "PART_CustomLine" ) as ParametricLine;
            }
        }

        protected override void UpdateParametricLinesCoordinates( Size constraint )
        {
            base.UpdateParametricLinesCoordinates( constraint );

            double middleValue = ( this.DataPoint.Open + this.DataPoint.Close ) / 2;
            DataRange minRange = this.CalculateRange( middleValue ) * constraint.Height;
            UpdateParametricLineCoordinates( this.CustomLine, this.Center - constraint.Width / 2, minRange.From, this.Center + constraint.Width / 2, minRange.From );
        }

        protected override void UpdateParametricLinesParameters()
        {
            base.UpdateParametricLinesParameters();

            UpdateParametricLineParameter( this.CustomLine, false );
        }

        private DataRange CalculateRange( double value )
        {
            DataRange axisRange = new DataRange( this.ChartArea.AxisY.ActualMinValue, this.ChartArea.AxisY.ActualMaxValue );

            double itemY = axisRange.Normalize( value );
            double zero = axisRange.Normalize( 0d );
            DataRange restrictedRange = new DataRange( DataRange.Unit.Restrict( zero ), itemY );

            return DataRange.Unit.Invert( restrictedRange );
        }
    }

    public class CustomCandleStickSeriesDefinition : CandleStickSeriesDefinition
    {
        public override IChartItem CreateChartItem()
        {
            return new CustomCandleStick();
        }
    }
}

 

[Bartholomeo Rocca]

Hello Jason,

Try setting RadChart1.DefaultView.ChartArea.EnableAnimations property to false.


Greetings,
Bart.