RadRangeSelector issues with axis labels and range of values

10 posts, 2 answers
  1. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 03 Jul 2020 Link to this post

    Hello Telerik Support Team,

    I have 2 issues with the RadRangeSelector:

    1. The Scale doesn't use the format settings of the chart. The category member datatype of the barseries is DateTime and I use this code to set the format:

    BarSeries.HorizontalAxis.LabelFormat = "{0:dd.MM}";

    In the first screenshot you can see that the rangeselector shows the full DateTime format with hours, minutes and seconds.

     

    2. The RangeSelector doesn't respect the minimum and maximum values of the chart. I use this code to set then:

    LinearAxis verticalAxis = cvChart.Axes.Get<LinearAxis>(1);
       if (verticalAxis != null)
       {
           verticalAxis.Minimum = 0;
           verticalAxis.Maximum = 100;
           //verticalAxis.MajorStep = 100;
       }

    On the second screenshot i marked the behaviour, if the ValueMember for all items in the datasource is 0.

     

    Are there possibilities for the RangeSelector to set the formatting options and the minimum and maximum values?

     

    Regards,

    Stephan

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4176 posts

    Posted 07 Jul 2020 Link to this post

    Hello, Stephan,  

    In order to customize the chart that is drawn into RadRangeSelector when it is associated with RadChartView, the associated element should be accessed. The following code snippet demonstrates how this can be achieved and how to specify the label format for the horizontal axis: 
            public RadForm1()
            {
                InitializeComponent();
    
                BarSeries series = new BarSeries();
                
                series.DataPoints.Add(new CategoricalDataPoint(6, DateTime.Now));
                series.DataPoints.Add(new CategoricalDataPoint(4, DateTime.Now.AddDays(1)));
                series.DataPoints.Add(new CategoricalDataPoint(7, DateTime.Now.AddDays(2)));
                series.DataPoints.Add(new CategoricalDataPoint(5, DateTime.Now.AddDays(3)));
                this.radChartView1.Series.Add(series);
                series.HorizontalAxis.LabelFormat = "{0:dd.MM}";
                this.radRangeSelector1.AssociatedControl = this.radChartView1;
    
                RangeSelectorViewElement chartElement = this.radRangeSelector1.RangeSelectorElement.AssociatedElement as RangeSelectorViewElement;
                chartElement.SeriesInitialized += new SeriesInitializedEventHandler(chartElement_SeriesInitialized);
            }
    
            private void chartElement_SeriesInitialized(object sender, SeriesInitializedEventArgs e)
            {
                e.Series.HorizontalAxis.LabelFormat = "{0:dd.MM}";
            }

    The same approach can be followed if you want to customize the vertical axis as well: 

            private void chartElement_SeriesInitialized(object sender, SeriesInitializedEventArgs e)
            {
                e.Series.HorizontalAxis.LabelFormat = "{0:dd.MM}";
    
                LinearAxis verticalAxis = e.Series.VerticalAxis as LinearAxis;
                if (verticalAxis != null)
                {
                    verticalAxis.Minimum = 0;
                    verticalAxis.Maximum = 100; 
                }
            }

     

    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 10 Jul 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello Dess,

    the provided solution works fine. Thanks for your help.

    Regards,

    Stephan

  4. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 17 Jul 2020 Link to this post

    Hello Telerik Support Team,

    now I have another question on formatting the labels. Your last image shows the range from July 7th. to July 10th. I want to highlight the weekends. E.g. July 11th and July 12. with a different color or fontstyle bold. Is a conditional formatting possible?

    Regards,

    Stephan

  5. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 17 Jul 2020 Link to this post

    Addition: I want to do a conditional formatting in the scale of the rangeselector for better navigation.
  6. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4176 posts

    Posted 20 Jul 2020 Link to this post

    Hello, Stephan, 

    In order to simulate conditional formatting for the axis labels, you can use the RangeSelectorViewElement.LabelInitializing event: 

                RangeSelectorViewElement chartElement = this.radRangeSelector1.RangeSelectorElement.AssociatedElement as RangeSelectorViewElement;
                chartElement.LabelInitializing += ChartElement_LabelInitializing;
            
            Font f = new Font("Arial",10f,  FontStyle.Bold );
            private void ChartElement_LabelInitializing(object sender, LabelInitializingEventArgs e)
            {
                if (e.LabelElement.Text == "21.07")
                {
                    e.LabelElement.ForeColor = Color.Red;
                    e.LabelElement.Font = f;
                } 
            }

    I believe that it would fit your scenario.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

  7. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 20 Jul 2020 Link to this post

    Hello Dess, I think i can adapt your approach for our scenario. But it would be much easier, if i could access the underlying DataItem of the LabelElement. With your approach, I had to fill a list with all special labels and check if the list contains e.LabelElement.Text. With access to the DataItem I could simply use any function.

    Thanks for your help.

    Regards,

    Stephan

  8. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4176 posts

    Posted 21 Jul 2020 Link to this post

    Hello, Stephan, 

    Indeed, it would be very useful to have access to the data item. However, I would like to note that RangeSelectorChartScaleLabelElement is just an UI element which is a derivative of RadLabelElement. It doesn't have direct access to the data item (e.g. the CategoricalDataPoint that is added to the chart). That is why the label's Text is the possible property which may control the font and color. 

    Should you have further questions please let me know.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

  9. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 21 Jul 2020 Link to this post

    Hello Dess,

    I could solve the formatting for our purpose. Of course would it be nice if you maybe could implement access to the DataBoundItem via EventArgs or as a Property in a future version.

    Regards,

    Stephan

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4176 posts

    Posted 21 Jul 2020 Link to this post

    Hi, Stephan,

    The provided feedback is greatly appreciated.

    If other customers have similar requests, we will definitely consider it in the future improvement of RadRangeSelector.

    If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

Back to Top