Pre loader

Heatmap aspect ratio and lasso using OverviewCustomResizableAnnotation

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

1
0

Hi Andrew,

I have 2 independent questions,

Q1.
I have been working with uniform heatmap and I need a way to fix the aspect ratio to 1, for all resize, zoom events, is there an option in heatmap to fix an aspect ration? Please see the attached video
https://youtu.be/obhH6KLExYw

Q2.
I am trying to implement a lasso select method to select and highlight the heatmap data. I did not find lasso select in the documentation hence I went ahead and implemented my own method.

I am drawing an svg using D3 (offsetX and offsetY variables) and then adding it to the annotation as you will see in the video and trying to get all the hitTest data inside the lasso.

If I use the customAnnotation then heatmap is able to draw correct size and location of the SVG
customAnnotation:
https://youtu.be/gL34sAbxYSE

But it does not pan and zoom with the plot data. after looking through documentation I came across OverviewCustomResizableAnnotation which seems designed for zooming and panning with the data.

But while using the OverviewCustomResizableAnnotation the SVG size keeps changing during the update and is not located at the correct location relative to the data.

sciChartSurfaceRef.current.annotations.add(
new OverviewCustomResizableAnnotation({
id: "lassoSVG",
x1: shortestXinData,
y1: shortestYinData,
isEditable: false,
isSelected: false,
yCoordinateMode: ECoordinateMode.DataValue,
xCoordinateMode: ECoordinateMode.DataValue,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: new XMLSerializer().serializeToString(svg.node())
})
)

OverviewCustomResizableAnnotation:
https://youtu.be/-AOJ9V3l-xI

Thanks,

Pramod

Version
latest
  • You must to post comments
0
0

Hi Pramod

OverviewCustomResizableAnnotation is used for internal use, it’s not intended for users to put this on a chart. We use it in the SciChartOverview control which is a type of scrollbar with a series background.

We have in SciChart an API called ‘Chart Modifiers’. These allow you to add behaviours onto the chart. You can also write your own.

Some chartmodifiers we have out of the box which do the functionality you want are:

  1. RubberBandXyZoomModifier – which does lasso zoom on a chart
  2. DataPointSelectionModifier – which enables lasso selection on a chart

It’s possible to create custom modifiers as well. We have an intro article here on the Custom ChartModifier API and a simple worked example showing here.

If you’re trying to do a custom behaviour on the chart the place to do it is the Chartmodifier API.

What I suggest you do:

  • write down your requirements (on click, on drag we want …)
  • including requirements about viewport size/aspect ratio
  • I can suggest the best way to use the SciChart APIs to achieve this.

Best regards
Andrew

  • You must to post comments
0
0

Here is code to automatically adjust the visibleRanges to keep a 1:1 aspect ratio

xAxis.visibleRangeChanged.subscribe(data => { 
    const yRange = yAxis.visibleRange;
    if (yRange.diff !== data.visibleRange.diff) {
        const halfDiff = (data.visibleRange.diff - yRange.diff) / 2;
        yAxis.visibleRange = new NumberRange(yRange.min - halfDiff, yRange.max + halfDiff);
    }
});
yAxis.visibleRangeChanged.subscribe(data => { 
    const xRange = xAxis.visibleRange;
    if (xRange.diff !== data.visibleRange.diff) {
        const halfDiff = (data.visibleRange.diff - xRange.diff) / 2;
        xAxis.visibleRange = new NumberRange(xRange.min - halfDiff, xRange.max + halfDiff);
    }
});

Regarding your annotation, the OverviewCustomResizableAnnotation scales with the chart because it has some extra logic which sets the width and height along with the x and y attributes. To add this you can just extend CustomAnnotation and override the update function which is called on each draw. Here is one way to do it:

export class ScalableAnnotation extends CustomAnnotation {
private initialWidth: number;
private initialHeight: number;
private initialDiff: number;

public update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void {
    super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
    if (!this.initialDiff) {
        this.initialDiff = xCalc.visibleMax - xCalc.visibleMin;
        this.initialWidth = Number.parseFloat(this.svg.getAttribute("width"));
        this.initialHeight = Number.parseFloat(this.svg.getAttribute("height"));
    } else {
        const diff = xCalc.visibleMax - xCalc.visibleMin;
        if (diff !== this.initialDiff) {
            const width = this.initialWidth * this.initialDiff / diff;
            const height = this.initialHeight * this.initialDiff / diff;
            this.setSvgAttribute("width", width);
            this.setSvgAttribute("height", height);
            // Also need to update the borders for the selection rectangle
            let borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
            let borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
            this.setAnnotationBorders(borderX1, borderX1 + width, borderY1, borderY1 + height);
            this.updateAdornerInner();
        }
    }
}
}

