Y axis - as integer

1 Answer 43 Views
Chart
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 13 Apr 2022, 10:48 AM

Hi,

I want the y axis to show integer number not double , how is done ?

Thanks,


  <Label Grid.Row="2" Grid.Column="0" Text="Total Files In Progress" HorizontalOptions="Center" VerticalOptions="Center"/>
            <telerikChart:RadCartesianChart Grid.Row="3" Grid.Column="0" PaletteName="LightSelected" Margin="10" >
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
                                           MajorStepUnit="Day"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFormat="N"
                                   Minimum="0" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:LineSeries 
                               CategoryBinding="Date"
                               ValueBinding="Value"
                               ItemsSource="{Binding TotalFilesInProgressDataSource}" />
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.Grid>
                    <telerikChart:CartesianChartGrid StripLinesVisibility="X"
                                       MajorLinesVisibility="XY"
                                       MajorLineColor="LightGray"
                                       MajorLineThickness="3" />
                </telerikChart:RadCartesianChart.Grid>
            </telerikChart:RadCartesianChart>
             <Label Grid.Row="4" Grid.Column="0" Text="Total Files Divided By Routes" HorizontalOptions="Center" VerticalOptions="Center"/>
            <telerikChart:RadCartesianChart Grid.Row="5" Grid.Column="0" x:Name="totalFilesDividedByRoutesChart" Margin="10">
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis PlotMode="OnTicks"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFitMode="MultiLine" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:BarSeries ValueBinding="Value"
                                    CategoryBinding="RouteName"
                                    ItemsSource="{Binding TotalFilesDividedByRoutesDataSource}" />
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.Grid>
                    <telerikChart:CartesianChartGrid StripLinesVisibility="X"
                                       MajorLinesVisibility="XY"
                                       MajorLineColor="LightGray"
                                       MajorLineThickness="3" />
                </telerikChart:RadCartesianChart.Grid>
            </telerikChart:RadCartesianChart>

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 13 Apr 2022, 11:41 AM

Hello Daniel,

Use LabelFormat N0 instead of N. To understand how numerical string formatting works, take a look at this Microsoft documentation => Standard numeric format strings | Microsoft Docs

