Graph Label showing different result for iOS and Android

[Benjamin]

All my chart category label are showing different result for iOS and Android.

Also for the StackingColumnSeries i have a fuction to sum the numeric axis. it is working properly for iOS but it seems that Android is showing NaN

Xaml Code

C# Code for summing

Result

[Devakumar Dhanapoosanam]

Hi Benjamin, 

 

Greetings from Syncfusion. 

 

Query 1: CategoryAxis label are showing different result for iOS and Android? 

 

Based on the provided code snippet we suspect that due to setting the Axis MaxWidth="70" and WrappedLabelAlignment="End" you were facing this issue.  

 

Solution: You can resolve this by increasing the MaxWidth value or by removing the MaxWidth property. 

 

Query 2: DataMarker label value showing NaN Android and iOS working proper? 

 

We have analyzed the provided code snippet and screenshot, we suspect that you were adding some empty DataPoints for the StackingColumnSeries by adding the double.NaN value.  

 

Solution: You can resolve this issue by changing the empty DataPoints values as “0” instead of NaN.  

 

Hope the above solution will resolves your issue. 

 

Incase if we misunderstood the reported issue, can you please share the following details which will be helpful for us to analyze the reported issue and to provide a possible solution at earliest? 

·       Please share the chart related code snippet along with the data points value used. 

·       CategoryAxis axis label showing difference result can you please share the both platform output screenshot. 

·       Can you please share the current SfChart version using in your sample?  

 

Regards, 

Devakumar D 

[Benjamin]

Hi Devakumar,

Thanks for the reply, I have checked and there isn't any empty data point. not sure why is it only showing NaN on Android only

[Benjamin]

I have tried displaying the label in another way but seems that the label position cant be change

DataMarkerXAML

 <DataTemplate x:Key="sentimentCoulmnMarker">

         <StackLayout Orientation="Horizontal">

              <Label Text="{Binding FirstLine}" TextColor="{DynamicResource textColor}" FontFamily="Roboto" FontSize="12" />

         </StackLayout>

</DataTemplate>

<chart:StackingColumnSeries.DataMarker>

         <chart:ChartDataMarker ShowLabel="True" LabelTemplate="{StaticResource sentimentCoulmnMarker}">

                     <chart:ChartDataMarker.LabelStyle LabelPosition="Outer">

                                  <chart:DataMarkerLabelStyle BackgroundColor="Transparent" />

                     </chart:ChartDataMarker.LabelStyle>

          </chart:ChartDataMarker>

</chart:StackingColumnSeries.DataMarker>

Final result

What i wanted is for the label to be outside the bar at the top

[Devakumar Dhanapoosanam]

Hi Benjamin, 

 

We have tried to reproduce the reported issue “DataMarker label value showing NaN Android” at our end and we were unable to reproduce the reported issue. The provided solution works proper in android too.  

 

Please find the tested sample below which works fine at our end, when setting the chart datapoints YValue as “0”. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/152173/ze/152173133013178.zip  

 

Screenshot: 

 

 

 

Can you please share the issue reproducing sample or if possible, please modify the provided sample to reproduce the issue which will be helpful to analyze the issue and provide a possible solution at earliest? 

 

Regards, 

Devakumar D 

[Benjamin]

Hi Devakumar,

Thanks for the reply. 

My app contains some sensitive information like company login credentials and server address. 

I can produce the NaN error with the following:

• call web service to get JSON data
• view model will process the JSON data for display to chart

I realized that the NaN will not happen if I removed the web service part

the following will result in NaN not happening (Scenario 1)

 List < CSATClientSentiment >data = new List < CSATClientSentiment >();

var myData = JsonConvert.DeserializeObject>("some json string");

data = myData;

return data;

the following will result in NaN happening (Scenario 2)

List < CSATClientSentiment >  data = new List < CSATClientSentiment >();            

string url = serverName + "wsCSATService.asmx/getSentiment?strFilters=" + strFilters;

HttpClient client = new HttpClient();

var response = await client.GetAsync(url).ConfigureAwait(false);

if (response.IsSuccessStatusCode)

{

     var jsonData = JsonConvert.DeserializeObject < CSATClientSentiment >(strResponse);

     data = jsonData;

}

...

return data;

I have double-checked on the web service and did return me with the JSON data and  JsonConvert.DeserializeObject manage to deserialize the string properly

I have also printed out all data point on the screen and all points have value

I have edited the sample provided with my code. As the URL contains my server address and stuff, this code will only demonstrate Scenario 1, hope you are able to edit to looks like Scenario 2

But what I felt is that the web service calls shouldn't have any issue since iOS is working perfectly fine. But not sure why there is issue with Android.

Attachment: 152173133013178_1fe56fe2.7z

[Devakumar Dhanapoosanam]

Hi Benjamin, 

 

Thanks for updating the sample with replication details.  

 

We have analyzed the provided sample and code snippet using json data value for both “Scenario 1” and “Scenario 2”. As per your update, you can get the proper data marker value while using the json data as a string as per in below 

 

Json data: 

"[{'GDC/Country1':'Country','RegionName':'Asia Pacific','Class':'Swift response','Happy_Closed':2,'Feedback_Closed':2}, {'FilterType':'Regional','GDC/Country1':'Country','RegionName':'Asia Pacific','Class':'Technical Excellence','Happy_Closed':2,'Feedback_Closed':2}, 

