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
LineSeries is a sealed class so it cannot be derived from. I recommend that you keep the LineSeries seperate and use your custom series as an overlay over the top of the LineSeries. If you'd like you could pass the LineSeries to your custom series so it would have access to it's properties if you need those in order to render the stickies.
I was able to use a combination of your two ideas to create a semi-working chart difference feature - this solution is not the best as XAML and code have to be applied to every chart display (our legacy chart has this feature built in, no adornments or configuration needed).
I ran into some problems with events on the chart/series, trying to use series mouse enter/leave events proves to be problematic as if I draw a tool tip upon entering the line series over top of the entry point, I immediately get a call back to the series mouse leave event - I assume this is because the mouse pointer is now hovering over the tool tip with the line series underneath - I had similar issues with the series mouse move events and dynamically displaying tool tips. Further, once I clicked to pop up a tooltip for the selected point, I could not click on the series line underneath the tooltip, I had to click on an un-obscured portion of the line - same issue as above.
I use black System.Windows.Shapes.Ellipse to draw the location of the selected points and a translucent System.Windows.Controls.Label to draw the tooltip. if I click on an un-obscured red section of the line, I get a click event with valid line/item info. If I click on an Ellipse or the Label that has the series drawn under it, I do not get an event. To solve this, I had to set myEllipse.IsHitTestVisible = false; and toolTipDisplay.IsHitTestVisible = false; on the Ellipse and Label to get the mouse event/data passed down to the line series.
Thanks for the input, you saved me several days of research.
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?
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.
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