Note: This will result in seeing two of the same number in your axis because 1.5 will turn into 1 (and you'll see two 1s). You may also want to change the MajorStep to 1 so that it skips the 1.5 tick.

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 13 Apr 2022, 11:51 AM

The values are integer(1.2.3....) and not double so your note not relevant. is it ?
Lance | Manager Technical Support
Telerik team
commented on 13 Apr 2022, 01:51 PM

Hi Daniel,

If the original values are int, then you don't need to worry about string formatting because none of the values are going to end up on a non whole number. However, you still want to set MajorStep size to 1 so that the axis isn't autocalculated and you get only ticks at whole numbers

Take a look at the NumericalAxis documentation where it explains what MajorStep is .NET MAUI Chart Documentation | Numerical Axis.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 13 Apr 2022, 02:00 PM

When I set MajorStep size to 1  I don't see the values in axis x because i have 100 points.
Lance | Manager Technical Support
Telerik team
commented on 13 Apr 2022, 02:14 PM

Experiment with different MajorStep values that are appropriate for your data. You will need to figure that out based on your data, try 2 or 5 or 10.

I used 1 as an example of a Major step that is a whole number. In your screenshot, it looks like we auto-calculated your data's need to have a 0.5 step based on the maximum and minimum values. You can also set your Minimum to 0 and Maximum to 100 is you want that to be the range of your vertical axis. 

Ultimately, this will take some experimentation on your part to determine what the best axis values are. This is why we do automatic calculations for you. However, if you want to override that calculation, you need to do the work involved with figuring out those ranges.

Converter

as a last case resort, you can leave the default autocalculation enabled and have a custom LabelFormatter that returns a display string that is only a whole number. See https://docs.telerik.com/devtools/maui/controls/chart/axes/axes-overview#label-formatter 

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 13 Apr 2022, 02:29 PM

Regarding LabelFormatter, can you give an example how I set the x axis dynamically using label formatter ?

Lance | Manager Technical Support
Telerik team
commented on 13 Apr 2022, 03:41 PM

You can find the code example in the Xamarin docs here https://docs.telerik.com/devtools/xamarin/controls/chart/axes/axes-overview#label-formatter, it uses the same code. I will look into why the MAUI docs is missing that snippet (it should be there).

The only difference between using a formatter on different axes is whatever type that axis is using:

public class MyLabelFormatter : LabelFormatterBase<T>

Examples

For example, for a Datetime formatter T will be a DateTime:

public class DateLabelFormatter : LabelFormatterBase<DateTime>
{
    public override string FormatTypedValue(DateTime value)
    {
        if (value.Day == 1)
        {
            return value.Day + "st";
        }
        else if (value.Day == 2)
        {
            return value.Day + "nd";
        }
        else if (value.Day == 3)
        {
            return value.Day + "rd";
        }
        else
        {
            return value.Day + "th";
        }
    }
}

If the axis is showing an int value, you'd use an int for the type:

public class MyIntLabelFormatter : LabelFormatterBase<int>
{
    public override string FormatTypedValue(int value)
    {
        if (value == 1)
        {
            return "one";
        }
        else
        {
            return "bigger than one";
        }
    }
}

 And so forth. Ultimately, you have full control over whatever string  will be displayed at that axis tick's location.
Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 14 Apr 2022, 08:42 AM

When I have two item in the system look on the graph. I used LabelFormat N0 

Lance | Manager Technical Support
Telerik team
commented on 14 Apr 2022, 12:54 PM

That is the behavior I was explaining that you can expect and why I recommend using a label formatter to return an empty string for the 2nd duplicate value. If you would like assistance with this, please attach a project that replicates the issue at runtime and I can offer some in-place suggestions.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 14 Apr 2022, 01:25 PM

Attached sample code.
Lance | Manager Technical Support
Telerik team
commented on 15 Apr 2022, 02:23 PM

HI Daniel, as I suspected your project uses double for the Value property, not int. This is why we provide axis values for ticks in between whole numbers.

Change the TotalFilesDividedByRoutesData to an int property and the axis will automatically create the appropriate ticks.

public class TotalFilesDividedByRoutesData
{
...
    // Change this to an int
    public int Value { get; set; }
}

Alternative, Custom Option

Otherwise, you need to write a custom label formatter that only returns the number if the value is divided by 1 evenly (i.e. it is a whole number)

public class WholeNumberLabelFormatter : Telerik.XamarinForms.Chart.LabelFormatterBase<double>
{
    public override string FormatTypedValue(double value)
    {
        if ((value % 1) == 0)
        {
            // If it divides evenly into 1, it is a whole number valu
            // That means you can return the number.
            return value.ToString();
        }
        else
        {
            // otherwise return a blank string
            return "";
        }
    }
}

Lance | Manager Technical Support
Telerik team
commented on 15 Apr 2022, 02:49 PM

sorry for the double reply, I forgot to include a screenshot so you can see all the settings (you also forgot to set the MajorStep). Here's what it looks like at runtime:

 

Note: depending on what values you have, sometimes just setting the MajorStep, min and max is all you need. If I use a double for the same example above, I will get the same end result.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 15 Apr 2022, 03:25 PM

i dont know the major step and max value they depends on values inserted by enduser. Max values can be 100 , 200,1000.....and major steps can't be 1.So how your solution solved it ?

 

Lance | Manager Technical Support
Telerik team
commented on 15 Apr 2022, 04:25 PM

Hi Daniel,

We already automatically calculate this for you. However, when you set those values, you're asking to override that automatic calculation because you do not like how it comes out or want more control. Sometimes this automatic calculation requires fractional ticks when the data's max values are too small.

If you want to prevent the automatic calculations, then you need to do all the math involved that we already do internally for you.

To use this simple example, you can use LINQ to look at what the minimum and maximum values are in the user's data:

// Get the lowest value in the data
var lowestValue = TotalFilesDividedByRoutesDataSource.Min(route => route.Value);

// Gets the highest value in the data
var highestValue = TotalFilesDividedByRoutesDataSource.Max(route => route.Value);

Then, you can do your own calculations to pick Maximum. For example, you can make sure that the maximum will not be any less than 5 in this situation.

// Gets the highest value in the data
var highestValue = TotalFilesDividedByRoutesDataSource.Max(route => route.Value);

int myAxisMaximum = 0;

// This will prevent the vertical axis's Maximum from being any lower than 5
if(highestValue < 5)
{
    myAxisMaximum = 5;
}
else
{
    myAxisMaximum = Convert.ToInt32(highestValue);
}

At this point, this is up to you to experiment and design your own algorithm to replace the chart axis's built in one.

Label Formatter is Still An Option

Don't forget about the LabelFormatter option, you can use the auto calculation and remove any label with a fractional value. Just keep in mind that it doesn't remove the tick... you just don't see a label there.

Here's what it looks like at runtime with the "WholeNumgerFormatter" example I gave above:

Tags
Chart
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or