Change Horizontal Axis during runtime

1 Answer 14 Views
ChartView
Philipp
Top achievements
Rank 2
Iron
Philipp asked on 09 Feb 2022, 10:58 AM

Hello,

I have a cartesian chart with line series based on data like this for every chart point

public class ChartEntry
{
    public int Number;
    public DateTime TimeStamp;
    public double Value1;
    public double Value2;
}

My series use Value1/2 for ValueBinding and Number for CategoryBinding. Horizontal axis is of type CategoricalAxis.

I want to add a (toggle)button to switch the horizontal axis from Number to TimeStamp (and back) during runtime.

Means, that I have to change CategoryBinding of series to TimeStamp and horizontal axis to type DateTimeContinuousAxis.

 

At the moment I have no clue how to do that. Any ideas? 

 

Thanks and regards

1 Answer, 1 is accepted

Sort by
0
Accepted
Stenly
Telerik team
answered on 14 Feb 2022, 09:04 AM

Hello Philipp,

To achieve the wanted result, you could create a new RadToggleButton element, and subscribe to both its Checked and Unchecked events (a single event handler could be used for both of them).  In the created event handler, find the used LineSeries instance from the RadCartesianChart element, as well as the RadToggleButton control from the e.OriginalSource property. Depending on the IsChecked property's value of the cast RadToggleButton, modify the CategoryBinding property of the LineSeries instance, as well as the HorizontalAxis property of the RadCartesianChart control.

The following code snippets show the implementation of the abovementioned logic:

<telerik:RadToggleButton Content="Change Axis" Checked="ButtonStateChanged" Unchecked="ButtonStateChanged"/>
private void ButtonStateChanged(object sender, RoutedEventArgs e)
{
    LineSeries lineSeries = (LineSeries)this.chartView.Series[0];
    RadToggleButton toggleBtn = (RadToggleButton)e.OriginalSource;

    if ((bool)toggleBtn.IsChecked)
    {
        lineSeries.CategoryBinding = new PropertyNameDataPointBinding("TimeStamp");

        chartView.HorizontalAxis = new DateTimeContinuousAxis() { LabelFitMode = Telerik.Charting.AxisLabelFitMode.Rotate, LabelFormat = "dd MMM yyyy" };
    }
    else
    {
        lineSeries.CategoryBinding = new PropertyNameDataPointBinding("Number");

        chartView.HorizontalAxis = new CategoricalAxis();
    }
}

Applying this approach produces the following result:

In conclusion, I have prepared a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Philipp
Top achievements
Rank 2
Iron
commented on 15 Feb 2022, 12:27 PM

Hello Stenly,

thanks for the explanation and example. Works like a charm. Exactly what I was looking for.

 

Thanks for the support.

Tags
ChartView
Asked by
Philipp
Top achievements
Rank 2
Iron
Answers by
Stenly
Telerik team
Share this question
or