Hello,
I would like to show the values from all series in one combined tooltip, like the picture below. Is that possible? If yes, how.
Hello Bin,
Thank you for posting to Infragistics Community!
I have been looking into your question and I believe you will find the Category Tooltip Layer topic in our documentation very helpful on the matter. The CategoryToolTipLayer displays grouped tooltips for the series on the XamDataChart control using a category axis.
<ig:XamDataChart > <!— other configs --> <ig:XamDataChart.Axes> <!— axes --> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <!— series --> <ig:CategoryToolTipLayer ToolTipPosition="Auto" TransitionDuration="0:00:00.1"/> </ig:XamDataChart.Series> </ig:XamDataChart>
Furthermore, by setting the ToolTip object of each series, you could add additional text for each series value.
<ig:LineSeries ItemsSource="{StaticResource data}" ValueMemberPath="Oil" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}"> <ig:LineSeries.ToolTip> <StackPanel Orientation="Horizontal"> <TextBlock>Some text:</TextBlock> <TextBlock Text="{Binding Item.Oil}" /> </StackPanel> </ig:LineSeries.ToolTip> </ig:LineSeries>
If this is not an accurate demonstration of what you would like to achieve, please do provide more details regarding the types of series and axes used. Thank you for your cooperation.
Attached you will find a small sample with a XamDataChart displaying several series and demonstrating the CategoryToolTipLayer. Please, test it on your side and if you require any further assistance on the matter, please let me know.
Best regards,Bozhidara PachilovaAssociate Software Developer
2117.XDCCategoryTooltipLayer.zip
Thanks. This sounds pretty good. Is it possible to set a custom text at the top of the control? E.g. a group name or the timestamp of the XAxis? As in the image above.
Good to hear that this approach might be suitable for your scenario!
Regarding your latest query, please find attached a modified version of the previous sample demonstrating how to add additional text to the tooltip’s contents by specifying the PointerToolTipStyle property of the CategoryToolTipLayer and setting its Template. As you will see, there is also additional logic around retrieving the index of the item under the current mouse position, so that the category name can be displayed in the tooltip as well.
I hope this helps achieve your requirement. Let me know of any other questions on this matter.
Best regards, Bozhidara Pachilova
3630.XDCCategoryTooltipLayer2.zip
Hi Bin,
Yes, you are correct that the approach to retrieving the value under the mouse position for a CategoryDateTimeXAxis would be different.
Please, find attached an updated sample demonstrating a chart with a CategoryDateTimeXAxis and the custom CategoryToolTipLayer.
Let me know if it helps achieve your requirement.
8306.XDCCategoryDateTimeAxis.zip
Thanks, I didn't recognize it.
I implemented that code now, but I get for the itemIndex always -2147483648
private void dataChart_MouseMove(object sender, MouseEventArgs e) { XamDataChart chart = sender as XamDataChart; Point mousePosition = e.GetPosition(chart.Series[0].RootCanvas); int itemIndex = (int)xAxis.UnscaleValue(mousePosition.X); Debug.Print(itemIndex.ToString()); if (itemIndex >= 0 && itemIndex < _viewModel.ChartItems.Count) { _viewModel.CurrentToolTipTimestamp = _viewModel.ChartItems[itemIndex].Timestamp; } }
I am using a CategoryDateTimeXAxis. Can that be an issue?
<ig:XamDataChart.Axes> <ig:CategoryDateTimeXAxis Name="xAxis" ItemsSource="{Binding ChartItems}" DateTimeMemberPath="Timestamp" Label="{}{0:HH:mm:ss}" MinimumValue="{Binding XAxisMinimum}" MaximumValue="{Binding XAxisMaximum}" Strip="Transparent" MajorStroke="Transparent"/> <ig:NumericYAxis Name="yAxis" Label="{Binding YAxisLabel}" MinimumValue="{Binding ChartSettings.YAxisActualMinValue}" MaximumValue="{Binding ChartSettings.YAxisActualMaxValue}"/> </ig:XamDataChart.Axes>
I am wondering if you have had the chance to take a closer look at the latest sample? I am asking this because, as mentioned in my previous message, there is code that serves to retrieve the index of the item under the current mouse position, so that the category name can be displayed in the tooltip as well. As I am not aware of your data model and the sample’s purpose is to demonstrate the CategoryToolTipLayer rather than specific data, the X Axis in the sample is not a Timestamp object, however the approach would be just the same.
Please, take a look at the below screenshot, where you can see that the category name “C5” for which the tooltip is currently displayed is also present in the tooltip text:
In case you need further assistance with anything specific, I could suggest modifying the sample with the relevant code and sending it back to me, so I can investigate it. If you have any other questions, please let me know.
Thanks for the example.
i would like to show the timestamp at the top of the tooltip. How can I access the series item?