This is a migrated thread and some comments may be shown as answers.
Xamarin Forms Chart not Rendering on Android properly
3 Answers 70 Views
This is a migrated thread and some comments may be shown as answers.
Zeeshan
Top achievements
Rank 1
Zeeshan asked on 18 Dec 2015, 10:20 AM

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

3 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 23 Dec 2015, 09:29 AM
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
0
Zeeshan
Top achievements
Rank 1
answered on 23 Dec 2015, 10:08 AM
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.            };
0
Pavel R. Pavlov
Telerik team
answered on 28 Dec 2015, 08:37 AM
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
Tags
Chart
Asked by
Zeeshan
Top achievements
Rank 1
Answers by
Ves
Telerik team
Zeeshan
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or