…… 

'FilterType':'Regional','GDC/Country1':'GDC Prague','RegionName':'Europe','Class':'Technical Excellence','Happy_Closed':7,'Feedback_Closed':7}]"; 

 

 

On after deserializing that data, you have done some calculation to convert that CSATClientSentiment to ChartData. For that consideration mainly made on the Happy_Closed data as per in provided string json format, that Happy_Closed has proper values (i.e not having NaN or null data). 

 

So, our suspection goes on the provided Json file (from web service). That file information of Happy_Closed may have a chance of getting NaN values. So, to ensure that could you please check whether the data value of Happy_Closed has NaN or not, before getting that data into GetData method. If suppose, that data has NaN then convert that to “0” for resolving the issue. 

 

Without having the proper json data form the server value we were unable to check the reported issue using scenario 2.   

   

Can you please ensure us the following details?  

   

·       Please check StackingColumnSeries ItemsSource has proper values for YValue without having NaN.  

·       Can you please ensure whether the final data points value set for the StackingColumnSeries (ClientSentimentSwiftColumn) which has the DataMakerLabelCreated doesn’t have any NaN when getting json data from sever. 

 

Regards, 

Devakumar D 

[Benjamin]

Hi Devakumar,

Thanks for replying.

Firstly, the json data i have passed to you is the exact same data as when NaN appear on Android

Please check StackingColumnSeries ItemsSource has proper values for YValue without having NaN. 

I have verified this by printing all the YValue of the ObseravableCollection on screen, and all the YValues are of valid double values

 

Can you please ensure whether the final data points value set for the StackingColumnSeries (ClientSentimentSwiftColumn) which has the DataMakerLabelCreated doesn’t have any NaN when getting json data from server.

Same as point 1, all the data point set on this StackingColumnSeries are of valid double values

[Devakumar Dhanapoosanam]

Hi Benjamin, 

 

Thanks for your update. 

 

Under your account, we have created a support incident to track the status of this reported issue.  

 

Please log on to our support website to check for further updates.   

 

Link: https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents/  

 

Regards, 

Devakumar D 

[Benjamin]

Hi Benjamin, 

 

Greetings from Syncfusion. 

 

Query 1: CategoryAxis label are showing different result for iOS and Android? 

 

Based on the provided code snippet we suspect that due to setting the Axis MaxWidth="70" and WrappedLabelAlignment="End" you were facing this issue.  

 

Solution: You can resolve this by increasing the MaxWidth value or by removing the MaxWidth property. 

 

Query 2: DataMarker label value showing NaN Android and iOS working proper? 

 

We have analyzed the provided code snippet and screenshot, we suspect that you were adding some empty DataPoints for the StackingColumnSeries by adding the double.NaN value.  

 

Solution: You can resolve this issue by changing the empty DataPoints values as “0” instead of NaN.  

 

Hope the above solution will resolves your issue. 

 

Incase if we misunderstood the reported issue, can you please share the following details which will be helpful for us to analyze the reported issue and to provide a possible solution at earliest? 

·       Please share the chart related code snippet along with the data points value used. 

·       CategoryAxis axis label showing difference result can you please share the both platform output screenshot. 

·       Can you please share the current SfChart version using in your sample?  

 

Regards, 

Devakumar D 

With regard to the NaN issue, it was surprisingly fixed by itself. not sure what was the issue.

With regards to my queries on the MaxWidth, I have changed the value from 70 to 150 or even 200, but it is still not solving the issue.

The issue is only 1 character, i want the word Country to be appearing on the same line instead of in the attached image where the word gets split at the Y

[Devakumar Dhanapoosanam]

Hi Benjamin, 

 

Thanks for your update. 

 

We have analyzed the reported query and the previous provided code snippet. We were able to reproduce the reported issue when set Margin value. You can resolve this reported issue by removing the Margin value set for the ChartAxisLabelStyle and set the MaxWidth value based on your requirement as per in below code snippet, 

 

XAML: 

<chart:SfChart.PrimaryAxis> 

           <chart:CategoryAxis ShowMajorGridLines="False"> 

                        <chart:CategoryAxis.LabelStyle> 

                            <chart:ChartAxisLabelStyle FontFamily="Roboto" FontSize="14" Margin="0" 

                                                       WrappedLabelAlignment="End"  

                                                       MaxWidth="{OnPlatform Android='70', iOS='80', UWP='80'}" 

                                                       TextColor="Blue" /> 

                        </chart:CategoryAxis.LabelStyle> 

           </chart:CategoryAxis> 

</chart:SfChart.PrimaryAxis> 

 

Screenshot: 

 

  

Please let us know whether the above solution works for requirement or not. 

 

Regards, 

Devakumar D 

[Benjamin]

Hi Devakumar,

Thanks for the reply. I am able to fix the label alignment issue following your advice. thanks for the assistance.

[Devakumar Dhanapoosanam]

Hi Benjamin, 

 

Thanks for your update. 

 

We are glad to hear that the provided solution works. 

 

If you need any further assistance, please don't hesitate to contact us. 

 

Regards, 

Devakumar D