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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data Point Selection and chart data source change. Tooltip with other info source.

Thread ID:

Created:

Updated:

Platform:

Replies:

142753 Feb 18,2019 11:02 AM UTC Mar 5,2019 08:54 AM UTC Xamarin.Android 5
loading
Tags: SfChart
Denys
Asked On February 18, 2019 11:02 AM UTC

Hello, sorry for my english. There are 2 questions, information on which I could not find myself.

1. How can I show a tooltip with information from a data source that is not involved in plotting? There is a list of incoming data (1) and a list with already made calculations(2). The graph is based on data from the second list(2), but at the tooltip I want to show information from the list with the input data(1) that was used to calculate the second list(2).

2. When I select a graph column, I get its index. Using an index, I consider the percentage of the selected column to the remaining columns. After calculations, I change the YBindingPath and get the graph I need with comparative data (example in the screenshots). But due to the fact that the initially selected column has a value of 0%, I cannot click on the column and deselect it. To get the initial schedule, I have to double click on another column in the percent mode. Is it possible to display a vertical cancel button in place of a column with 0%? Perhaps there is a more correct way to return the original schedule? I add a part of my code.

Thank you in advance.



Attachment: cs_code_319962d2.rar

Bharathiraja K [Syncfusion]
Replied On February 20, 2019 10:12 AM UTC

Hi Denys, 
 
Greetings from Syncfusion. Please find the response for your requirement below here. 
 
Query 1: show the tooltip with information from a data source that is not involved in plotting? 
We can achieve your requirement by using the TooltipCreated event. 
 
