[2011.02.1025.1040] Change scroll cause Empty series

[Lukasz]

EDIT:
One suggestion - when I click on the button whick change scroll position, data that is bound to the control gets lost - even the method ZoomScrollSettingsX_PropertyChanged is empty. In version [2011.02.712.1040] everything  was ok.

-----------------------------------------------------------------------------------------------------------------------------------------------------
Hello




I have a big problem after I updated my telerik controls...

I updated my telerik controls from version 2011.02.712.1040 to version. 2011.02.1025.1040. And after that my scroll (X-axis) stopped working correctly. At my last version everything was ok, but now when I click on the button which change scroll positon I receive empty series.
What I do wrong?

In conclusion,
First series loading in the chart is correct but then when I change scroll position I receive Empty series.

My XAML code in View:

<telerik:ChartArea x:Name="chartArea" LegendName="legendChart"
                                                    Grid.Column="0"
                                                    NoDataString="Empty series"
                                                    FontSize="9"
                                                    Grid.RowSpan="2"

                                                    Style="{StaticResource OlapChartAreaStyle}" Padding="0,5">
                                         <telerik:ChartArea.ZoomScrollSettingsX>
                                             <telerik:ZoomScrollSettings  ScrollMode="ScrollAndZoom" />
                                         </telerik:ChartArea.ZoomScrollSettingsX>
                                         <telerik:ChartArea.AxisX>
                                             <telerik:AxisX LabelRotationAngle="45"  />
                                         </telerik:ChartArea.AxisX>
                                         <telerik:ChartArea.AxisY>
                                             <telerik:AxisY IsZeroBased="True" MinorTicksVisibility="Collapsed" DefaultLabelFormat="0"/>
                                         </telerik:ChartArea.AxisY>
                                     </telerik:ChartArea>

When I click in the scroll and call method in viewmodel:

void ZoomScrollSettingsX_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {

            if (e.PropertyName == "RangeStart")
            {
                ChartViewControl.chartArea.ZoomScrollSettingsX.SuspendNotifications();

                // Pobieramy aktualne polozenie scrolla
                minIndex = ((ZoomScrollSettings)sender).RangeStart;
                maxIndex = ((ZoomScrollSettings)sender).RangeEnd;

                // nastawiamy kontrolce nowe polozenie scrolla
                ChartViewControl.chartArea.ZoomScrollSettingsX.RangeStart = minIndex;
                ChartViewControl.chartArea.ZoomScrollSettingsX.RangeEnd = maxIndex;

                ChartViewControl.chartArea.ZoomScrollSettingsX.ResumeNotifications();

        ReloadSeries();
        }
    }

I'd be very grateful for any suggestions.

Lukasz Kidrycki

[Lukasz]

Hello,


Can anybody help me ?

[Yavor]

Hi Lukasz,

We have created a sample application using the code that you shared but unfortunately couldn't reproduce the problem you are describing. Perhaps the problematic code is elsewhere in your project. Can you please upload a sample project that demonstrates this issue so that we can investigate it in our labs?

Greetings,
Yavor
the Telerik team

[Lukasz]

Hi
Thank You for your attention to my problem.

All objects, DataSeries, datapoints, styles etc are created in .cs files dynamically. Moreover there is a large amount of data on the chart , so at first I creat dataseries of small amount of data and I set the default value to scroll.
When I click on the button which changes the position scroll - I recreat new DataSeries (delete old and create new) and I load new data set.

My old libraries worked correct, but when I updated my libraries to version 2011.02.1025.1040 my scroll (x-axis) stopped working correctly and when I click on the button which changes the position scroll my  dataseries dissapear even if I load new data in method ZoomScrollSettingsX

This is all my code
(Attention: This is my test code. When I click on the button (change scroll position) I load always the same data)
XAML Code:

<UserControl x:Class="RadControlsSilverlightApp3.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <Button x:Name="btnUl" Content="asdasdas"></Button>
        <telerik:RadChart x:Name="radChart1" BorderBrush="Transparent" >
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="AUTO" />

                </Grid.ColumnDefinitions>
            <telerik:ChartArea x:Name="ChartArea2">
                    <telerik:ChartArea.ZoomScrollSettingsX>
                        <telerik:ZoomScrollSettings ScrollMode="ScrollOnly"/>
                    </telerik:ChartArea.ZoomScrollSettingsX >
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX LabelRotationAngle="45" AutoRange="True"  />
                    </telerik:ChartArea.AxisX>

                </telerik:ChartArea>
            </Grid>
        </telerik:RadChart>
    </Grid>
</UserControl>

CS Code:

