[Solved] Blurried Lines between DataPoints in RadCartesianChart

[Florian]

Hi Telerik Support!

i am using a RadCartesianChart to display a huge amout of datapoints in a DateTimeContinousAxis.
The width of the chart is calculated by the amout of the datapoints.
Therefore i am running into the problem with blurried lines because of huge spacing and slowdown of the control/engine.

I've read this thread about this matter:
http://www.telerik.com/community/forums/metro/chart-xaml/blurry-lines-when-lot-of-datapoints.aspx
Unfortunately the thread doesnt help me because i dont want the zooming behavior. Just a clean print of the lines between the datapoints.

Here some example code:

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <telerikChart:RadCartesianChart x:Name="chart" Grid.Column="0">
        <telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:DateTimeContinuousAxis MajorStepUnit="Day" MajorStep="1" MajorTickOffset="0" PlotMode="OnTicks"
                                                                LabelFormat="{}{0:ddd, MMM d, yyyy}"/>
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:RadCartesianChart.VerticalAxis>
            <telerikChart:LinearAxis/>
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:LineSeries>
            <telerikChart:LineSeries.ValueBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
            </telerikChart:LineSeries.ValueBinding>
            <telerikChart:LineSeries.CategoryBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
            </telerikChart:LineSeries.CategoryBinding>
        </telerikChart:LineSeries>
    </telerikChart:RadCartesianChart>
</Grid>

Here the chart in a grid to stretch it to full screen height.

The code is populating the chart with a huge amout of datapoints to demonstrate the blurry effect.

CODE:

List<Data> collection = new List<Data>();
            Random r = new Random();
            DateTime date = DateTime.Now;

            for (int i = 1; i <= 50; i++)
            {
                date = DateTime.Now.Date.AddDays(i);

                for (int k = 120; k <= 480; k += 120)
                {
                    collection.Add(new Data { Date = date.AddMinutes(k), Value = r.Next(1, 20) });
                }

                collection.Add(new Data { Date = date.Date.AddHours(23).AddMinutes(59), Value = r.Next(1, 20) });
            }

            this.chart.Series[0].ItemsSource = collection;

            this.chart.MinWidth = collection.Count * 50;

[Rosy Topchiyska]

Hello Florian,

As mentioned in the forum post you are referring to, the blurriness of the lines and the slowdown of the control are caused by the huge width of the chart control that is specified (in your scenario 24,000 pixels) -- as this is a limitation of the underlying WinRT rendering engine, we cannot provide a solution that would allow you to set such an enormous physical dimension for the control.

The only option that we can suggest is to use the ChartPanAndZoomBehavior provided by RadChart. Note, that if you do not want to allow the user to control the zoom factor at runtime, you can set a preset RadCartesianChart.Zoom property value and set the ChartPanAndZoomBehavior.ZoomMode="None" like this:

<telerikChart:RadCartesianChart x:Name="chart" Zoom="50,1">
    <telerikChart:RadCartesianChart.Behaviors>
        <telerikChart:ChartPanAndZoomBehavior ZoomMode="None" />
    </telerikChart:RadCartesianChart.Behaviors>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:DateTimeContinuousAxis MajorStepUnit="Day" MajorStep="1" MajorTickOffset="0" PlotMode="OnTicks"
                                                        LabelFormat="{}{0:ddd, MMM d, yyyy}"/>
    </telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:LinearAxis/>
    </telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:LineSeries>
        <telerikChart:LineSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
        </telerikChart:LineSeries.ValueBinding>
        <telerikChart:LineSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
        </telerikChart:LineSeries.CategoryBinding>
    </telerikChart:LineSeries>
</telerikChart:RadCartesianChart>

Hope this helps.


Regards,
Rositsa Topchiyska
Telerik

[Florian]

Hello Rositsa!

Thank you for your helpful reply!

The display of the chart is way better now.
Unfortunately we are now running into a problem, the zoom is giving us.

The DateTimeContinousAxis in our app is displaying its dates "gridwise" but we want it to display them "dataPointwise".
As you can see in my attached file, Di(tuesday) is displayed in a fixed gridpattern until (i suppose) the zoomed datapoints of the next day get rendered - Mi(wednesday).     

How can we change this behavior, so only the "start" and "end" of a day period is displayed (grouping)?

Regards,
Florian

[Rosy Topchiyska]

Hello Florian,

The MajorTickStep defines the step when the chart is not zoomed. You can multiply the step by the zoom factor in order to display the ticks with the right interval.

As to the grouping, the chart does not support such functionality when using DateTimeContinuousAxis and all points from the ItemsSource collection are displayed.

Hope this helps.

Regards,
Rositsa Topchiyska
Telerik