Chart with NumericalAxis and CategoricalAxis

[Rodrigo]

Hi!

I added RadCartesianChart inside RadSlideView.

I have charts where on one slide there is NumericalAxis on another CategoricalAxis.

Is it possible to do an extension and treat this, or another way?

Custom axis: Numerical axisExt

  

Regards,

Rodrigo.

[Yana]

Hi Rodrigo,

I am not sure how the data for populating the SlideView and the Charts is organized as there is a difference in the Chart data items type which defines the axis type (numerical, categorical), but basically you can do the following:

• Create a custom Chart which inherits from the RadCartesianChart and add an additional property which define the Chart axis type;
• According the that property, add the needed axis to the the Chart and set the Value/Category binding.

Please give this a try and let me know if you have any questions regarding the approach.

Regards,
Yana
Progress Telerik

[Rodrigo]

Hi!

Is there an example in the documentation or do you have a sample you can provide me?

Another way, I tried to create it by code but it is not recognized

<telerik:RadCartesianChart
       x:Name="chart"

Regards,

Rodrigo.

[Yana]

Hi Rodrigo,

We do not have such kind of an example as it's quite specific.  Still, I created a quick example to demonstrate my idea - I created a custom RadCartesianChart with a bindable ChartType property and according to its value, change the Category binding.  

Please keep in mind LineSeries are categorical series, so they require one numerical axis and one categorical axis  - still with the approach I suggested you can switch the category binding.

Download the sample and give it a try. You can use it as a base and further extend it according to the concrete requirements you have.

[Rodrigo]

Thanks for the sample!

For example, chart 1 it has the same base as chart 2 (X axis -> 10 last values)
On the Y axis, instead of putting the value, I would like to show the text (1 - "Risk", 2- "Fault", 3 - "Nothing")
I'll try to see what I can get with your example.

 

Maybe there is a way to change the Y axis label?

            for (int position = 0; position < VisibleLabels.Count; position++)
            {
                double axisValue = double.Parse(VisibleLabels[position].LabelContent);
                VisibleLabels[position].LabelContent = "Nada consta";
            }

 

Regards,

Rodrigo.

[Yana]

Hi Rodrigo,

In this case you can use a LabelFormatter for the Y axis, here is a quick example:

• Create a formatter class that inherits from the LabelFormatterBase<Type> and override its FormatTypedValue method - in it you can return a string value for all the axis labels:

 

public class MyAxisLabelFormatter : LabelFormatterBase<double>
{
    public override string FormatTypedValue(double value)
    {
        string formattedValue = "";
        switch (value)
        {
            case < 20:
                formattedValue = "0"; break;
            case 20:
                formattedValue = "Low";break;
            case <= 60:
                formattedValue = "Middle";break;
            case 80:
                formattedValue = "High";break;
                
        }
        return formattedValue;
    }
}

 

• Set the custom formatter class as a Formatter property of the axis: 

 

<telerik:NumericalAxis Minimum="0"
                    Maximum="100"
                    MajorStep="20">
    <telerik:NumericalAxis.LabelFormatter>
        <local:MyAxisLabelFormatter />
    </telerik:NumericalAxis.LabelFormatter>
</telerik:NumericalAxis>

Give this a try and let me know how it goes.

[Rodrigo]

Hi Yana!

It helps!
But how do I get the series ItemsSource? I need access to be able to set your values.
I created a new field for the description on the Y axis

        private object categoryValue;
        private double value;
        private double numeric value;
        //New field
        private string descriptionY;

Example:
If it is ChartType.Categorical I replace the value with what is in the descriptionY
If it is ChartType.Numerical it keeps the numbers

public class MyAxisLabelFormatter : LabelFormatterBase<double>
{
    public override string FormatTypedValue(double value)
    {
var chart = this.Parent;
// Get the series ItemsSource.
var itemsSource = (chart as MyCartesianChart).Series[0].ItemsSource;

                string formattedValue = "";

...
    }
}

Regards,

Rodrigo.

 

[Yana]

Hi Rodrigo,

You will not receive the ItemsSource automatically, still, you can easily pass it to the MyAxisLabelFormatter class as a constructor parameter.

First, change the formatter class like this:

public class MyAxisLabelFormatter : LabelFormatterBase<double>
{
    public ChartData ChartData;

    public MyAxisLabelFormatter(ChartData myChartData)
    {
        this.ChartData = myChartData;
    }

    public override string FormatTypedValue(double value)
    {
        var itemsSource = this.ChartData.Data;
        string formattedValue = "";
        switch (value)
        {
            case 20:
                formattedValue = "Low";break;
            case <= 60:
                formattedValue = "Middle";break;
            case 80:
                formattedValue = "High";break;
                
        }
        return formattedValue;
    }
}

Then, set the Axis LabelForrmatter in code behind inside the OnChartTypeChanged handler:

var numericAxis = chart.VerticalAxis as NumericalAxis;
numericAxis.LabelFormatter = new MyAxisLabelFormatter(currentChartItem);

Give this a try and let me know how it goes.

[Rodrigo]

Thank you Yana!
Perfect!

Regards,

Rodrigo