Change Horizontal Axis during runtime

[Philipp]

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

[Stenly]

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

[Philipp]

Hello Stenly,

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

 

Thanks for the support.