XAML based chart not working

[Matt]

I'm trying to create multiple charts inside a listview but the chart isn't showing up. I'm not sure why. The backing data is there. Here is the code I'm using: 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Mobile.Views.WatchListPage"
             xmlns:infrastructure="clr-namespace:Mobile.Infrastructure;assembly=Mobile"
             xmlns:telerik="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
             xmlns:viewModel="clr-namespace:Mobile.ViewModels;assembly=Mobile"

             Title="DHT1">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="FriendlyNameStyle" TargetType="Label">
        <Setter Property="FontSize" Value="16"></Setter>
        <Setter Property="FontFamily" Value="Open Sans"></Setter>
      </Style>
      <Style x:Key="ValueStyle" TargetType="Label">
        <Setter Property="FontSize" Value="18"></Setter>
        <Setter Property="FontFamily" Value="Open Sans"></Setter>
        <Setter Property="FontAttributes" Value="Bold"></Setter>
      </Style>
      <Style x:Key="MinorText" TargetType="Label">
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="FontFamily" Value="Open Sans"></Setter>
        <Setter Property="TextColor" Value="Gray"></Setter>
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
  <ContentPage.Content>
    <StackLayout Orientation="Vertical" Padding="0" Spacing="0">
      <SearchBar x:Name="ParameterSearch" Placeholder="Search parameters" Text="{Binding ParameterSearchText}"></SearchBar>
      <infrastructure:CustomListView x:Name="ParameterLv" SeparatorVisibility="Default" RowHeight="50">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="0">
                <ContentView Padding="5, 0, 5, 0">
                  <Image Source="{Binding StatusImg}"></Image>
                </ContentView>
                <StackLayout Orientation="Vertical">
                  <Label Text="{Binding FriendlyName}" Style="{StaticResource FriendlyNameStyle}"></Label>
                  <Label Text="{Binding TagId}" Style="{StaticResource MinorText}"></Label>
                </StackLayout>
                <telerik:RadCartesianChart x:Name="ParameterChart" HorizontalOptions="FillAndExpand">
                  <telerik:RadCartesianChart.BindingContext>
                    <viewModel:ParameterViewModel/>
                  </telerik:RadCartesianChart.BindingContext>
                  <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:NumericalAxis/>
                  </telerik:RadCartesianChart.HorizontalAxis>
                  <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:NumericalAxis />
                  </telerik:RadCartesianChart.VerticalAxis>
                  <telerik:RadCartesianChart.Series>
                    <telerik:ScatterLineSeries ItemsSource="{Binding TrendTail}">
                      <telerik:ScatterLineSeries.XValueBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="Time"/>
                      </telerik:ScatterLineSeries.XValueBinding>
                      <telerik:ScatterLineSeries.YValueBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
                      </telerik:ScatterLineSeries.YValueBinding>
                    </telerik:ScatterLineSeries>
                  </telerik:RadCartesianChart.Series>
                </telerik:RadCartesianChart>
                <StackLayout Orientation="Vertical" Padding="0, 0, 5, 0">
                  <Label Text="{Binding Value}" Style="{StaticResource ValueStyle}"></Label>
                  <Label Text="{Binding Unit}" Style="{StaticResource MinorText}" HorizontalTextAlignment="Center" VerticalTextAlignment="Start"></Label>
                </StackLayout>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </infrastructure:CustomListView>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

namespace Mobile.ViewModels
{
    using ReactiveUI;

    public class ParameterViewModel : ReactiveObject
    {
        private string _friendlyName;
        public string FriendlyName
        {
            get { return _friendlyName; }
            set { this.RaiseAndSetIfChanged(ref _friendlyName, value); }
        }

        private string _tagId;
        public string TagId
        {
            get { return _tagId; }
            set { this.RaiseAndSetIfChanged(ref _tagId, value); }
        }

        private string _statusImg;
        public string StatusImg
        {
            get { return _statusImg; }
            set { this.RaiseAndSetIfChanged(ref _statusImg, value); }
        }

        private string _value;
        public string Value
        {
            get { return _value; }
            set { this.RaiseAndSetIfChanged(ref _value, value); }
        }

        private string _unit;
        public string Unit
        {
            get { return _unit; }
            set { this.RaiseAndSetIfChanged(ref _unit, value); }
        }

        private TrendData[] _trendTail;
        public TrendData[] TrendTail
        {
            get { return _trendTail; }
            set { this.RaiseAndSetIfChanged(ref _trendTail, value); }
        }

