Very large (width) chart renders with aliasing

2 posts, 0 answers
  1. Nathanael
    Nathanael avatar
    1 posts
    Member since:
    Apr 2013

    Posted 28 Jun 2015 Link to this post

    Hi,

    Here's a repro app : a long table of values (200 values=8000pixels) that I can horizontally scroll.
    I'd like to put below a chart using those figures. Everything works great except that it renders poorly : my series is totally aliased with the stretching.

    <ScrollViewer HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled">
        <StackPanel>
            <ItemsControl x:Name="Items" ItemsSource="{Binding Path=DataSource}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Width="40">
                            <TextBlock Text="{Binding Path=Category}" />
                            <TextBlock Text="{Binding Path=Value}" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
            <chart:RadCartesianChart>
                <chart:RadCartesianChart.HorizontalAxis>
                    <chart:CategoricalAxis />
                </chart:RadCartesianChart.HorizontalAxis>
                <chart:AreaSeries ItemsSource="{Binding Path=DataSource}">
                    <chart:AreaSeries.VerticalAxis>
                        <chart:LinearAxis Minimum="0" Maximum="100" Visibility="Collapsed" />
                    </chart:AreaSeries.VerticalAxis>
                    <chart:AreaSeries.CategoryBinding>
                        <chart:PropertyNameDataPointBinding PropertyName="Category" />
                    </chart:AreaSeries.CategoryBinding>
                    <chart:AreaSeries.ValueBinding>
                        <chart:PropertyNameDataPointBinding PropertyName="Value" />
                    </chart:AreaSeries.ValueBinding>
                </chart:AreaSeries>
            </chart:RadCartesianChart>
            <TextBlock Text="{Binding Path=ActualWidth, ElementName=Items}"/>
        </StackPanel>
    </ScrollViewer>
     

    What can I do make it work correctly ?

  2. Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 01 Jul 2015 Link to this post

    Hello Nathanael,

    Thank you for sending us code snippet and screenshot describing the issue you are facing!

    We have reviewed the scenario you are trying to achieve and the result you are currently getting. Due to the fact that RadChart uses Microsoft Path primitive to display its points it has the same limitations as the primitive itself.

    Depending on the scenario you are trying to achieve you might want to utilize Chart PanAndZoom Behavior. It will enable render of large data onto the chart and provide ability for UI virtualization, Pan Zoom in/out. More information regarding its usage can be found here - http://docs.telerik.com/windows-universal/controls/radchart/behaviors/chartpanandzoombehavior

    Please have a look and let us know if this helps.

    Regards,
    Tsvyatko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top