Problems rendering Candlestick series on DateTimeContinuousAxis

[Гоша]

During loading data collection occurs rendering them on a graph. Use DateTimeContinuousAxis. Until no gaps occur rendering the data correctly. Figure 1. But as soon as there are gaps in the data rendering deteriorate. Figure 2.
When using DateTimeCategoricalAxis painting is fine, but there are delays when working in real time :(

How to solve this problem?

 

 

<telerik:RadCartesianChart x:Name="chart" Grid.Column="0"    >
                    <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartCrosshairBehavior/>
                    <telerik:ChartPanAndZoomBehavior DragToZoomThreshold="0" MouseWheelMode="Zoom" DragMode="Pan" ZoomMode="Both" PanMode="Both"/>
                </telerik:RadCartesianChart.Behaviors>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeCategoricalAxis  x:Name="MainHA" LabelFormat="HH:mm" LabelFitMode="Rotate" SmartLabelsMode="SmartStep" PlotMode="OnTicks">
                        
                    </telerik:DateTimeCategoricalAxis>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis />
                </telerik:RadCartesianChart.VerticalAxis>

                <telerik:RadCartesianChart.Series>
                    <telerik:CandlestickSeries ItemsSource="{Binding Candls}" CategoryBinding="Date" CloseBinding="Close" HighBinding="High" LowBinding="Low" OpenBinding="Open" />
                </telerik:RadCartesianChart.Series>
            </telerik:RadCartesianChart>

[Dinko | Tech Support Engineer]

Hello Gosha,

Let me start with a short explanation on the chart's categorical and continuous axes. Basically, the DateTimeCategoricalAxis is designed to work with days and render them chronologically as categories. The chart will create a category slot (the distance between two adjacent ticks) for each distinct category in the data source. In other words, there will be a slot for each not-repeated date. Then, the data points will be distributed between the slots based on their category value. The chart will try to fit all data points in the category slot so that they do not overlap.

On the other hand the continuous axis has a notion of range. This means that each pixel (or each few pixels) on the plot area is a singularity in time and the ticks just mark the date on the plot area. There are no category slots. So, if you have two data points which are positioned close to one another (in time), they might overlap. This is why you observe the behavior demonstrated in the attached picture.

To resolve this you can set maximum width of the candlesticks so that they always look as the ones in the 2016-04-07-(1).png picture. You can do this using the DefaultVisualStyle property of the series.

Regards,
Dinko
Telerik

[Гоша]

Dinko Hi!

Thanks for the answer. But the problem is elsewhere. Here is the code of the chart:

<telerik:RadCartesianChart x:Name="chartTelerik"  Grid.Row="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"  LabelFormat="HH:mm" LabelFitMode="Rotate" SmartLabelsMode="SmartStep" PlotMode="OnTicksPadded"   />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis MajorStep="1" LineThickness="1" SmartLabelsMode="SmartStepAndRange" />
                </telerik:RadCartesianChart.VerticalAxis>

                <telerik:CandlestickSeries x:Name="CandleSeries" CategoryBinding="Time"  CloseBinding="Close" HighBinding="High" LowBinding="Low" OpenBinding="Open"  DefaultVisualStyle="{DynamicResource #CandleStickStyle}" ItemsSource="{Binding Candls}"  />

</telerik:RadCartesianChart>

Result Fig. 1 Note the properties GapLengtn value in the upper right corner. Image Graphics "spoil" immediately after the occurrence of a gap in the data set. Change the value GapLengnt hands at a value close to 1. And the chart is restored. Fig 2,3

How to make sure that this parameter is automatically recalculated?

 

[Dinko | Tech Support Engineer]

Hello Gosha,

When you are setting the GapLength property, you are defining the space where the items will be rendered in the axis slot (the space between two adjacent ticks). Note that its value should be between 0 and 1. A value of 0 means that a data item would take the entire space between two ticks while a value of 1 means the item will have 1px width and all left space should appear as a gap.

Looking at the provided pictures, we can see that you have set the MajorStepUnit property of the DateTimeContinuousAxis to Year and the difference in your dates is in minutes. You can change the MajorStepUnit property to Minute. This way the axis will generate ticks for every minute. 

<telerik:DateTimeContinuousAxis MajorStepUnit="Minute"  />

For your convenience, we have prepared a sample project where you can the approach explained above.

Regards,
Dinko
Telerik