RadRangeSelector issues with axis labels and range of values

[Stephan]

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

[Dess | Tech Support Engineer, Principal]

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

[Stephan]

Hello Dess,

the provided solution works fine. Thanks for your help.

Regards,

Stephan

[Stephan]

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

[Stephan]

Addition: I want to do a conditional formatting in the scale of the rangeselector for better navigation.

[Dess | Tech Support Engineer, Principal]

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

[Stephan]

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

[Dess | Tech Support Engineer, Principal]

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

[Stephan]

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

[Dess | Tech Support Engineer, Principal]

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