Problem extending the CandleStick control for a Box Plot

3 posts, 1 answers
  1. Jason
    Jason avatar
    19 posts
    Member since:
    Mar 2012

    Posted 04 Jun 2012 Link to this post

    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
  2. Jason
    Jason avatar
    19 posts
    Member since:
    Mar 2012

    Posted 06 Jun 2012 Link to this post

    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: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();
            }
        }
    }

     

  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Bartholomeo Rocca
    Bartholomeo Rocca avatar
    247 posts
    Member since:
    May 2006

    Posted 07 Jun 2012 Link to this post

    Hello Jason,

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


    Greetings,
    Bart.
Back to Top