This is a migrated thread and some comments may be shown as answers.

RadRangeSelector issues with axis labels and range of values

9 Answers 161 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Stephan asked on 03 Jul 2020, 09:41 AM

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

9 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 07 Jul 2020, 11:14 AM
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.
0
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 10 Jul 2020, 02:15 PM

Hello Dess,

the provided solution works fine. Thanks for your help.

Regards,

Stephan

0
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 17 Jul 2020, 12:27 PM

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

0
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 17 Jul 2020, 12:29 PM
Addition: I want to do a conditional formatting in the scale of the rangeselector for better navigation.
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 Jul 2020, 09:17 AM

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

0
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 20 Jul 2020, 12:52 PM

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

0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Jul 2020, 06:24 AM

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

0
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 21 Jul 2020, 03:55 PM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 22 Jul 2020, 04:38 AM

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

Tags
ChartView
Asked by
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Share this question
or