GraphView virtualization issue

[Sebastian]

Hi,

I am having some issues regarding a ScatterPointSeries and virtualization.

The scenario is the following:
I am using the ScatterPointSeries in order to get a bar graph. The reason I am doing this instead of using the BarSeries is that i need to use a LinearAxis for my X-axis in order to align the bars with a ScatterLineSeries. When the points are rendered i then go in and iterate through all the points to set the right height and width. It all works brilliant until i try panning the graph zoomed in.

As soon as one of the bars (points) go outside the left side of the graph all the bars in the zoomed out area gets mixed up.
I have added some pictures to illustrate my problem.

In frame 1 the bars are correct. But as soon as i pan so that the first bar exists the graph on the left all the bars change size as you can see in frame 2.

I guess this has to do with virtualization combined with my somewhat unorthodox way of creating a bar chart. 
Is there some way to turn of virtualization or do you know some other fix i might try?

Thanks.

Regards,
Sebastian

[Petar Kirov]

Hi Sebastian,

Indeed you are correct that the problem with this workaround is caused by the virtualization mechanism of RadChartView - objects that go outside of the visible range are collapsed. To prevent that from happening you can trick the control into thinking that bars don't go outside of the visible range by using the following tempate:

<telerik:ScatterPointSeries.PointTemplate>
    <DataTemplate>
        <Canvas Width="1000000" Height="1000000">
            <Border Background="LightBlue"
                  Width="20"
                  Height="1000000"
                  Margin="499990 500000 0 0"
                  VerticalAlignment="Bottom"/>
        </Canvas>
    </DataTemplate>
</telerik:ScatterPointSeries.PointTemplate>

A different workaround that does not suffer from aforementioned problem is to use BarSeries with a DateTimeContinuousAxis and to convert the labels of the axis back to double.

I have attached sample projects of both workarounds, so you can choose the one that is more suitable to your project. Please note that this scenario is not supported, so make sure you test ti thoroughly.

SL-ChartView-702128-BarLike-ScatterPointSeries - ScatterPointSeries with bar-like point template

WPF-ChartView-699072-BarSeries-plotted-on-Linear-like-axis-modified - BarSeries and DateTimeContinuousAxis with label conveter
(The project is in WPF, but since the API of RadChartView is the same on both platforms, you can copy and paste the code in a Silverlight project).

I hope this was helpful.

Regards,
Petar Kirov
Telerik

[Sebastian]

Hi Petar,

Thanks for the example and different solutions.
I was able to avoid the virtualization by just setting the margins on my container grid in the DataTemplate.
I still need to make inital tests but it seems that it solves my problems.

Regards,
Sebastian

<telerik:ScatterPointSeries.PointTemplate>
<DataTemplate>
<Grid Margin="1000000,0,1000000,0">
<Grid DataContext="{Binding DataItem}" HorizontalAlignment="Center">
<Grid Canvas.ZIndex="15">
<Grid.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5" SpreadMethod="Reflect">
<GradientStop Color="#7F000000" Offset="0"/>
<GradientStop Color="#99FFFFFF" Offset="0.315"/>
<GradientStop Color="#7F000000" Offset="1"/>
<GradientStop Color="#99FFFFFF" Offset="0.451"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</telerik:ScatterPointSeries.PointTemplate>