        private decimal _reference;
        public decimal Reference
        {
            get { return _reference; }
            set { this.RaiseAndSetIfChanged(ref _reference, value); }
        }

    }

    public class TrendData : ReactiveObject
    {
        private decimal _value;
        public decimal Value
        {
            get { return _value; }
            set { this.RaiseAndSetIfChanged(ref _value, value); }
        }

        private decimal _time;
        public decimal Time
        {
            get { return _time; }
            set { this.RaiseAndSetIfChanged(ref _time, value); }
        }
    }
}

 

Does anyone know what I'm doing wrong? Or have any questions about my implementation?

[Rosy Topchiyska]

Hi Matt,

Thank you for contacting us.

The main problem that I see in the code snippet is incorrect cell type in the DataTemplate. Please, take a look at this article from our online documentation that has information about all supported cells.

I have also attached a sample project with a ListView with charts. You can take a look and see if this could help. If you still have problems, it will be very helpful if you send us a project that reproduces the issue. You could use our support ticket system where you can attach files.

As a side note, I suggest that you use a Grid instead of the StackPanel as root layout, because the StackPanel does not restrict the height of the ListView and it will realize all the items. This could lead to performance issues.

I hope this helps.

Regards,
Rosy Topchiyska
Telerik

[Matt]

Thank you for your reply and example. The customlist view i have is inheriting from the Xamarin listview, not the telerik one. Are you saying I can't add a telerik chart to a xamarin forms list view?

[Rosy Topchiyska]

Hello Matt,

Thank you for the clarifying that. In the attached project from my previous reply I replaced the RadListView with a custom list view that inherits from the Xamarin ListView and the chart renders again. So it is something in the custom list view that causes the problem. Could you please send us your list view class? A project would be even better, it will help us isolate the problem faster.

I look forward to your reply.

Regards,
Rosy Topchiyska
Telerik

[Matt]

I don't see a project attached to your post :( 

Here is the code for the CustomListView

namespace Mobile.Infrastructure
{
    using Xamarin.Forms;

    public class CustomListView : ListView
    {
        protected override void SetupContent(Cell content, int index)
        {
            base.SetupContent(content, index);

            var currentViewCell = content as ViewCell;
            if (currentViewCell != null)
            {
                currentViewCell.View.BackgroundColor = index % 2 == 0 ? Color.FromHex("e1e1e1") : Color.White;
            }
        }
    }
}

[Matt]

Ooooh, the project in your previous post. I'll check it out!

[Matt]

Your previous post has the same project with a teleriklistview.

[Matt]

I can't build your project also, it has problems with the embedded resources when i download the zip. I switched to a regular xamarin list view and it still doesn't seem to be working.

[Rosy Topchiyska]

Hello Matt,

Before building the project, try to restore the NuGet packages. If the errors change, check if all Telerik references are valid. If there are missing Telerik references, you have to clean them and add them from the right location. By default they stay in the installation folder of the controls: C:\Program Files (x86)\Telerik\UI for Xamarin Q2 2016\Binaries\.

If you still have issues, could you please provide more specific information:

• Xamarin version
• Platform (Android, iOS, WinRT, All)
• IDE (Xamarin Studio, Visual Studio)

I have attached a new project, that is close to your scenario - Xamarin ListView with Telerik Chart. Restore the NuGet packages and try to run it.

You can also take a look at the StartPage files in the Portable project in the attachment. They contain all the important information and you can try to use the code in a different project.

If you still have problem with adding the chart in your listview, please use our support ticket system to send us a project that reproduces the issue. You can open a new Ticket from the Support section when you log into your Telerik account.

I hope this helps.

Regards,
Rosy Topchiyska
Telerik

[Matt]

I couldn't build your project after following the steps you listed so I created my own and put your code in it. It doesn't show the charts though. I submitted a ticket. https://github.com/m4tt1mus/TelerikCharts

[Rosy Topchiyska]

Hello Matt,

Thank you very much for the project. We found the issue - the Xamarin.Forms.ExportRenderer attribute is global attribute and should appear after any top-level using directives and before any type or namespace declarations (MSDN). You have to bring these attributes outside the namespace and the chart will appear. It is very difficult to notice such problem, since the project builds without errors. We will update our documentation to avoid such problems in the future.

Regards,
Rosy Topchiyska
Telerik