Xamarin Forms Chart not Rendering on Android properly

4 posts, 0 answers
  1. Zeeshan
    Zeeshan avatar
    2 posts
    Member since:
    Mar 2012

    Posted 18 Dec 2015 Link to this post

    Hi, the following test charting does not show Date/Category axis on android as it is showing well on WP (See attached files); can anybody tell me why?

    01.using System;
    02.using System.Collections.Generic;
    03.using System.Linq;
    04.using System.Text;
    05.using System.Threading.Tasks;
    06.using Telerik.XamarinForms.Chart;
    07.using TelerikTests.ViewModel;
    08.using Xamarin.Forms;
    09. 
    10.namespace TelerikTests.View
    11.{
    12.    public class ChartViewModel
    13.    {
    14.        private static Random random = new Random();
    15. 
    16. 
    17.        public ChartViewModel()
    18.        {
    19.            this.Data = GetDateTimeData(10);
    20.        }
    21. 
    22.        public List<TemporalData> Data { get; set; }
    23. 
    24.        public string Title { get; set; }
    25.        public static List<TemporalData> GetDateTimeData(int itemsCount)
    26.        {
    27.            var startDate = DateTime.Now.AddYears(-1);
    28. 
    29.            var items = new List<TemporalData>();
    30.            for (int i = 0; i < itemsCount; i++)
    31.            {
    32.                var data = new TemporalData();
    33.                data.Category = startDate.AddDays(i);
    34.                data.Value = random.Next(10, 30);
    35. 
    36.                items.Add(data);
    37.            }
    38. 
    39.            return items;
    40.        }
    41.    }
    42.    public class ChartPage :
    43.        ContentPage
    44.    {
    45.        public ChartPage()
    46.        {
    47.            this.BindingContext = new ChartViewModel() { Title="test"};
    48.            this.BackgroundColor = Device.OnPlatform
    49.                (
    50.                    Color.White, Color.White, Color.Transparent
    51.                );
    52.            var chart=CreateChart();
    53.            chart.HeightRequest = 300;
    54.            this.Content = chart;
    55.        }
    56. 
    57.        private static RadCartesianChart CreateChart()
    58.        {
    59.            var chart = new RadCartesianChart
    60.            {
    61.                HorizontalAxis = new Telerik.XamarinForms.Chart.DateTimeContinuousAxis() {
    62.                    GapLength = 0.5,
    63.                    MajorStep=1,
    64.                    MajorStepUnit = TimeInterval.Day,
    65.                    LabelFitMode = AxisLabelFitMode.Rotate,
    66.                    ShowLabels = true
    67.                    //PlotMode = AxisPlotMode.BetweenTicks
    68.                },
    69.                VerticalAxis = new Telerik.XamarinForms.Chart.NumericalAxis(),
    70.            };
    71.             
    72.            var series = CreateSeries();
    73.            series.DisplayName = "TEst";
    74. 
    75.            chart.Series.Add(series);
    76.            return chart;
    77.        }
    78. 
    79.        private static AreaSeries CreateSeries()
    80.        {
    81.            var series = new Telerik.XamarinForms.Chart.AreaSeries();
    82.            series.SetBinding(CategoricalSeries.ItemsSourceProperty, new Binding("Data"));
    83. 
    84.            series.ValueBinding = new Telerik.XamarinForms.Chart.PropertyNameDataPointBinding
    85.            {
    86.                PropertyName = "Value"
    87.            };
    88. 
    89.            series.CategoryBinding = new Telerik.XamarinForms.Chart.PropertyNameDataPointBinding
    90.            {
    91.                PropertyName = "Category"
    92.            };
    93. 
    94.            return series;
    95.        }
    96.    }
    97.}

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 23 Dec 2015 Link to this post

    Hi Zeeshan,

    Please, specify a LabelFormat for the axis. It may look like this "dd-MM-yyyy". This way the labels will be shown as expected. As a side note, I am afraid there is a problem with MajorStep/MajorStepUnit pair of properties at the moment.  The axis might not show correctly in some cases. You can skip setting them for the moment, here is how your axis definition can look like:

    HorizontalAxis = new Telerik.XamarinForms.Chart.DateTimeContinuousAxis()
                    {
                        LabelFitMode = AxisLabelFitMode.Rotate,
                        ShowLabels = true,
                        //PlotMode = AxisPlotMode.BetweenTicks,
                        LabelFormat = "dd-MM-yyyy"
                    },


    Best regards,
    Ves
    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
  3. DevCraft banner
  4. Zeeshan
    Zeeshan avatar
    2 posts
    Member since:
    Mar 2012

    Posted 23 Dec 2015 in reply to Ves Link to this post

    Now my problem is why chart is displaying differently on all 3 platforms while the chart code is the same?
    01.var chartView = new Grid()
    02.            {
    03.                RowDefinitions =
    04.                {
    05.                    new RowDefinition { Height = GridLength.Auto },
    06.                    new RowDefinition { Height = Device.OnPlatform(300, 500, 500) }
    07.                },
    08.                ColumnSpacing = 0              
    09.            };
    10.  
    11.            var chart = new RadCartesianChart
    12.            {
    13.                //BackgroundColor=Color.Aqua,
    14.                HorizontalAxis = new Telerik.XamarinForms.Chart.DateTimeContinuousAxis()
    15.                {
    16.                    LabelTextColor = Color.White,
    17.                    //MajorStep = 1,
    18.                    //MajorStepUnit = TimeInterval.Hour,
    19.                    LabelFitMode = AxisLabelFitMode.Rotate,
    20.                    LabelFormat = "dd/mm/yy hh:mm",
    21.                    ShowLabels = true,
    22.                },
    23.                VerticalAxis = new Telerik.XamarinForms.Chart.NumericalAxis() {
    24.                    LabelTextColor = Color.White              
    25.                },
    26.            };
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 28 Dec 2015 Link to this post

    Hello Zeeshan,

    The reason why the same data is represented differently in the different platforms is the fact we are not changing the default behavior of the native controls throughout the platforms. In this particular case it seems that there is no range defined for the NumericalAxis hence the underlying native controls (for iOS and WP) decide what the range should be. If you need to define the same look of the data throughout the different platforms you will need to set all the properties of the series, axes and charting components. This is the only way to ensure all the same settings are applied to all platforms. If there is any property that has not been set in your project, the native component will be initialized with its default value and those values may be different for the different platforms.

    Please try to set the Minimum and Maximum properties for the NumericalAxis in your project and let us know how it goes.

    I hope this answers your question. Do not hesitate to contact us again if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    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
Back to Top
DevCraft banner