Do not display the changes within the time period in candlestick chart in real time

[Гоша]

Do not display the changes within the time period in candlestick chart!
How to solve this problem?
"Line" series works well. Displays parameter changes "ClosePrice"
The data source is the same for both series of data (CandleStick and Line)!

Link to source:  https://www.dropbox.com/s/ue1n4h2rsxo2mi6/CandleStickSeriesNotWork.VS2015.zip?dl=0

 

<Window x:Class="CandleStickSeriesNotWork.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"
                Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="70"/>
        </Grid.RowDefinitions>

            <telerik:RadCartesianChart x:Name="radCartesianChart" Grid.Column="0" >

                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="Y"/>
                </telerik:RadCartesianChart.Grid>

                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartCrosshairBehavior/>
                    <telerik:ChartPanAndZoomBehavior DragToZoomThreshold="0" MouseWheelMode="Zoom" DragMode="Pan" ZoomMode="Both" PanMode="Both"/>
                </telerik:RadCartesianChart.Behaviors>

                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis x:Name="AxisX" IsStepRecalculationOnZoomEnabled="True" LabelOffset="0" LastLabelVisibility="Visible" LineThickness="1" MaximumTicks="31" MajorTickOffset="0" MajorTickLength="5" PlotMode="BetweenTicks" SmartLabelsMode="None" TickThickness="1" ZIndex="0"/>
                </telerik:RadCartesianChart.HorizontalAxis>

                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="AxisY" MajorStep="1" LineThickness="1" SmartLabelsMode="SmartStepAndRange" />
                </telerik:RadCartesianChart.VerticalAxis>



                <telerik:CandlestickSeries x:Name="CandleSeries"
                                       CategoryBinding="OpenTime"
                                       CloseBinding="ClosePrice"
                                       HighBinding="HighPrice"
                                       LowBinding="LowPrice"
                                       OpenBinding="OpenPrice"
                                       ItemsSource="{Binding CandlesSeries}"  />


                <telerik:LineSeries ItemsSource="{Binding CandlesSeries}" CategoryBinding="OpenTime" ValueBinding="ClosePrice" />
            </telerik:RadCartesianChart>

        <TextBlock Grid.Row="1">
            <Span FontWeight="Bold" Foreground="Red">
                Do not display the changes within the time period in candlestick chart! <LineBreak/>
                How to solve this problem? <LineBreak/>
                "Line" series works well. Displays parameter changes "ClosePrice" <LineBreak/>
                The data source is the same for both series of data (CandleStick and Line)!
            </Span>

        </TextBlock>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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 System.Windows.Threading;
using CandleStickSeriesNotWork.Data;
using Telerik.Windows.Controls.ChartView;
using Telerik.Windows.Data;

namespace CandleStickSeriesNotWork
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>


    public partial class MainWindow : Window
    {
        private DispatcherTimer timer;
        private Random r;
        private ViewModel dc;
        public MainWindow()
        {
            InitializeComponent();
            dc = new ViewModel();
            this.DataContext = dc;

            timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(100);
            timer.Tick += (sender, args) =>
            {

                DateTime date = DateTime.Now.AddSeconds(-DateTime.Now.Second);
                Random k = new Random();

                decimal price = dc.CandlesSeries.Last().ClosePrice;
                price = k.Next() % 2 == 0 ? price += 5 : price -= 5;

                if (dc.CandlesSeries.Last().OpenTime.AddMinutes(1) < date)
                {
                    dc.CandlesSeries.Add(new Candle(date, price, price, price, price));
                }
                else
                {
                    var candle = dc.CandlesSeries.Last();
                    candle.ClosePrice = price;
                    if (price > candle.HighPrice) candle.HighPrice = price;
                    if (price < candle.LowPrice) candle.LowPrice = price;
                }
            };

            DateTime date1 = DateTime.Now.AddSeconds(-DateTime.Now.Second).AddMinutes(-1);

            r = new Random();
            decimal price1 = r.Next(200);
            dc.CandlesSeries.Add(new Candle(date1, price1, price1+100, price1-100, price1+50));

            timer.Start();

        }


    }
}

 

using System.Collections.ObjectModel;
using CandleStickSeriesNotWork.Data;
using Telerik.Windows.Data;

namespace CandleStickSeriesNotWork
{
    public class ViewModel
    {
        public ObservableCollection<Candle> CandlesSeries { get; set; }

        public ViewModel ()
        {
           CandlesSeries = new ObservableCollection<Candle>();
        }
    }
}

using System;
using System.ComponentModel;

namespace CandleStickSeriesNotWork.Data
{
    public class Candle  : INotifyPropertyChanged
    {
        DateTime _openTime;
        decimal _highPrice;
        decimal _lowPrice;
        decimal _openPrice;
        decimal _closePrice;
        private int? _numberCandle;


        public Candle(DateTime opentime,  decimal open, decimal high, decimal low, decimal close)
        {
            _openTime = opentime;
            _openPrice =  open;
            _highPrice =  high;
            _lowPrice =  low;
            _closePrice =  close;
        }

        public Candle() { }


        public DateTime OpenTime
        {
            get { return _openTime; }
            set
            {
                if (!Equals(_openTime, value))
                {
                    _openTime = value;
                    OnPropertyChanged("OpenTime");
                }
            }
        }

        public decimal HighPrice
        {
            get { return _highPrice; }
            set
            {
                if (!Equals(_highPrice, value))
                {
                    _highPrice = value;
                    OnPropertyChanged("HighPrice");
                }
            }
        }

        public decimal LowPrice
        {
            get { return _lowPrice; }
            set
            {
                if (!Equals(_lowPrice, value))
                {
                    _lowPrice = value;
                    OnPropertyChanged("LowPrice");
                }
            }
        }

        public decimal OpenPrice
        {
            get { return _openPrice; }
            set
            {
                if (!Equals(_openPrice, value))
                {
                    _openPrice = value;
                    OnPropertyChanged("OpenPrice");
                }
            }
        }

        public decimal ClosePrice
        {
            get { return _closePrice; }
            set
            {
                if (!Equals(_closePrice, value))
                {
                    _closePrice = value;
                    OnPropertyChanged("ClosePrice");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }



    }



}

[Martin Ivanov]

Hi Гоша,

This is a known issue in the chart's financial series. We have it logged in our feedback portal where you can track its status. 

As a workaround you can resize the chart in code after the Close/Open value is updated so that you refresh its UI. 

this.radCartesianChart.Width = this.radCartesianChart.ActualWidth + 1;
Dispatcher.BeginInvoke(new Action(() =>
{
    this.radCartesianChart.Width = double.NaN;
}), DispatcherPriority.Render);

Another approach is to create a custom visual element that looks like a candle stick and update its UI manually. You can use the PointTemplate of the series to include the new visual.

Regards,
Martin
Telerik