RadCartesianChart mixed Series filters ItemsSource wrong

3 Answers 116 Views
Chart ChartView
Joachim
Top achievements
Rank 1
Iron
Joachim asked on 07 Jun 2021, 10:01 AM

Hello,

i have an issue using RadCartesianChart with mixed Series types. All series have the same ItemsSource. I know if there are too much Datapoints the chart filters some points. The problem is that not on all series the same datapoints are filtered.

In the first picture you can see that there is no Datapoint for the StepLineSeries at 16:34:29, the next closest point is at 16:34:16. It is filtered out because there are too much datapoints for this range. This would be ok if it is also filtered out at the RangeSeries.

In the second picture we are zoomed in and we see that the point is no more filtered.

In the third picture i used for all 3 series the same series type (unzoomed). Now all serieses are filtered correct the same Datapoints.

How can i change this behavior of the Chart that all series types do the filtering the same way? In my opinion this behavior is wrong. I would expect the bevavior of Picture three also for different series types.

<telerik:RadCartesianChart.Series>
          <telerik:StepLineSeries DisplayName="Value" Stroke="DodgerBlue" StrokeThickness="1" ItemsSource="{Binding Data}" CategoryBinding="Timestmp" ValueBinding="Value"></telerik:StepLineSeries>
          <telerik:RangeSeries DisplayName="MinValue" Stroke="#88FF0000" StrokeThickness="1" Fill="#44FF0000" ItemsSource="{Binding Data}" CategoryBinding="Timestmp" LowBinding="LowBinding" HighBinding="MinValue"></telerik:RangeSeries>
          <telerik:RangeSeries DisplayName="MaxValue" Stroke="#88FF0000" StrokeThickness="1" Fill="#44FF0000" ItemsSource="{Binding Data}" CategoryBinding="Timestmp" LowBinding="MaxValue" HighBinding="HighBinding"></telerik:RangeSeries>
</telerik:RadCartesianChart.Series>

Martin Ivanov
Telerik team
commented on 08 Jun 2021, 10:26 AM

Hello Joachim. The chart doesn't filter any data. All items in the ItemsSource will produce the corresponding DataPoint objects in the chart. If you do not see a data point until you zoom-in this is probably because the there is not enough space on the screen so all data points can fit. However, this doesn't affect any of the chart's functionality and it doesn't filter data. In this case, the screen just cannot fit the pixels expected by all data points. For example, if you have 1000 data points and lets say each data point require 1px of width, and then we have a monitor that is lets say 500 pixels wide, there won't be enough space for all data points (something like a half a pixel for each data point. So the rendering of the OS will try to reduce the pixels and make a meaningful visual of the setup.

Maybe, by filtering you mean the data that is displayed in the trackball. If this is the case, can you send over a sample showing your exact setup along with the plotted data, so I can check it on my side?

3 Answers, 1 is accepted

Sort by
0
Accepted
Joachim
Top achievements
Rank 1
Iron
answered on 18 Jun 2021, 11:16 AM

Finally my Solution for the problem:

-Make a TrackBallInfo Template for the LineSeries like in code snippet below.

-Make empty TrackBallInfo Templates for all other Serieses.

-Write a converter to have access on the other Datapoints from ItemsSource of the Series with the DataPoint.Index Property.

