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

RadRangeSelector issues with axis labels and range of values

9 Answers 198 Views

ChartView

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

Stephan asked on 03 Jul 2020, 09:41 AM

2020-07-03-11_11_54-rangeselectoraxis.png

2020-07-03-11_13_41-rangeselectorzerovalues.png

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

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.

Accepted

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

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

Accepted