[2011.02.1025.1040] Change scroll cause Empty series

9 posts, 0 answers
  1. Lukasz
    Lukasz avatar
    5 posts
    Member since:
    Nov 2010

    Posted 30 Oct 2011 Link to this post

    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
  2. Lukasz
    Lukasz avatar
    5 posts
    Member since:
    Nov 2010

    Posted 02 Nov 2011 Link to this post

    Hello,


    Can anybody help me ?
  3. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 02 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  4. Lukasz
    Lukasz avatar
    5 posts
    Member since:
    Nov 2010

    Posted 02 Nov 2011 Link to this post

    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"
            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
        }
  5. Jakub
    Jakub avatar
    2 posts
    Member since:
    Apr 2011

    Posted 03 Nov 2011 Link to this post

    Hi,

    Any ideas ?


  6. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 04 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  7. Jakub
    Jakub avatar
    2 posts
    Member since:
    Apr 2011

    Posted 09 Nov 2011 Link to this post

    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

  8. Evgenia
    Evgenia avatar
    5 posts
    Member since:
    Apr 2010

    Posted 14 Nov 2011 Link to this post

    As Yavor said zooming and scrolling works only with SeriesMappings. It doesn't work with DataSeries.
  9. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 14 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top