Skip to content

Commit ed735f7

Browse files
author
Vignesh Ramesh
authored
Merge pull request #2 from VishalOmprasad/main
XAMARIN-43979 : Code example site improvements
2 parents 13d6497 + dd72a1d commit ed735f7

File tree

1 file changed

+54
-101
lines changed

1 file changed

+54
-101
lines changed

‎README.md‎

Lines changed: 54 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,54 @@
1-
# How-to-add-a-logarithmic-axis-to-the-.NET-MAUI-Radial-Gauge
2-
This article describes how to add a logarithmic axis to the [Syncfusion .NET MAUI Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge) control.
3-
4-
**Step 1:** To add the logarithmic scale, first create a custom axis class by extending it from [RadialAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html?tabs=tabid-1) class.
5-
6-
[C#]
7-
```
8-
public class RadialAxisExt : RadialAxis
9-
{
10-
…
11-
}
12-
```
13-
14-
**Step 2:** To change the text value of the labels to the logarithmic label format, override the [GenerateVisibleLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_GenerateVisibleLabels) method in the custom axis class.
15-
16-
[C#]
17-
```
18-
protected override List<GaugeLabelInfo> GenerateVisibleLabels()
19-
{
20-
List<GaugeLabelInfo> customLabels = new List<GaugeLabelInfo>();
21-
22-
var _minimum = (int)logBase(1, 10);
23-
var _maximum = (int)logBase(10000, 10);
24-
for (var i = _minimum; i <= _maximum; i++)
25-
{
26-
int value = (int)Math.Floor(Math.Pow(10, i));// logBase value is 10
27-
GaugeLabelInfo label = new GaugeLabelInfo
28-
{
29-
Value = value,
30-
Text = value.ToString()
31-
};
32-
33-
customLabels.Add(label);
34-
}
35-
36-
labelsCount = customLabels.Count;
37-
return customLabels;
38-
}
39-
```
40-
41-
```
42-
double logBase(double value, double baseValue)
43-
{
44-
return Math.Log(value) / Math.Log(baseValue);
45-
}
46-
```
47-
48-
**Step 3:** To find the axis factor values based on the respective logarithmic value, override the [ValueToFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_ValueToFactor_System_Double_) method of custom axis class and implement the below logic for converting the values.
49-
50-
[C#]
51-
```
52-
public override double ValueToFactor(double value)
53-
{
54-
return logBase(value, 10) / (labelsCount - 1);
55-
}
56-
```
57-
58-
**Step 4:** Now, create the [RadialGauge](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.SfRadialGauge.html) control by referring the getting started [link](https://help.syncfusion.com/maui/radialgauge/getting-started#creating-an-application-using-the-net-maui-radial-gauge) and using the custom radial axis class extended from the radial axis.
59-
60-
[XAML]
61-
```
62-
<gauge:SfRadialGauge>
63-
<gauge:SfRadialGauge.Axes>
64-
<local:RadialAxisExt Minimum="1"
65-
Maximum="10000">
66-
…
67-
</local:RadialAxisExt>
68-
</gauge:SfRadialGauge.Axes>
69-
</gauge:SfRadialGauge>
70-
```
71-
72-
**Step 5:** Include the [NeedlePointer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.NeedlePointer.html) to annotate the desired value.
73-
74-
[XAML]
75-
```
76-
<local:RadialAxisExt.Pointers>
77-
<gauge:NeedlePointer Value="1000" />
78-
</local:RadialAxisExt.Pointers>
79-
```
80-
81-
[Output]
82-
83-
![](Output.png)
84-
85-
## See also
86-
87-
[How to create an application using the .NET MAUI Radial Gauge?](https://help.syncfusion.com/maui/radialgauge/getting-started#creating-an-application-using-the-net-maui-radial-gauge)
88-
89-
[How to customize scale?](https://help.syncfusion.com/maui/radialgauge/axes#custom-scale-range)
90-
91-
[How to customize Axis?](https://help.syncfusion.com/maui/radialgauge/axes#axis-customization)
92-
93-
[How to customize Axis Label?](https://help.syncfusion.com/maui/radialgauge/axes?cs-save-lang=1&cs-lang=csharp#axis-label-customization)
94-
95-
[How to customize Axis Label using Label Created Event?](https://help.syncfusion.com/maui/radialgauge/axes?cs-save-lang=1&cs-lang=csharp#labelcreated)
96-
97-
[How to customize Ticks?](https://help.syncfusion.com/maui/radialgauge/axes?cs-save-lang=1&cs-lang=csharp#tick-customization)
98-
99-
[How to customize the Needle pointer?](https://help.syncfusion.com/maui/radialgauge/needle-pointer#needle-customization)
100-
101-
[How to position and customize annotation?](https://help.syncfusion.com/maui/radialgauge/annotation)
1+
# How to add a logarithmic axis in .NET MAUI Radial Gauge
2+
3+
This repository contains sample to add a logarithmic axis in the [Syncfusion .NET MAUI Radial Gauge](https://help.syncfusion.com/maui/radial-gauge/getting-started) control.
4+
5+
Please refer the KB through this [link](https://www.syncfusion.com/kb/13091/how-to-add-a-logarithmic-scale-in-net-maui-radial-gauge-control-sfradialgauge).
6+
7+
## Syncfusion controls
8+
9+
This project used the following Syncfusion control(s):
10+
* [SfRadialGauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge)
11+
12+
## Supported platforms
13+
14+
.NET Multi-platform App UI (.NET MAUI) apps can be written for the following platforms:
15+
16+
* Android 5.0 (API 21) or higher.
17+
* iOS 10 or higher.
18+
* macOS 10.13 or higher, using Mac Catalyst.
19+
* Windows 11 and Windows 10 version 1809 or higher, using [Windows UI Library (WinUI) 3](https://learn.microsoft.com/en-us/windows/apps/winui/winui3/).
20+
21+
## Requirements to run the sample
22+
23+
* [Visual Studio 2022 Preview](https://learn.microsoft.com/en-us/visualstudio/releases/2022/release-notes-preview) version 17.3.4 or higher (.NET MAUI version 6.0.486) or [Visual Studio 2022 for Mac 17.4 Preview](https://visualstudio.microsoft.com/vs/mac/preview/).
24+
* .NET 6.0
25+
26+
Refer to the following link for more details: [System Requirements](https://help.syncfusion.com/maui/system-requirements)
27+
28+
## How to run the sample
29+
30+
1. Clone the sample and open it in Visual Studio 2022 Preview.
31+
32+
*Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.*
33+
34+
2. Register your license key in the App.cs file as demonstrated in the following code.
35+
36+
public App()
37+
{
38+
//Register Syncfusion license
39+
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
40+
41+
InitializeComponent();
42+
43+
MainPage = new MainPage();
44+
}
45+
46+
Refer to this [link](https://help.syncfusion.com/maui/licensing/overview) for more details.
47+
48+
3. Clean and build the application.
49+
50+
4. Run the application.
51+
52+
## License
53+
54+
Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples.

0 commit comments

Comments
 (0)