<telerik:LineSeries.TrackBallInfoTemplate>
                                                            <DataTemplate>
                                                                <StackPanel Orientation="Horizontal">
                                                                    <TextBlock Text="{Binding Series.DisplayName, StringFormat=' {0}: '}" Margin="0,0,3,0"/>
                                                                    <TextBlock Text="{Binding DataPoint.Value, StringFormat=0.00 }" FontWeight="Bold" Margin="0,0,5,0"/>
                                                                    <TextBlock Text=" Min: "/>
                                                                    <TextBlock FontWeight="Bold">
                                                                        <TextBlock.Text>
                                                                            <MultiBinding Converter="{StaticResource GetObjectOfCollectionByIndexBindingConverter}" ConverterParameter='MinValue'>
                                                                                <Binding Path="Series.ItemsSource"/>
                                                                                <Binding Path="DataPoint.Index"/>
                                                                            </MultiBinding>
                                                                        </TextBlock.Text>
                                                                    </TextBlock>
                                                                    <TextBlock Text=" Max: "/>
                                                                    <TextBlock FontWeight="Bold">
                                                                        <TextBlock.Text>
                                                                            <MultiBinding Converter="{StaticResource GetObjectOfCollectionByIndexBindingConverter}" ConverterParameter='MaxValue'>
                                                                                <Binding Path="Series.ItemsSource"/>
                                                                                <Binding Path="DataPoint.Index"/>
                                                                            </MultiBinding>
                                                                        </TextBlock.Text>
                                                                    </TextBlock>
                                                                </StackPanel>
                                                            </DataTemplate>
                                                        </telerik:LineSeries.TrackBallInfoTemplate>

result:

0
Joachim
Top achievements
Rank 1
Iron
answered on 08 Jun 2021, 12:45 PM

Hello Martin Ivanov,

thanks for your answer. Yes i know that only data can be shown as much pixels available, maybe filtered is the wrong description.

I made a litte example with two charts. If you go with the mouse over the first chart, sometimes the TrackBallInfo shows you 2 different datapoints. At the second chart this never happens. The question is why and how can I get the first chart behave like the second chart.

0
Martin Ivanov
Telerik team
answered on 11 Jun 2021, 11:58 AM

Hello Joachim,

Thank you for the project. 

The first chart shows two values (for the High and Low) in the "Range" row because this is how the TrackBallInfoTemplate is defined. There is an implicit style that targets RangeSeries and sets the TrackBallInfoTemplate. The DataTemplate containes 4 TextBlock elements, one for each of the following elements - DisplayName, Low, High and Category. In the first chart there are two series - one StepLineSeries (the blue line) and one RangeSeries (the red area). When you mouse over the first chart, the template for the RangeSeries kicks-in and this is why you see two values. The first one is for the Low value of the corresponding data point and the second one is for the Hight value.

In the second chart you do not see two values, because it doesn't have RangeSeries. Instead it displays three  StepLineSeries. In the TrackBallInfoTemplate for the StepLineSeries  there are only TextBlocks for the Value (there is no High and Low), therefore you see only a single value. 

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Joachim
Top achievements
Rank 1
Iron
commented on 14 Jun 2021, 09:29 AM | edited

Hello Martin Ivanov,

Please have a look at the picture i posted. The Problem is that it's not the same Datapoint for both Linetypes in the Trackballinfo. You see it on the Timestamps the RangeSeries is one second ahead. I need to have always the same Datapoint shown in the TrackballInfo for Range and StepLineSeries. The second chart does this!
Martin Ivanov
Telerik team
commented on 17 Jun 2021, 09:11 AM

Thank you for the additional hint. The trackball feature snaps to the closes data point in each series. The difference comes from the fact that in some cases the previous data point visual is closer than the next one (where you expect the trackball). If you enable the intersection points of the trackball behavior you will see this behavior. This is especially true, when the density of the data point visuals is high as in this case. You can achieve your requirement if you use a DateTimeCategoricalAxis. Alternatively, you can use the custom trackball approach shown in the SDK examples which will give you full control over its positioning and displayed data. Also, there is a feature request to allow changing the underlying trackball data.
Joachim
Top achievements
Rank 1
Iron
commented on 17 Jun 2021, 02:15 PM

Thank you, but this is way too much effort for such simple request.
Using DateTimeCategoricalAxis doesn't change the behavior.

What I don't understand is, why have line series not the same data point visual as the range series?
In my opinion there is visually no difference between chart 1 and 2.
If I also use range chart for the middle line in the first chart instead of stepline, it works... but this solution is kludge.
Tags
Chart ChartView
Asked by
Joachim
Top achievements
Rank 1
Iron
Answers by
Joachim
Top achievements
Rank 1
Iron
Martin Ivanov
Telerik team
Share this question
or