Skip to end of metadata
Go to start of metadata

Crosslight 5 introduces the addition of circular gauge chart to the Crosslight Charting family. The addition of circular gauge chart allows you to present and visualize data where the value is within a certain range. This document will help you get started on how to use the circular gauge chart for iOS and Android platform.

Using Crosslight Circular Gauge

Crosslight CircularGauge is built upon the MVVM design pattern, so it is recommended that you're already familiar with the pattern. To learn about MVVM, please refer to Understanding Data Binding and MVVM Design Pattern.

You can start to use Crosslight CircularGauge in just a few steps:

  • Add the required CircularGauge assemblies to your project.
  • Add the CircularGauge View control to the views in each platform.
  • Configure CircularGauge Component Model in ViewModel
  • Bind the CircularGauge Object Model in binding provider.

Add the required CircularGauge assemblies to your project

First, you need to configure your projects and add the Data Visualization assemblies to your project. To do this, simply use the NuGet extension for Mac or Visual Studio and install the Intersoft.Crosslight.UI.DataVisualization package.

NuGet

To learn more on how to use Crosslight NuGet Packages, see Introduction to Crosslight NuGet Packages.

Your project should look like the following after successful installation.

On Windows, the assembly is typically located inside the C:\Program Files (x86)\Crosslight 5\bin\iOS.Unified folder.

On Mac, the assembly is located inside the /Library/Application Support/Intersoft Solutions/Crosslight 5/bin/iOS.Unified folder.

 

Add the CircularGaugeView control to the views in each platform

On Android platform, all you need to do is just use the GaugeView directly inside your AXML layout, like so:

 

Android axml

 

On iOS, you would use the UIGaugeViewController class.
iOS View Controller

 

Configure CircularGauge Component Model in ViewModel

The following code shows you how to create and configure the gauge component model.

ViewModel

 

Bind the CircularGauge Object Model in BindingProvider

After you have View and ViewModel, just like other Crosslight controls, you need to bind your Control to ViewModel in BindingProvider as follows.

BindingProvider

Run your application, and you should get the following circular gauge in your application.


Configuring CircularGauge Title

Here are some property that you can use to configuring gauge title and subtitle :

  • Font
  • Text
  • GaugeTitleTextPosition
  • Margin 
  • NumberFormat (The numeric format that will be used for gauge value)

To use the value of the gauge in gauge title, you can use {value} in your text.

Suppose you have title and subtitle configuration such as code below :

Then you will have a circular gauge with title and subtitle that looks like the following:

You can change GaugeTitleTextPosition to center, right, bottom, left or top. You can configure title and subtitle margin by configuring its Thickness property. Refer to the example below to learn how to configure title position and margin:

 


Configuring Degree and Start Degree

To change circular gauge degree and start degree, you just need to modified the value of Degree and StartDegree property of CircularGauge component model. Degree is the degree of CircularGauge, where StartDegree is the start degree of CircularGauge (0 degree is at the top). By default, value of degree is 360 and value of start degree is double.Nan. When the value of start degree is double.Nan, Crosslight CircularGauge will determine its start degree by (360 - degree) / 2. Refer to the example below to learn how to configure circular gauge degree and start degree:

Configuring Color and Background Color

To configure circular gauge color and background color, you just need to configure Color and BackgroundColor property of CircularGauge component model. Refer to the example below to learn how to configure circular gauge color and background color:

After the colors are configured, you'll get the result similar to the following shot:

 

Configuring Circular Gauge Border

To use border in circular gauge you need to set IsVisible property from CircularGauge component model to true. You can change border width and color by configuring BorderColor and BorderWidth property of CircularGauge. Refer to the code below to learn how to use and configure circular gauge border:

 

Configuring Circular Gauge Thick

You can change width or thick of circular gauge by configuring Thick property of CircularGauge component model. Refer to the example below to learn how to configure circular gauge thick:

Invert Circular Gauge Value

You can invert your circular gauge value just by setting IsValueInverted property of CircularGauge component model to true. Refer to the code below to learn how to invert circular gauge value:



Configuring Animation Duration and Easing Function

You can change animation duration of circular gauge by configuring AnimationDuration value of CircularGauge component model.

You can choose AnimationEasingFunction for your gauge from this option :

  • Linear (Zero Acceleration)
  • EaseOut (Accelerate Animation)
  • EaseIn (Decelerate Animation)

Refer to the code below to learn how to configure circular gauge animation duration and easing function:

Samples

To see Crosslight CircularGauge in action, please check out the comprehensive circular gauge samples here