Getting Started

This example will guide you through the steps needed to add a basic RadChart control in your application.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

Example

If your app is setup, you are ready to add a RadChart control.

This example demonstrates how to create a basic cartesian chart with bar series like this one.

Basic RadCartesianChart Example

Here is the chart setup:

<telerikChart:RadCartesianChart x:Name="chart">
  <telerikChart:RadCartesianChart.BindingContext>
    <local:ViewModel />
  </telerikChart:RadCartesianChart.BindingContext>
  <telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:CategoricalAxis />
  </telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:NumericalAxis />
  </telerikChart:RadCartesianChart.VerticalAxis>
  <telerikChart:RadCartesianChart.Series>
    <telerikChart:BarSeries CategoryBinding="Category" 
                            ValueBinding="Value" 
                            ItemsSource="{Binding Data}" />
  </telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>
var chart = new RadCartesianChart
{
    HorizontalAxis = new CategoricalAxis(),
    VerticalAxis = new NumericalAxis(),
    BindingContext = new GettingStarted.ViewModel()
};

var series = new BarSeries();

series.SetBinding(ChartSeries.ItemsSourceProperty, new Binding("Data"));

series.ValueBinding = new PropertyNameDataPointBinding { PropertyName = "Value" };
series.CategoryBinding = new PropertyNameDataPointBinding { PropertyName = "Category" };

chart.Series.Add(series);

You also need to add the following namespace:

xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
using Telerik.XamarinForms.Chart;

And here is the sample data used as binding context:

public class ViewModel
{
    public ViewModel()
    {
        this.Data = GetCategoricalData();
    }

    public ObservableCollection<CategoricalData> Data { get; set; }

    private static ObservableCollection<CategoricalData> GetCategoricalData()
    {
        var data = new ObservableCollection<CategoricalData>  {
            new CategoricalData { Category = "A", Value = 0.63 },
            new CategoricalData { Category = "B", Value = 0.85 },
            new CategoricalData { Category = "C", Value = 1.05 },
            new CategoricalData { Category = "D", Value = 0.96 },
            new CategoricalData { Category = "E", Value = 0.78 },
        };

        return data;
    }
}

Here is how the business model is defined:

public class CategoricalData
{
    public object Category { get; set; }

    public double Value { get; set; }
}

SDK Browser and QSF applications contain different examples that show RadChart's main features. You can find the applications in the Examples and QSF folders of your local Telerik UI for Xamarin installation.

See Also