Blurry lines when lot of datapoints

[Mop]

With 700~ datapoints the line chart gets blurry.
Is there any way to change it without lowering the points quantity?
Also how to make it async with metro ui application with binding to ViewModel?

As far as I understand the async method has to be synchronized with ui thread to show the output. Right now Im only getting datapoints through async method and Binding them to Telerik which is created in xaml. How to make telerik chart async so that when I post 700 datapoints I wont have to wait till telerik draw them (or maybe something else is wrong?)

Would async method that creates chart control in c# and then binding it to View would work?


http://i45.tinypic.com/zsonz6.png

[Georgi]

Hi Mop,

Thank you for contacting us and for your question.

Generally this may happen if the distance between two adjacent data points is huge - e.g. >3000 pixels. Looking at the picture however this is not the case and I may not tell what the problem is. That is why I will need a demo project (or sample code) that I can test on my side, which will help me to isolate the issue.

I am looking forward to your reply and to further helping you.


Kind regards,
Georgi
the Telerik team

[Mop]

Hi,
the problem is with chart width. When it is small it looks good but the category is overlayswith each other. Even with LabelFitMode="MultiLine".

<ScrollViewer HorizontalScrollBarVisibility="Hidden" HorizontalScrollMode="Enabled"  IsTapEnabled="True" IsRightTapEnabled="True" Visibility="Visible" ZoomMode="Enabled"
                                    VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden" Margin="5">
      <telerik:RadCartesianChart PaletteName="DefaultLight" Width="700" Height="290"  x:Name="Chart">
        <telerik:RadCartesianChart.HorizontalAxis>
          <telerik:CategoricalAxis Title="Abc" PlotMode="OnTicksPadded"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
          <telerik:LinearAxis Title="Value" Minimum="0"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Grid>
          <telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
        </telerik:RadCartesianChart.Grid>
      </telerik:RadCartesianChart>
    </ScrollViewer>

var lineSeries = new LineSeries();

 

            for (int i = 0; i < 300; i++)

            {

                lineSeries.DataPoints.Add(new CategoricalDataPoint()

                {

                    Value = Math.Sin(i),

                    Category = i+"someText"

                });   

            }

            Chart.Width = 200+ 300*50;// some more space for each DataPoint

 

            Chart.Series.Add(lineSeries);

Any ideas about making drawing telerik async?
I have 3 charts on one page with popup window containing filter for days/months/quaters. It works good with quaters but it takes long time to draw charts with day filter (point for each day) and while telerik is doing its job, the UI thread is waiting for it to end and is being unresponsive.

Maybe some kind of pagging would be a solution. While scrolling through telelrik chart the visable datapoints(some computing about with of the chart) are chosen from series to be drawn. So even with thousands of points only few will drawn at a time.

[Ivaylo Gergov]

Hi, Mop

Thank you for getting back to us.

The problem with your setup is that the Chart becomes physically 15000+ pixels wide and the underlying WinRT rendering engine may not process it properly. Additionally, this huge Width makes the component extremely slow.

The desired scenario can be achieved with perfectly smooth interactivity using the ChartPanAndZoomBehavior and the Zoom property of the Chart. Here's sample code which I suggest you to try out with your example:

<telerik:RadCartesianChart.Behaviors>
    <telerik:ChartPanAndZoomBehavior PanMode="Horizontal"/>
</telerik:RadCartesianChart.Behaviors>

 

<telerik:RadCartesianChart PaletteName="DefaultLight" Width="700" Height="290"  x:Name="Chart" Zoom="150,1">

In this case you need to remove the width of the Chart which you set in code behind:

Chart.Width = 200+ 300*50;// some more space for each DataPoint

More information about all the behaviors in RadChart will be available soon in our online documentation. Meanwhile you can check the Interactivity example in the QSF where we use the same approach.

I hope this helps. Let me know if I can assist you any further.

 

All the best,
Ivaylo Gergov
the Telerik team

[Mop]

Hi,
Thank you very much for the solution!
I had ScrollViewer for two charts and telerik zooming made some problems with scrollViewer so I turned it off. Didn't thought that it works like this.

[Olaf]

Hi Georgi,

I'm experiencing the exact same behavior when using a scatter series chart. Any idea if there's a way to solve this?

Thanks,

OIaf

[Georgi]

Hi Olaf,

Thank you for contacting us.

I am not sure that I understand you completely - the "Blurriness" will be experienced when the physical dimensions of the rendered Chart Visuals are huge.

Could you please elaborate a bit more on the scenario you have so that I can assist you better? A sample project will be highly appreciated.

I am looking forward to your reply.

All the best,
Georgi
the Telerik team

[Olaf]

Hi Georgi,

Apologies for my vague description. I'm using the RadCartesianChart with the ScatterLineSeries and only using a LinearAxis. I actually have a couple of thousand data points. Having set the panmode and zoommode to horizontal I am able to zoom in on my chart.
The width of the chart control is set to auto so the actual size depends on your screen resolution.

However, when I'm zooming in the line becomes very blurry. It looks like the line isn't rendered on the fly while zooming, but rather having a fixed image stretched out.

I hope I'm explaining myself better this time, please let me know if you need any more info.

Many thanks,

Olaf

[Ivaylo Gergov]

Hello Olaf,

Thank you for getting back to us.

Indeed I must admit your observation is correct and is related to the fact that the Scatter series do not implement the same virtualization rendering model as categorical series at the moment. As a workaround I can suggest you to use LineSeries instead of ScatterLineSeries (you will also need to replace your horizontal LinearAxis with DateTimeContinuousAxis in order to achieve that).

Sorry for the inconvenience caused.

 

Regards,
Ivaylo Gergov
the Telerik team

[Olaf]

Hi Ivaylo,

I've used this scenario before, but the DateTimeContinuousAxis isn't really working for me. I'm not showing an actual date time nor binding to a datetime value, but am using a timespan instead. I've found that the chart doesn't support timespan objects, so I"m binding to an integer value representing the number of seconds since the start and use a label formatter to show it as a time offset.

Is there a way I can use the LineSeries with a timespan / offset scenario like this?

Thanks,

Olaf

[Ivaylo Gergov]

Hi Olaf,

I have logged the scenario with the ScatterLineSeries as a feature request and it will be implemented in our Q1 2013 Service Pack 1 (due in about a month). Please let us know whether this time frame is fine with your schedule. In case not we may prepare an internal build next week containing this feature implemented.

Thank you for your time and valuable feedback. I have also updated your Telerik points.

Greetings,
Ivaylo Gergov
the Telerik team

[Olaf]

Hi Ivaylo,

Thanks for your response. I've already shipped my Windows 8 app so am looking forward to the SP1 release. In the meantime I'll look for alternatives with perhaps the LineSeries chart instead.

Thanks again,

Olaf