This is based on your svg having an initial width and height, and you having a fixed aspect ratio. The more general way to do this would be to use the x2 and y2 properties and calculate width and height from there. This is what OverviewCustomResizableAnnotation does. The code for that looks like this:

    const x1Coord = this.getX1Coordinate(xCalc, yCalc);
    const y1Coord = this.getY1Coordinate(xCalc, yCalc);
    const x2Coord = this.getX2Coordinate(xCalc, yCalc);
    const y2Coord = this.getY2Coordinate(xCalc, yCalc);
    // Set the borders for the selection box
    this.setAnnotationBorders(x1Coord, x2Coord, y1Coord, y2Coord);
    const width = Math.abs(x2Coord - x1Coord);
    const height = Math.abs(y2Coord - y1Coord);
    this.setSvgAttribute("width", width);
    this.setSvgAttribute("height", height);

Regards
David

  • You must to post comments
1
0

To further explain the issue I have uploaded another video demonstrating the difference between customAnnotation and OverviewCustomResizableAnnotation. the latter seems to distort /scale the SVG.

I the video I am adding exactly same SVGstring to both and getting different results.

code:

    sciChartSurfaceRef.current.annotations.add(
                                new OverviewCustomResizableAnnotation({
                                    id: "lassoSVG",
                                    x1: shortestXinData,
                                    y1: shortestYinData,
                                    isEditable: true,
                                    isSelected: false,
                                    yCoordinateMode: ECoordinateMode.DataValue,
                                    xCoordinateMode: ECoordinateMode.DataValue,
                                    verticalAnchorPoint: EVerticalAnchorPoint.Top,
                                    horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
                                    svgString: new XMLSerializer().serializeToString(svg.node()),

                                })
                            )

  sciChartSurfaceRef.current.annotations.add(
                                new CustomAnnotation({
                                    id: "lassoSVG",
                                    x1: shortestXinData,
                                    y1: shortestYinData,
                                    isEditable: true,
                                    isSelected: false,
                                    yCoordinateMode: ECoordinateMode.DataValue,
                                    xCoordinateMode: ECoordinateMode.DataValue,
                                    verticalAnchorPoint: EVerticalAnchorPoint.Top,
                                    horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
                                    svgString: new XMLSerializer().serializeToString(svg.node())
                                })
    )

