TrendGraph

TrendGraph

Namespace: DIPS.Xamarin.UI.Controls.TrendGraph

Enables the user to add trend charts in their views. The trend chart is a simple component that shows the N graph point in relationship to the Max and Min values defined on each chart.

Samples can be found here

👉 To get started, make sure you have followed the getting started steps

Example usage

<dxui:TrendGraph MaxValue="4"
                 MinValue="2"
                 GraphColor="Red"
                 GraphBackgroundColor="LightGray"
                 ValueMemberPath="Value"
                 ItemsSource="{Binding TrendItems}" />

ViewModel can be like:

public ObservableCollection<TrendItemViewModel> TrendItems { get; } = new ObservableCollection<TrendItemViewModel>();



    public class TrendItemViewModel : INotifyPropertyChanged
    {
        public TrendItemViewModel(double value)
        {
            Value = value;
        }

        public double Value { get; set; }

        public event PropertyChangedEventHandler? PropertyChanged;
    }

Look and feel

Properties

Property	Explanation	Remarks	Default value
Animate	Animation types for the trend graph		TrendAnimation.GrowAll
MaxValue	Max value of a point.	No exception will be made if the value of a chart is above this, but the value will be truncated to be at maximum this value.	100.0
MinValue	Min value of a point	No exception will be made if the value of a chart is below this, but the value will be truncated to be at minimum this value.	0.0
GraphColor	Foreground color of each graph		#edf3f4
GraphBackgroundColor	Background color of each graph		#a26eba
ValueMemberPath	Path for where the value is located inside each item in ItemsSource. Don't add this if you use a list/array/observableCollection of int, double or float. Or if the .ToString returns a number parsable by double
ItemsSource	Items of this chart		Empty collection
LowerBound	Defines the lower bound of the graph. Every value below this point will get OutOfBoundsColor instead of GraphColor	Default null and ignored.	null
UpperBound	Defines the upper bound of the graph. Every value above this point will get OutOfBoundsColor instead of GraphColor	Default null and ignored.	null
OutOfBoundsColor	Color of a graph where the value is outside the bounds		Red

TrendAnimation Enum

Field	Value	Explanation
None	0	No animation
GrowAll	1	Growing bars with faster growing background animation
GrowAndFade	2	Growing bars with faster fading background animation
GrowAndNone	3	Growing bars with not changing background animation