Pre loader

Problem with FastBubbleRenderableSeries.hovered

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

Answered
0
0

Hello SciChart Team,

I’m trying to subscribe to FastBubbleRenderableSeries.hovered, but it doesn’t seem to be working.

const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
      dataSeries: xyzDataSeries,
      pointMarker: new EllipsePointMarker(wasmContext, {
      width: 64,
      height: 64,
      fill: "#4682b477",
   }),
});

// Subscribe to the hovered event
bubbleSeries.hovered.subscribe((event) => {
console.log(event);
});

Is there something wrong with my approach? Also, can I extract the yValues, xValues, and zValues of the item being hovered using this method? Any other ideas or different approaches are welcome !

Best regards,
Phat

Version
3.4.662
  • You must to post comments
Best Answer
0
0

Hi Pham,

RenderableSeries.hovered requires that a SeriesSelectionModifier is added to the chart, for example, from our Series Selection documentation

// Add the SeriesSelectionModifier to the chart to enable series hover/selection
sciChartSurface.chartModifiers.add(new SeriesSelectionModifier( { enableHover: true, enableSelection: true ));

Also, we have a nice example on the demo site which shows how to add selection & hover to various series.

Click through to the example above then ‘View Source in Github’ to see how we’ve done it.

// Custom function called when series is hovered
const onHoveredChanged = (sourceSeries: IRenderableSeries, isHovered: boolean) => {
    console.log(`Series ${sourceSeries.dataSeries.dataSeriesName} isHovered=${isHovered}`);
    const targetSeriesOpacity = 1;
    const otherSeriesOpacity = isHovered ? 0.3 : 1;

    const sciChartSurface = sourceSeries.parentSurface;
    const otherSeries = sciChartSurface.renderableSeries.asArray().filter((rs) => rs !== sourceSeries);

    // Use the genericanimations feature to animate opacity on the hovered series
    sciChartSurface.addAnimation(
        new GenericAnimation({
            from: sourceSeries.opacity,
            to: targetSeriesOpacity,
            duration: 100,
            onAnimate: (from, to, progress) => {
                const opacity = (to - from) * progress + from;
                sourceSeries.opacity = opacity;
                sourceSeries.pointMarker.opacity = opacity;
            },
        })
    );
    // Dim opacity on the other non-hovered series
    sciChartSurface.addAnimation(
        new GenericAnimation({
            from: otherSeries[0].opacity,
            to: otherSeriesOpacity,
            duration: 100,
            onAnimate: (from, to, progress) => {
                const opacity = (to - from) * progress + from;
                otherSeries.forEach((rs) => {
                    rs.opacity = opacity;
                    rs.pointMarker.opacity = opacity;
                });
            },
        })
    );
};

// Custom function called when a series is selected or deselected
const onSelectedChanged = (sourceSeries: IRenderableSeries, isSelected: boolean) => {
    console.log(`Series ${sourceSeries.dataSeries.dataSeriesName} isSelected=${isSelected}`);

    // When selected, set the stroke = white, or reset previous value
    const targetSeriesStroke = isSelected ? appTheme.ForegroundColor : sourceSeries.pointMarker.fill;
    sourceSeries.stroke = targetSeriesStroke;
    sourceSeries.pointMarker.stroke = targetSeriesStroke;
};

sciChartSurface.chartModifiers.add(
    new SeriesSelectionModifier({
        enableHover: true,
        enableSelection: true,
    })
);

sciChartSurface.renderableSeries.add(
    new SplineLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "First Series" }),
        pointMarker: {
            type: EPointMarkerType.Ellipse,
            options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
        },
        strokeThickness: 3,
        onHoveredChanged,
        onSelectedChanged,
    })
);

Best regards,
Andrew

  • You must to post comments
Best Answer
0
0

Hi Phat,

Your only option at the moment would be to perform a hit-test call again as you’ve suggested within the hovered callback. The problem is you’ve got to know the x,y mouse location at that time.

Your best option is therefore to subscribe to sciChartSurface.domCanvas2D and store the x,y location of the mouse. Or, you could also try inheriting SeriesSelectionModifier and overriding modifierMouseMove. This approach would avoid another listener on the dom canvas.

In future it would be trivial for us to pass HitTestInfo through to the series which was hovered or selected.

By the way you may find it useful to know that the global SeriesSelectionModifier.hoverChanged event has a HoveredChangedArgs which includes the nearest HitTestInfo. Try this code therefore:

const seriesSelectionModifier = new SeriesSelectionModifier({ enableHover: true, onHoverChanged: args => {
        console.log(`HoveredSeries: ` + args.hitTestInfo.hitTestPoint.x + `, ` + args.hitTestInfo.hitTestPoint.y);
    }});
  • You must to post comments
0
0

I’ve successfully used the SeriesSelectionModifier, and it works perfectly. However, I’m wondering if it’s possible to use event.sourceSeries.hitTestProvider.hitTest() within the bubbleSeries.hovered.subscribe event to retrieve information about the point being clicked on the canvas. I noticed that the event does not provide mouse.offsetX or mouse.offsetY. I reviewed the documentation at SciChart Hit-Test API, but it suggests adding a new event listener to sciChartSurface.domCanvas2D. I would prefer to handle this within the bubbleSeries.hovered.subscribe. Is this approach feasible?

Thank you for your support!

Best regards,
Phat

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.