We are replacing our legacy graphs with xamDataChart and we are trying to replicate a feature where the user can select two points from a set of graphed lines on the same graph and see the difference in values between them. The attached screen shot first shows the xamDataChart tooltip that pops up when a hovering over the graph, the second shows the display we are typing to replicate, where a user has clicked on two points of two different graph lines to get a third tool tip showing the difference in values. The user still gets tool tips for other points on the graph, while the initial 3 tool tips (the first and second points clicked on and the difference tooltip) remain "sticky" and do not go away until the user clicks on the graph again.
How can we make a tool tip sticky on the graph while still displaying other dynamic tool tips and how can we draw on the xamDataChart for the 3rd difference tool tip?
The basic XAML we are using for the line series looks like this:
<ig:XamDataChart.Series>
<ig:LineSeries x:Name="projected" Title="Projected" Legend="{Binding ElementName=xmLegendOTC}" XAxis="{Binding ElementName=xAxis2}" YAxis="{Binding ElementName=yAxis}" ValueMemberPath="Forecast" Thickness="2" MarkerType="None" Brush="Red" UnknownValuePlotting="LinearInterpolate">
<ig:LineSeries.ToolTip>
<TextBlock Text="{Binding Item.ProjectedLoadDisplay}"/>
</ig:LineSeries.ToolTip>
</ig:LineSeries>
<ig:ItemToolTipLayer TargetSeries="{Binding ElementName=projecte}" UseInterpolation="True" />
</ig:XamDataChart.Series>
Hello Gary,
Each series in the chart has it's own Canvas that it uses to render it's chart elements. This canvas is accessible through the RootCanvas property. You should be able to add your own elements to this canvas based on whatever logic you require. So if your logic requires that you add a sticky tooltip to the chart based on a mouse click, you can handle the SeriesMouseLeftButtonDown event on the XamDataChart to determine what data point the user clicked on, and then you can add a custom control to represent your sticky tooltip to the RootCanvas of the series. You can position the custom control by setting the Canvas.SetLeft()/SetTop() static methods on the custom control.
Alternatively, and the less "hacky" way, is to create your own custom series. The series will provide you with a render method which you can use to render your tooltips in whatever location you require in the plot area. You also have access to mouse events which you can use to detect where the user clicked to place the sticky. This series would sit on top of your other series and you could assign it the same ItemsSource as your other series so it will know about the data points. An example of a custom series can be found here: http://help.infragistics.com/doc/WPF/2014.1/CLR4.0/?page=xamDataChart_Creating_Custom_Series.html
Let me know if you have any questions on this.
Is there any way to inherit from the existing LineSeries class to achieve the less "hacky" way? Something like:
public class BaseDataChartSeries : Series
{
// ...
protected override void RenderSeriesOverride(bool animate)
// Call the base class to draw the line
base.RenderSeriesOverride(animate);
// draw tooltips as needed ...
}
I meant more something like this:
public class OverlayChartSeries : LineSeries
No, I increased the line thickness to make it easier for users to select a line.
Thanks!
Do you have any other questions on this matter?
Sincerely,Valerie Developer Support Supervisor - XAMLInfragisticswww.infragistics.com/support
Currently the chart performs a direct hit test against the series elements in order to determine if the mouse was over a particular series. This hit test is pixel perfect so for very small objects, I can see it causing issues. At the moment there is no way to add a buffer to this hit test other than increasing the element size (thickness in your case).
I recommend that you submit this as a new product idea for the XamDataChart. (http://ideas.infragistics.com)
There are many benefits to submitting an product idea:
- Direct communication with our product management team regarding your product idea.- Notifications whenever new information regarding your idea becomes available.- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.- Allow you to shape the future of our products by requesting new controls and products altogether.- You and other developers can discuss existing product ideas with members of our Product Management team.
Steps to create your idea:
1. Log into the Infragistics Product Idea site at http://ideas.infragistics.com (creating a new login if needed).2. Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)3. Add your product idea and be sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!
The Product Idea site puts you in the driver’s seat and allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
One other thing with the series events - I have to increase the thickness of the line series to make it easier for the user to click on (1 pixel width means the user has to get the mouse on a single pixel of the line, vs. 4 pixels gives the user a bigger area for clicking on a line series). Is there any way to get a bigger clickable area for events without increasing the thickness of the line?
That is very clever, using the IsHitTestVisible property to ignore mouse events on the tooltip itself to get around the mouse issues. It's one of those properties that I rarely ever use so I forget it exists but this is the perfect application for it. Thank you for providing an explanation of what you did as it may be useful for other people.