in case you are interested please find the svgString:
<svg xmlns="http://www.w3.org/2000/svg" width="190.72265625" height="127.6015625" viewbox="0 0 190.72265625 127.6015625" preserveAspectRatio="xMinYMin meet"><g transform="translate(-56.29296875,-39.77734375)"><circle r="1" cx="103.78515625" cy="63.33203125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="103.78515625" cy="67.28125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="103.78515625" cy="76.3125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="103.78515625" cy="82.78515625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="103.671875" cy="92.2265625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="102.65234375" cy="102.703125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="102.0859375" cy="109.0234375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="101.7734375" cy="112.7421875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="101.7734375" cy="113.03515625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="101.5703125" cy="113.0703125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="94.0390625" cy="111.171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="75.97265625" cy="111.171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="69.1484375" cy="111.171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="64.88671875" cy="111.171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="62.12109375" cy="111.171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="61.34765625" cy="111.171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="59.09375" cy="111.421875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="57.85546875" cy="111.421875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="57.625" cy="111.421875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="57.6171875" cy="111.5390625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="59.24609375" cy="116.609375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="59.24609375" cy="127.12109375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="59.24609375" cy="133.40625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="59.24609375" cy="140.2578125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="58.5078125" cy="147.90234375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="57.8046875" cy="155.73046875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="56.64453125" cy="161.6484375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="56.29296875" cy="165.984375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="56.29296875" cy="166.5390625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="56.39453125" cy="166.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="63.359375" cy="166.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="84.91796875" cy="166.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="110.70703125" cy="166.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="131.578125" cy="166.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="145.5078125" cy="166.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="158.61328125" cy="166.96484375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="169.32421875" cy="167.37890625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="178.45703125" cy="167.37890625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="181.20703125" cy="167.37890625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="185.0234375" cy="167.37890625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="187.44140625" cy="167.37890625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="195.66015625" cy="166.52734375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="197.76953125" cy="166.21484375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="201.1484375" cy="165.58203125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="201.29296875" cy="165.46484375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="201.19140625" cy="165.34765625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="200.76953125" cy="162.36328125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="200.23046875" cy="143.46875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="198.95703125" cy="131.609375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="198.4140625" cy="126.0703125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="198.4140625" cy="122.2890625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="198.4140625" cy="117.9921875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="198.4140625" cy="116.6875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="198.4140625" cy="116.4375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="200.71875" cy="116.21875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="215.8828125" cy="116.20703125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="227.84375" cy="111.3828125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="234.01171875" cy="106.109375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="244.44921875" cy="86.03125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="247.015625" cy="61.33203125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="241.06640625" cy="49.75390625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="231.22265625" cy="44.23828125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="222.52734375" cy="40.7421875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="208.38671875" cy="39.77734375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="194.26953125" cy="40.4765625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="181.58984375" cy="43.90234375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="173.3359375" cy="46.48046875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="168.1796875" cy="48.08984375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="165.890625" cy="49.3671875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="165.38671875" cy="51.16796875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="161.02734375" cy="54.84765625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="160.50390625" cy="55.76171875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="158.28515625" cy="58.33203125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="157.33984375" cy="60.6640625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="156.27734375" cy="61.8125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="156.140625" cy="62.14453125" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="156.140625" cy="62.24609375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="155.9375" cy="62.25" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="149.66796875" cy="62.25" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="137.41015625" cy="62.25" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="130.60546875" cy="62.85546875" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="129.703125" cy="63.265625" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="129.703125" cy="63.37109375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/><circle r="1" cx="129.80078125" cy="63.37109375" style="fill: rgb(255, 191, 0); stroke: rgb(0, 0, 0); stroke-width: 0.25;"/></g><g transform="translate(-56.29296875,-39.77734375)"><polygon points="103.78515625,63.33203125 103.78515625,67.28125 103.78515625,76.3125 103.78515625,82.78515625 103.671875,92.2265625 102.65234375,102.703125 102.0859375,109.0234375 101.7734375,112.7421875 101.7734375,113.03515625 101.5703125,113.0703125 94.0390625,111.171875 75.97265625,111.171875 69.1484375,111.171875 64.88671875,111.171875 62.12109375,111.171875 61.34765625,111.171875 59.09375,111.421875 57.85546875,111.421875 57.625,111.421875 57.6171875,111.5390625 59.24609375,116.609375 59.24609375,127.12109375 59.24609375,133.40625 59.24609375,140.2578125 58.5078125,147.90234375 57.8046875,155.73046875 56.64453125,161.6484375 56.29296875,165.984375 56.29296875,166.5390625 56.39453125,166.6640625 63.359375,166.6640625 84.91796875,166.6640625 110.70703125,166.6640625 131.578125,166.6640625 145.5078125,166.6640625 158.61328125,166.96484375 169.32421875,167.37890625 178.45703125,167.37890625 181.20703125,167.37890625 185.0234375,167.37890625 187.44140625,167.37890625 195.66015625,166.52734375 197.76953125,166.21484375 201.1484375,165.58203125 201.29296875,165.46484375 201.19140625,165.34765625 200.76953125,162.36328125 200.23046875,143.46875 198.95703125,131.609375 198.4140625,126.0703125 198.4140625,122.2890625 198.4140625,117.9921875 198.4140625,116.6875 198.4140625,116.4375 200.71875,116.21875 215.8828125,116.20703125 227.84375,111.3828125 234.01171875,106.109375 244.44921875,86.03125 247.015625,61.33203125 241.06640625,49.75390625 231.22265625,44.23828125 222.52734375,40.7421875 208.38671875,39.77734375 194.26953125,40.4765625 181.58984375,43.90234375 173.3359375,46.48046875 168.1796875,48.08984375 165.890625,49.3671875 165.38671875,51.16796875 161.02734375,54.84765625 160.50390625,55.76171875 158.28515625,58.33203125 157.33984375,60.6640625 156.27734375,61.8125 156.140625,62.14453125 156.140625,62.24609375 155.9375,62.25 149.66796875,62.25 137.41015625,62.25 130.60546875,62.85546875 129.703125,63.265625 129.703125,63.37109375 129.80078125,63.37109375" fill="#FF00FF22" stroke-width="0.5" stroke="white" style="stroke-dasharray: 3, 3;"/></g></svg>

  • You must to post comments
1
0

Dear David,

Thank you for your response. as for Q1 regarding the aspect ratio,I look forward to your answer.

As for Q2. regarding lasso select, I am not trying to zoom in /out which is what the rubberbandXYzoommodifier is used for, I am trying to Annotate and select data from the heatmap. My sincere apologies if that was not clear.

We have 2 use cases for a lasso select

  1. use it as annotation tool to label certain areas of the heatmap e.g as input for ML algorithm.

  2. to select the data which is “encircled” by the lasso to retrieve data from those “pixels”

If you watch the view it will be clear. The issue I am facing is the lasso drawn over the heatmap works with customAnnoation but does not move/ scale with zooming behavior. After noticing the OverviewCustomResizableAnnotation when used it does move / scale with zoom but it distorts the SVG (lasso).

Hope that helps,

Pramod

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies