Pre loader

Provide a custom Rollover/Tooltip to a FastImpulseRenderableSeries on click

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hi,

We need to introduce a new functionality in our application based on SciChart v.8.5.0.28160:
“The user should have the possibility to display peak positions and additional information, via peak selection, with a new mode”.

I’m using a SciChartSurface to display several FastImpulseRenderableSeries. The user must be able to click on a peak to display the data (peak position and other details in the metadata) in a tooltip/rollover near the PointMarker of the peak selected. This information must remain visible even when the mouse leaves the selected peak area. In addition, the user must be able to select multiple peaks, so that the data of the other selected peaks are also displayed. With a second click on a selected peak, the tooltip/rollover must disappear.


By adding a RolloverModifier on the SciChartSurface.ChartModifier I’m able to display basic information of the peak selected:

  <s:SciChartSurface
        <s:SciChartSurface.ChartModifier>
        <s:ModifierGroup s:MouseManager.MouseEventGroup="CustomMouseGroup">

            <sciChartTools:RolloverModifier
                IsEnabled="{Binding IsStickPatternModeActivated}"
                ShowTooltipOn="MouseLeftButtonDown"
                IncludeSeries="True"
                ShowAxisLabels="False"
                ReceiveHandledEvents="True"/>

        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>
</s:SciChartSurface>

But I have some problems:
1. If the user clicks on a series’ peak all the nearest peaks are displayed (undesirable behaviour!).
enter image description here
Instead I want to display only the peak selected (not a nearest peak, but only the selected one).

  1. The user must be able to select another peak to display the data related the new peak selected.
    enter image description here

  2. The data displayed must remain in the SciChartSurface either if the user moves the mouse (inside/outside the SciChartSurface).

  3. The user must be able to select a selected peak to not display anymore the related data.

Thanks in advance.

Version
8.5.0.28160
  • Lex
    Hi Simone, Thanks for your inquiry. We’ve received it with the images attached. I am going to discuss the provided information with our team and will get back to you as soon as I have an update. Kind regards, Lex S., MSEE SciChart Technical Support Engineer
  • You must to post comments
0
0

Hi Simone,

Please accept my apologies for the delayed response.
We discussed your inquiry.

There is no exact API in SciChart currently.
However, you could do this in two ways:

1) You could use the VerticalSliceModifier and hide the Vertical Line, leaving only Tooltips by setting the Stroke property to Transparent or StrokeThickness property to “0”.

The following example could also be useful:
https://www.scichart.com/example/wpf-chart/wpf-chart-example-using-vertical-slice-tooltips/

2) Use TextAnnotations. Here you can find the corresponding documentation article:
https://www.scichart.com/documentation/win/current/webframe.html#The%20TextAnnotation%20Type.html

Kind regards,
Lex,
SciChart Technical Support Engineer

  • You must to post comments
0
0

Hi Lex,

Thanks for the response!
We’ll follow the second option: TextAnnotations.

First we created a class called CustomTextAnnotationViewModel as extension of TextAnnotationViewModel that contains following properties:

  • Id: Guid
  • SeriesId: Guid

Then we created a class called TextAnnotationViewStore that get an AnnotationCollection as parameter. The AnnotationCollection contains only CustomTextAnnotationViewModel.
Here we define the following methods:

  • ToggleVisibilityOfAnnotationById(Guid annotationId); // Toggle the visibility of the annotation retrieved by id from the AnnotationCollection.
  • SetVisibilityOfAllAnnotationsBySeriesGuid(Guid seriesGuid, bool isVisible); //Chenge the visibility of all the TextAnnotations related to a Series in the the AnnotationCollection by its Guid.

Then we updated the factory of the Series to build a new CustomTextAnnotationViewModel foreach datapoint of the series and store all the CustomTextAnnotationViewModel into the TextAnnotationViewStore. We updated the PointMetadata to link it to the related annotation.

Then we created a CustomChartModifierBase as an extension of ChartModifierBase for out SciChartSurface.

Here we override the OnModifierMouseOver and OnModifierMouseUp to handle the annotations visibility on the mouse over event and/or mouse click event.

Unfortunately, I cannot post the entire code but I hope it will be useful to at least get an idea of how to proceed.

Thanks again for your support.
SR.

  • Lex
    Hi Simone, Thanks for your reply. I’m glad we helped! If you need any further assistance, please feel free to contact us. Kind regards, Lex
  • You must to post comments
0
0

Hi Lex,

Sorry for the double response. This is the final result of our effort (the mouse over effect is visible from the peak highlighted).

Images
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.