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

Tooltip customization

Thread ID:

Created:

Updated:

Platform:

Replies:

123456 Mar 18,2016 10:48 AM Apr 1,2016 01:33 AM Xamarin.Forms 8
loading
Tags: SfChart
Alex
Asked On March 18, 2016 10:48 AM

We just started to evaluate Syncfusion and specially the charts component for Xamarin.Forms.

For a use case we need to customize the tooltip label. By default it seems we can only display the YAxis value.
For example I would like to bind to another property of the model. (e.g "18.03.2016: 15.5")
With Syncfusion WPF it's possible to achieve this with a TooltipTemplate.

Is there any way to do that?



Alex
Replied On March 21, 2016 06:14 AM

I partially solved it by implementing a custom renderer with TooltipCreated & LabelsGenerated (for trackball) events.

But I can only get X & Y values. So I cannot get any other properties of the model to display it in the tooltip.


Manivannan Elangovan [Syncfusion]
Replied On March 21, 2016 08:53 AM

Hi Alexandre,

Thanks for contacting Syncfusion support.

We have prepared a sample for getting data from model to customize the tooltip content and it can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123456/ze/TooltipCustomize976660311

Regards,
Manivannan E.

Alex
Replied On March 22, 2016 03:25 AM

Thanks a lot. It's really helpful.
However it only works with 1 axis.
I was able to fix it for Android like that:

public class CSfChartRenderer : Syncfusion.SfChart.XForms.Droid.SfChartRenderer

{

private SfChart _nativeChart;

private Syncfusion.SfChart.XForms.SfChart _formsChart;

protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Syncfusion.SfChart.XForms.SfChart> e)

{

base.OnElementChanged(e);

_nativeChart = Control;

_formsChart = e.NewElement;

_nativeChart.TooltipCreated += sfChart_TooltipCreated;

_nativeChart.LabelsGenerated += sfChart_LabelsGenerated;

}

void sfChart_LabelsGenerated(object sender, Com.Syncfusion.Charts.SfChart.LabelsGeneratedEventArgs e)

{

IList<ChartPointInfo> infos = e.P1 as IList<ChartPointInfo>;

for (int i = 0; i < infos.Count; i++)

{

ChartPointInfo pointInfo = infos[i];

pointInfo.Label = SetTooltip(pointInfo.ChartDataPoint);

}

}

private void sfChart_TooltipCreated(object sender, SfChart.TooltipCreatedEventArgs e)

{

e.P1.Label = SetTooltip(e.P1.ChartDataPoint);

}

private string SetTooltip(ChartDataPoint chartDataPoint)

{

int index = -1;

System.Collections.IList data = null;

int count = _nativeChart.Series.Size();

for (int i = 0; i < count; i++)

{

index = ((ArrayList)((ChartSeries)_nativeChart.Series.Get(i)).DataSource).IndexOf(chartDataPoint);

if (index > -1)

{

data = _formsChart.Series[i].ItemsSource as System.Collections.IList;

break;

}

}

if (index > -1 && data != null)

return (data[index] as ChartPointValue).ToolTip.ToString();

 

return string.Empty;

}

}


How can I do it for iOS?

Manivannan Elangovan [Syncfusion]
Replied On March 23, 2016 10:06 AM

Hi Alexandre,

We are unable to comprehend your exact requirement. However, we have prepared a sample to customize the trackball label content, by getting data from model and it can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123456/ze/Trackball1584514824

If the provided sample does not meet your requirement, could you please provide more details or screenshot regarding your requirement, which would be helpful for us to serve you better.

Regards,
Manivannan E.

Alex
Replied On March 23, 2016 11:03 AM

Please try to add a second serie in your sample projects.

For tooltip label and trackball label you access the series collection with index = [0]
That doesn't work if you have more than 1 serie in the chart.

Your code in Android (Solved by the previous code I post by parsing the series)
int index = ((ArrayList)((ChartSeries)nativeChart.Series.Get(0)).DataSource).IndexOf(e.P1.ChartDataPoint);

In iOS (I don't know how to solve it)

IList data = Chart.Series [0].ItemsSource as IList;

Is it more clear?

Thanks fo your help


Karthikeyan V [Syncfusion]
Replied On March 24, 2016 06:36 AM

Hi Alexandre,

 

We are able to achieve your requirement by using the following code snippet.

 

nint seriesIndex = chart.IndexOfSeries (tooltipView.Series);
IList data = Chart.Series [(int)seriesIndex].ItemsSource as IList;

 

Please let us know, if you have any queires.

 

Thanks,

Karthikeyan V.


Alex
Replied On March 31, 2016 10:21 AM

Exactly what I need!
Thanks a lot for your support

Manivannan Elangovan [Syncfusion]
Replied On April 1, 2016 01:33 AM

Hi Alexandre,

Thanks for the update. Please let us know if have any other queries.

Regards,
Manivannan E.

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.

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.

;