This is a migrated thread and some comments may be shown as answers.
XAML based chart not working
10 Answers 66 Views
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 16 Jun 2016, 09:47 PM

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" ?>
             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?

10 Answers, 1 is accepted

Sort by
0
Rosy Topchiyska
Telerik team
answered on 17 Jun 2016, 03:09 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Matt
Top achievements
Rank 1
answered on 17 Jun 2016, 06:15 PM
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?
0
Rosy Topchiyska
Telerik team
answered on 20 Jun 2016, 06:49 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Matt
Top achievements
Rank 1
answered on 20 Jun 2016, 02:04 PM

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;
            }
        }
    }
}

0
Matt
Top achievements
Rank 1
answered on 20 Jun 2016, 02:15 PM
Ooooh, the project in your previous post. I'll check it out!
0
Matt
Top achievements
Rank 1
answered on 20 Jun 2016, 02:25 PM
Your previous post has the same project with a teleriklistview.
0
Matt
Top achievements
Rank 1
answered on 20 Jun 2016, 09:25 PM
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.
0
Rosy Topchiyska
Telerik team
answered on 23 Jun 2016, 12:45 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Matt
Top achievements
Rank 1
answered on 27 Jun 2016, 02:17 PM
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
0
Accepted
Rosy Topchiyska
Telerik team
answered on 29 Jun 2016, 10:27 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Matt
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
Matt
Top achievements
Rank 1
Share this question
or