Please refer the below code snippet.  
Code Snippet [C#]: 
chartArea.TooltipCreated += ChartArea_TooltipCreated; 
 
private void ChartArea_TooltipCreated(object sender, SfChart.TooltipCreatedEventArgs e) 
{ 
            var ser = e.P1.Series; 
            var data = e.P1.Series.ItemsSource as ObservableCollection<Model>; 
            if(ser.SelectedDataPointIndex > 0) 
                e.P1.Label =  data[ser.SelectedDataPointIndex].Area.ToString(); 
} 
 
Please refer below UG link for more details: 
 
Query 2: Is it possible to display a vertical cancel button in place of a column with 0%? 
 
We can achieve your requirement by using the ChartAnnotation. We can add the annotation at the “0” value. And by using the AnnotationClicked event we can deselect the selected segment. 
 
Please refer the below code snippet.  
 
Code Snippet [C3]: 
chartArea.AnnotationClicked += ChartArea_AnnotationClicked; 
 
private void ChartArea_AnnotationClicked(object sender, ChartAnnotationClickedEventArgs e) 
{ 
       //add your code here    
} 
 
Code Snippet [C#]: 
void Chart_SelectionChanged(object sender, SfChart.SelectionChangedEventArgs e) 
{ 
         …….        
         if (viewModel.compares[idxArea].InPercent == 0 && e.P1.SelectedDataPointIndex == idxArea) 
         { 
                 VerticalLineAnnotation lineAnnotation1 = new VerticalLineAnnotation() { StrokeWidth = 10, StrokeColor = Color.Transparent }; 
                 lineAnnotation1.X1 = idxArea; 
                 lineAnnotation1.Y1 = 0; 
                 lineAnnotation1.Text = "0 % "; 
                 lineAnnotation1.LabelStyle.TextSize = 20; 
                 lineAnnotation1.LabelStyle.VerticalLabelAlignment = ChartAnnotationAlignment.End; 
                 lineAnnotation1.LabelStyle.HorizontalLabelAlignment = ChartAnnotationAlignment.Center; 
                 chartArea.Annotations.Clear(); 
                 chartArea.Annotations.Add(lineAnnotation1); 
          } 
          ….. 
} 
 
We have prepared a sample for your requirement and it can be downloaded from the below link. 
 
Please refer below UG link for more details: 
 
Query:  To get the initial schedule, I have to double click on another column in the percent mode 
 
Since we are not clear with this query, could you please share more information about your exact requirement. It will be more helpful to analyze and provide you solution. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Bharathiraja. 


Denys
Replied On February 22, 2019 07:50 AM UTC

Hello, thanks for your help and the sample provided. There are still a few questions that I could not solve.

Annotation. 
1. How to make the click on the annotation do the actions I need, and then delete the annotation itself?
2. If you click on the column with the highest value, the annotation is not visible, see screenshot1.

Tooltip.
1. Is it possible to show a tooltip not on a click, but on a long tap?
2. In the sample, the tooltip for the first column displays incorrect information, see screenshot2.
3. Is it possible to show information in this way:
There is a List1 <T1> with two objects: "quantity" and "diameter". And there is a List2 <T2> with the object "area".
We construct the graph according to the data of the List2 <T2> object "area". Is it possible then in the tooltip to display information in two lines, like this:
"quantity" = value from List1 <T1>
"diameter" = value from List1 <T1>





Bharathiraja K [Syncfusion]
Replied On February 26, 2019 10:21 AM UTC

Hi Denys, 
 
Please find the response for your requirement below here. 
 
Query: Using Annotation  
 
We have used the DataMarkerCreated Event to show a Text “0 %” instead of using the chart Annotation for the column with 0 value. This will display text for the column with the highest value proper. 
 
Please refer the below code snippet for more details: 
 
Code Snippet [C#]: 
seriesArea.DataMarkerLabelCreated += SeriesArea_DataMarkerLabelCreated; 
 
private void SeriesArea_DataMarkerLabelCreated(object sender, ChartSeries.DataMarkerLabelCreatedEventArgs e) 
{ 
     var data = e.DataMarkerLabel.Data as Model; 
     if (data != null && (chartArea.Series[0] as ColumnSeries).YBindingPath ==       
              "InPercent" && data.InPercent == 0) 
     { 
         TextView text = new TextView(this) { Text = "0 %", Rotation = -90 }; 
         text.SetTextColor(Color.Black); 
         text.Click += Text1_Click; 
         e.DataMarkerLabel.View = text;//Add text for the column with 0 value 
     } 
} 
 
private void Text1_Click(object sender, EventArgs e) 
{ 
      //Do your action in here and delete the text created 
      var textView = sender as TextView; 
      textView.Text = string.Empty; 
      textView = null; 
} 
 
 
Tooltip: 
 
Query: 1. Is it possible to show a tooltip not on a click, but on a long tap? 
We would like to let you know the behavior of chart tooltip, the tooltip will display only when tap any column segment and this is the default behavior of the tooltip. There is no long press option. 
 
You can use the tooltip show and hide method of tooltip programmatically. Please refer the below UG link for more details. 
UG link: 
 
Query 2: In the sample, the tooltip for the first column displays incorrect information, see screenshot2. 
The tooltip value shows wrong value for the first index due the index value is checked with the 0 value. Now we have changed it with -1 and it will work proper for the first column. 
 
Query 3: 
We have displayed the tooltip with the data from the List<T> of data with Quantity and Diameter using the ToolTipCreated event. 
 
Please refer the below code snippet: 
Code Snippet [C#]: 
private void ChartArea_TooltipCreated(object sender, SfChart.TooltipCreatedEventArgs e) 
{ 
       var ser = e.P1.Series; 
       var data = e.P1.Series.ItemsSource as ObservableCollection<Model>; 
       if (ser.SelectedDataPointIndex > -1) 
            e.P1.Label = data[ser.SelectedDataPointIndex].Area.ToString() +  
               "\n Quantity :" + data[ser.SelectedDataPointIndex].Quantity.ToString() + 
               "\n Diameter :" + data[ser.SelectedDataPointIndex].Diameter.ToString(); 
} 
 
 
Please refer below UG link for more details:  
  
We have prepared a sample for your requirement and you can download the sample from the below link. 
 
 
Regards, 
Bharathi 


Denys
Replied On March 4, 2019 11:07 AM UTC

Thank you very much for your help and samples, everything works perfectly.



Bharathiraja K [Syncfusion]
Replied On March 5, 2019 08:54 AM UTC

Hi Denys, 
 
Thanks for your feedback. As always, we are happy to assist you. 
 
Regards, 
Bharathiraja. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon