We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Graph Label showing different result for iOS and Android

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



12 Replies

DD Devakumar Dhanapoosanam Syncfusion Team March 6, 2020 06:32 PM UTC

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 



BE Benjamin March 10, 2020 06:16 AM UTC

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


BE Benjamin March 11, 2020 04:03 AM UTC

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


DD Devakumar Dhanapoosanam Syncfusion Team March 11, 2020 06:21 PM UTC

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



BE Benjamin March 12, 2020 02:07 PM UTC

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


DD Devakumar Dhanapoosanam Syncfusion Team March 13, 2020 11:06 AM UTC

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 



BE Benjamin March 14, 2020 04:11 AM UTC

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


DD Devakumar Dhanapoosanam Syncfusion Team March 16, 2020 12:42 PM UTC

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.   
 
 
Regards, 
Devakumar D 



BE Benjamin replied to Devakumar Dhanapoosanam March 30, 2020 06:12 AM UTC

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






DD Devakumar Dhanapoosanam Syncfusion Team March 31, 2020 02:54 PM UTC

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 



BE Benjamin April 1, 2020 04:18 AM UTC

Hi Devakumar,

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


DD Devakumar Dhanapoosanam Syncfusion Team April 2, 2020 05:38 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon