Chart Flickering, Horizontal Zoom/Scroll problem/bug

[Rob Peters]

Hello Telerik,

I have a few problems with the chart.
Attached NO example. (!! we are unable to attach zip files)

Flickering:
When i set the 'DefaultView.ChartArea.AxisY.AutoRange' to TRUE, the chart flickers,
when set it to FALSE and specify the min/max/step value it does not have this problem,
but .... i would like to use the AutoRange function :)

Horizontal scroll/zoom:
- I cannot get this working, i think when setting the min/max values for the X axis, everything is reset?
  Is there a solution for this behavior?
- When i start the application and press ALT-F4 (to close the application), it works,
  when i first try to scroll/zoom the horizontal bar (or clicking on the slider), i cannot press ALT-F4 again, or any other common keyboard shortcuts.

With kind regards,
Rob

As we are unable to attach ZIP files, here the .cs code for the window (it only has one radchart)

Window.xaml

<Window x:Class="TelerikChart.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    Title="Window1" Height="600" Width="800"
    Loaded="OnLoaded"
        >
    <Grid>
        <Grid.Resources>
            <Style x:Key="ItemLabelStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="Orange" />
            </Style>
        </Grid.Resources>
        <telerikChart:RadChart x:Name="RadChart1" />
    </Grid>
</Window>

Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Charting;
using System.Windows.Threading;

namespace TelerikChart
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private DateTime nowTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second);

        private const int queueCapacity = 3600;
        private RadHierarchicalObservableCollection<ValueLoadInfo> ChartData = new RadHierarchicalObservableCollection<ValueLoadInfo>();
        private Random rnd = new Random();
        private DispatcherTimer timer1 = null;

        public Window1()
        {
            InitializeComponent();

            //Setup Chart
            RadChart1.DefaultView.ChartTitle.Content = "Legend Title";
            RadChart1.DefaultView.ChartArea.NoDataString = "Waiting for data...";
            RadChart1.DefaultView.ChartArea.EnableAnimations = false;

            //Setup X-As
            RadChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "#VAL{HH:mm:ss}";
            RadChart1.DefaultView.ChartArea.AxisX.LabelRotationAngle = 90;
            RadChart1.DefaultView.ChartArea.AxisX.LabelStep = 2;
            RadChart1.DefaultView.ChartArea.AxisX.Title = "Time";
            RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Normal;
            RadChart1.DefaultView.ChartArea.AxisX.AutoRange = false;

            //Setup Y-As
            RadChart1.DefaultView.ChartArea.AxisY.AutoRange = false;
            RadChart1.DefaultView.ChartArea.AxisY.MinValue = 38000;
            RadChart1.DefaultView.ChartArea.AxisY.MaxValue = 38001;
            RadChart1.DefaultView.ChartArea.AxisY.Step = 0.100;
            RadChart1.DefaultView.ChartArea.AxisY.AxisName = "Value";
            RadChart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "#VAL{0.000}";
            RadChart1.DefaultView.ChartArea.AxisY.Title = "Value (double)";

            //Setup mapping
            SeriesMapping memoryDataMapping = new SeriesMapping();
            memoryDataMapping.LegendLabel = "My Label";
            memoryDataMapping.SeriesDefinition = new LineSeriesDefinition();
            (memoryDataMapping.SeriesDefinition as LineSeriesDefinition).ShowPointMarks = false;
            (memoryDataMapping.SeriesDefinition as LineSeriesDefinition).ShowItemLabels = false;
            memoryDataMapping.SeriesDefinition.AxisName = "Value";
            memoryDataMapping.ItemMappings.Add(new ItemMapping("Time", DataPointMember.XValue));
            memoryDataMapping.ItemMappings.Add(new ItemMapping("Value", DataPointMember.YValue));
            RadChart1.SeriesMappings.Add(memoryDataMapping);

            //Could not find Resource 'ItemLabelStyle'

            RadChart1.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;

            //RadChart1.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;

        }

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            //Start timer
            timer1 = new DispatcherTimer();
            timer1.Interval = TimeSpan.FromMilliseconds(300);
            timer1.Tick += timer1_Tick;
            timer1.Start();
        }

        private void SetUpAxisXRange(DateTime now)
        {
            if (this.ChartData.Count() > 0)
            {
                RadChart1.DefaultView.ChartArea.AxisX.MinValue = ChartData[0].Time.ToOADate();
                RadChart1.DefaultView.ChartArea.AxisX.MaxValue = now.ToOADate();

                double Range = RadChart1.DefaultView.ChartArea.AxisX.MaxValue - RadChart1.DefaultView.ChartArea.AxisX.MinValue;
                RadChart1.DefaultView.ChartArea.AxisX.Step = Range / 10.0;
            }
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            if (this.ChartData.Count >= queueCapacity)
                this.ChartData.RemoveAt(0);

            this.nowTime = this.nowTime.AddMilliseconds(300);

            ValueLoadInfo systemInfo = new ValueLoadInfo();

            systemInfo.Value = 38000 + (rnd.NextDouble()%1000);
            systemInfo.Time = this.nowTime;
            this.ChartData.Add(systemInfo);

            this.SetUpAxisXRange(this.nowTime);

            if (RadChart1.ItemsSource == null)
                RadChart1.ItemsSource = this.ChartData;
        }
    }
    public class ValueLoadInfo
    {
        private DateTime _time;
        private double _Value;
        public DateTime Time
        {
            get { return this._time; }
            set { this._time = value; }
        }
        public double Value
        {
            get { return this._Value; }
            set { this._Value = value; }
        }
    }

}

[Rob Peters]

Please note, there are two other problems with the chart/source:

- It plots one too item less !, this behavior i do not have when setting the ItemsSource over and over again, and using a Queue instead of a ObservableCollection.

- When setting the ItemsSource in the OnLoaded function, and there are no items added to the 'RadHierarchicalObservableCollection', there is an execption.

At the end of OnLoaded:

RadChart1.ItemsSource = ChartData;

[Ves]

Hi Rob Peters,

It seems you are using an older version of RadControls for Silverlight. Most of your questions/issues have been addressed in the latest version -- 2010 Q1 SP1, released last week. Please, find attached a small example, implemented with the trial version of RadChart, where

• Flickering is not observed
• Horizontal zoom/scroll works as expected
• RadChart.ItemsSource is assigned in OnLoaded, no exception is thrown even if the source is still empty.
• Plotting one item less is fixed by moving the line for setting the X axis up before the line, which updates the chart source.

Onto the last question:

• This example does not seem to capture the keyboard and I am able to close it using ALT-F4 even after zooming - both by dragging or using the slider. Does this happen with this example at your end?

Finally, whenever you feel that adding a project would help you to describe better any issue, please feel free to open a formal support ticket, you will be able to attach .zip files to it.

Sincerely,
Ves
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Rob Peters]

Hello Ves,

Thank you for the explanation and sample.

If i turn On the Auto Scaling of the Y-ax

 

RadChart1.DefaultView.ChartArea.AxisY.AutoRange = true;

And make the example application fullscreen, the flickering is still there.

(I am using Windows 7 64bit), fresh install

The flickering is most visible when observing the gray/white stripes.

Keyboard capturing works perfectly in the sample application.

Wih kind regards,
Rob

 

 

[Ves]

Hi Rob,

With AutoRange set to true it would be expected to see flickering for a while. The reason is in the axis calculations. Every time a new data point is added to the chart, the axis range is recalculated and if the new datapoint  forced the y axis to change its range, you would see flickering as the axis elements are recreated. Is this the case?

Kind regards,
Ves
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Rob Peters]

Hello Ves,

Yes this is the case, except the Y-ax stays the same in range, meaning there should not be a recalculation/plotting, only when it actualy changes.
Is it possible to create it this way?
Sure i would expect a flickering when is actualy changes, or double buffering could solve this....

With kind regards,
Rob

[Ves]

Hi Rob,

I can confirm we were able to reproduce the problem. I have logged it in our PITS, so our developers will investigate it -- you can find it here (the link will be active tomorrow):
http://www.telerik.com/support/pits.aspx#/private/silverlight/2204

I have also updated your Telerik points. I hope setting the Y axis range manually would be applicable for the time being.

Best regards,
Ves
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Rob Peters]

Hello Ves,

When i upgrade my Telerik controls to the latest version (2010.2.294.35), and run for example your supplied example, i have a problem with the horizontal scrollbar.

For instance, if i want to make it smaller from the right side (click on the right side of the scrollbar and dragging to left), i see the bar being drawn to my mouse cursor position.
But when i keep holding the left mouse button, the bar right position is going back and forth and making jumps.

Is it possible to add a double click toggle on the scrollbars that swaps between your selection and full range?

With regards,
Rob

[Ves]

Hi Rob Peters,

I reviewed the project once again and with the latest official assemblies. Indeed, the scroll bar (this is actually re-templated RadSlider) goes back and forth. The reason, however is the small timeout -- the slider acts upon releasing the mouse button, but if the chart is re-bound meanwhile the slider is reset back to its previous position.  As for the double click -- I am afraid this is not currently available.

Best regards,
Ves
the Telerik team

[Rob Peters]

Hello Ves,

I do not call rebind or anything.
The charts itemsource is a RadHierarchicalObservableCollection

Is there a work around for this? What has changed compared to the previous version that was working?
Maybe i can overrule some function.

With regards,
Rob

[Ves]

Hi Rob,

When the charts ItemsSource  is changed the chart is rebound. And when this happens the slider is re-drawn with its current settings. We have not changed anything in this regard, I just checked this example with 2010 Q1 SP1 assemblies (the actual ones at the time this thread started) and I am afraid this side effect exists there too. I am afraid this is just a conflict in this scenario (rebind while holding the slider handle) and I cannot provide a feasible workaround at the moment. I am really sorry for the inconvenience.

Best regards,
Ves
the Telerik team