public partial class MainPage : UserControl
    {
        #region IMPORTANT

        private void ConfigureCharts()
        {
            ConfigureMonthlySales();
        }
        private void ConfigureMonthlySales()
        {
            ChartArea2.ZoomScrollSettingsX.SuspendNotifications();

            ChartArea2.ZoomScrollSettingsX.RangeStart = 0;
            ChartArea2.ZoomScrollSettingsX.RangeEnd = 0.5;


            ChartArea2.ZoomScrollSettingsX.ResumeNotifications();
            BuildSeries();
        }

        public MainPage()
        {
            InitializeComponent();

            ChartArea2.ZoomScrollSettingsX.SuspendNotifications();
            ChartArea2.ZoomScrollSettingsX.PropertyChanged += new PropertyChangedEventHandler(ZoomScrollSettingsX_PropertyChanged);
            ChartArea2.ZoomScrollSettingsX.ResumeNotifications();

            ConfigureCharts();
        }

        void ZoomScrollSettingsX_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "RangeStart")
            {
                BuildSeries();
            }
        }

        private void BuildSeries()
        {

            ChartArea2.DataSeries.Clear();

            DataSeries barSeries = new DataSeries();
            barSeries.Definition.InteractivitySettings.HoverScope = InteractivityScope.Item;
            barSeries.Definition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
            barSeries.Definition.ShowItemToolTips = true;
            barSeries.Definition.SeriesName = "seria1";


            DataSeries barSeries2 = new DataSeries();
            barSeries2.Definition.InteractivitySettings.HoverScope = InteractivityScope.Item;
            barSeries2.Definition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
            barSeries2.Definition.ShowItemToolTips = true;
            barSeries2.Definition.SeriesName = "seria2";


            DataSeries barSeries4 = new DataSeries();
            barSeries4.Definition.InteractivitySettings.HoverScope = InteractivityScope.Item;
            barSeries4.Definition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
            barSeries4.Definition.ShowItemToolTips = true;
            barSeries4.Definition.SeriesName = "seria4";


            DataSeries barSeries5 = new DataSeries();
            barSeries5.Definition.InteractivitySettings.HoverScope = InteractivityScope.Item;
            barSeries5.Definition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
            barSeries5.Definition.ShowItemToolTips = true;
            barSeries5.Definition.SeriesName = "seria5";

            this.FillWithSalesData(barSeries);
            this.FillWithSalesData(barSeries2);
            this.FillWithSalesData(barSeries4);
            this.FillWithSalesData(barSeries5);

            ChartArea2.DataSeries.Add(barSeries);
            ChartArea2.DataSeries.Add(barSeries2);
            ChartArea2.DataSeries.Add(barSeries4);
            ChartArea2.DataSeries.Add(barSeries5);
        }

        #endregion IMPORTANT
        //------------------------------------------------------------------------------
        //------------------------------------------------------------------------------
        //------------------------------------------------------------------------------
        #region NOT IMPORTANT

        public class ChartData
        {
            private int _xValue;
            private double _yValue;

            public int XValue
            {
                get
                {
                    return this._xValue;
                }
                set
                {
                    this._xValue = value;
                }
            }

            public double YValue
            {
                get
                {
                    return this._yValue;
                }
                set
                {
                    this._yValue = value;
                }
            }

            public ChartData(int xValue, double yValue)
            {
                this.XValue = xValue;
                this.YValue = yValue;
            }
        }
        private void FillWithSalesData(DataSeries series)
        {
            foreach (SalesViewModel item in this.GetSalesData())
            {
                DataPoint point = new DataPoint();
                point.YValue = item.SalesData.Volume;
                point.XCategory = item.SalesData.Month;
                point.DataItem = item;
                point.LegendLabel = Guid.NewGuid().ToString();

                point.LabelFormat = Guid.NewGuid().ToString();

                series.Add(point);

            }
        }
        private Random rand = new Random(DateTime.Now.Millisecond);
        public List<SalesViewModel> GetSalesData()
        {
            List<SalesViewModel> salesData;
            List<Sales> sales = new List<Sales>();
            string[] months = new string[] { "Sty", "Lut", "Marz", "Kwi", "Maj", "Czer", "Lip", "Sie", "Wrz", "Paz", "Lis", "Gru" };

            for (int index = 0; index < 12; index++)
            {
                sales.Add(new Sales(rand.Next(400, 550), months[index]));
            }

            salesData = new List<SalesViewModel>();

            foreach (Sales sale in sales)
            {
                salesData.Add(new SalesViewModel(sale));
            }

            return salesData;
        }


        public class SalesViewModel : INotifyPropertyChanged
        {
            private Sales _salesData;
            public Sales SalesData
            {
                get
                {
                    return _salesData;
                }
                private set
                {
                    _salesData = value;
                }
            }

            private Brush _salesVolumeColor;
            public Brush SalesVolumeColor
            {
                get
                {
                    return _salesVolumeColor;
                }
                private set
                {
                    _salesVolumeColor = value;
                }
            }

            public SalesViewModel(Sales salesData)
            {
                this.SalesData = salesData;
                salesData.PropertyChanged += HandleSalesDataPropertyChanged;

                this.UpdateSalesVolumeColor();
            }

            private void HandleSalesDataPropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                if (e.PropertyName == "Volume")
                    this.UpdateSalesVolumeColor();
            }

            private void UpdateSalesVolumeColor()
            {
                if (this.SalesData.Volume >= 0 && this.SalesData.Volume <= 10)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFFE256");
                else if (this.SalesData.Volume > 10 && this.SalesData.Volume <= 20)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFDCF51");
                else if (this.SalesData.Volume > 20 && this.SalesData.Volume <= 30)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFFC04F");
                else if (this.SalesData.Volume > 30 && this.SalesData.Volume <= 40)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFDAF45");
                else if (this.SalesData.Volume > 40 && this.SalesData.Volume <= 50)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFF9E38");
                else if (this.SalesData.Volume > 50 && this.SalesData.Volume <= 60)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFD8F2E");
                else if (this.SalesData.Volume > 60 && this.SalesData.Volume <= 70)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFD801F");
                else if (this.SalesData.Volume > 70 && this.SalesData.Volume <= 80)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFD7217");
                else if (this.SalesData.Volume > 80 && this.SalesData.Volume <= 90)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFD640F");
                else if (this.SalesData.Volume > 90 && this.SalesData.Volume <= 100)
                    this.SalesVolumeColor = this.CreateGradientBrush("#FFFF5600");
                else
                    this.SalesVolumeColor = new SolidColorBrush(Colors.Gray);


                this.OnPropertyChanged("SalesVolumeColor");
            }

            private LinearGradientBrush CreateGradientBrush(string color)
            {
                return new LinearGradientBrush(new GradientStopCollection() { new GradientStop() { Color = this.GetColorFromHexString("#fffff8dc"), Offset = 1 }, new GradientStop() { Color = this.GetColorFromHexString(color), Offset = 0 } }, 90);
            }

            private Color GetColorFromHexString(string s)
            {
                s = s.Replace("#", string.Empty);

                byte a = System.Convert.ToByte(s.Substring(0, 2), 16);
                byte r = System.Convert.ToByte(s.Substring(2, 2), 16);
                byte g = System.Convert.ToByte(s.Substring(4, 2), 16);
                byte b = System.Convert.ToByte(s.Substring(6, 2), 16);
                return Color.FromArgb(a, r, g, b);
            }

            public event PropertyChangedEventHandler PropertyChanged;

            protected virtual void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public class Sales : INotifyPropertyChanged
        {
            private double volume;
            private string month;

            public double Volume
            {
                get
                {
                    return this.volume;
                }
                set
                {
                    this.volume = value;
                    this.OnPropertyChanged("Volume");
                }
            }

            public string Month
            {
                get
                {
                    return this.month;
                }
                set
                {
                    this.month = value;
                }
            }

            public Sales(double volume, string month)
            {
                this.Volume = volume;
                this.Month = month;
            }

            public event PropertyChangedEventHandler PropertyChanged;

            protected virtual void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion NOT IMPORTANT
    }

[Jakub]

Hi,

Any ideas ?

[Yavor]

Hi Lukasz,

Thank you for your sample code!

First I see that you are using custom look for your chart. Make sure you have set UseDefaultLayout="False" like this:

<telerik:RadChart x:Name="radChart1" BorderBrush="Transparent" UseDefaultLayout="False">

In the code you shared I see that you are using unbound mode, but unfortunately RadChart's Zooming and Scrolling functionality works only in data bound mode. Additional requirement is an ItemMapping with DataPointMember set to XValue or XCategory. You can find more information in our help system here.

All the best,
Yavor
the Telerik team

[Jakub]

Hi.

Thanks for reply.

Everything was ok. And after changing scroll position we could add new dataseries in ZoomScrollSettingsX_PropertyChanged method but now we can't do that.
So, it's stopped working?

void ZoomScrollSettingsX_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "RangeStart")
            {
                BuildSeries();
            }
        }

Greetings

[Evgenia]

As Yavor said zooming and scrolling works only with SeriesMappings. It doesn't work with DataSeries.

[Yavor]

Hi Samrita,

Please try moving to databound mode by using SeriesMappings. You can find more information and code samples in our online help system here.

All the best,
Yavor
the Telerik team