Pre loader

Change the image of AxisMarkerAnnotation when clicked

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
1

We have previously assigned a CustomVerticalMarkerAnnotation class which is extended from AxisMarkerAnnotation, and would like to change the image of the annotation when we trigger the onClick event. Is there a way to redraw the image without removing the annotation?

Here is our code sample of the annotation in question:

let svgString: string = this.getSvgIcon("orange-arrow-up", "#ee7a26").replace(/LABEL_HERE/g, "").replace(/COLOR_TEXT_HERE/g, "transparent").replace(/WIDTH_HERE/g, '50').replace(/HEIGHT_HERE/g, '30').toString();
let blob = new Blob([svgString], { type: 'image/svg+xml' });
let url = URL.createObjectURL(blob);
let image: HTMLImageElement = document.createElement('img');
image.src = url;
let customHorizontalReferenceAnnotation = new CustomVerticalMarkerAnnotation({
id: id,
x1: x1,
xAxisId: this.sciChartGraph.xAxes.get(2).id,
yAxisId: this.sciChartGraph.yAxes.getById('y-axis-marker').id,
xCoordinateMode: ECoordinateMode.DataValue,
image: image,
imageWidth: 150,
imageHeight: 35,
onClick: () => {
     this.onClickHorizontalReference(x, id)
}

and we would like to change the image under the function this.onClickHorizontalReference

we tried this but it didn’t work out as the image remains the same

const selectedHorizontalReference = this.sciChartGraph.annotations.getById(id) as CustomVerticalMarkerAnnotation
let svgString: string = this.getSvgIcon("yellow-arrow-up", "#e7ee26").replace(/LABEL_HERE/g, "").replace(/COLOR_TEXT_HERE/g, "transparent").replace(/WIDTH_HERE/g, '50').replace(/HEIGHT_HERE/g, '30').toString();
let blob = new Blob([svgString], { type: 'image/svg+xml' });
let url = URL.createObjectURL(blob);
let image: HTMLImageElement = document.createElement('img');
image.src = url;
selectedHorizontalReference.image = image
Version
3.5.697
Images
  • You must to post comments
0
0

Hello, it just occurred to me that in our examples we have a slightly different logic for creating an image.
Specifically, it is an async operation.

Here is a function we use for that in one of the examples

const createImageFromSvgString = async (svg: string) => {
return new Promise<HTMLImageElement>((resolve, reject) => {
    let blob = new Blob([svg], { type: 'image/svg+xml' });
    let url = URL.createObjectURL(blob);
    let image = document.createElement('img');
    image.src = url;
    image.addEventListener(
        'load',
        () => {
            URL.revokeObjectURL(url);
            resolve(image);
        },
        { once: true }
    );
});
};

Alternatively, the library exports a helper function – “createImageAsync”
So, then it can be used as below

const blob = new Blob([someSvgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const htmlImageElement = await createImageAsync(url);

Per my observation, this may be a fix for the issue that you are facing.
Please try these and let us know if it helped.
Otherwise, it will require further investigation.

  • You must to post comments
0
0

Hello, I can confirm there is some issue with it.
This has been logged to our task queue: https://abtsoftware.myjetbrains.com/youtrack/issue/SCJS-1881/AxisMarkerAnnotation-image-change-issue

Meanwhile, my suggestion would be to try requesting a refresh of the surface by calling at some point after clicking the following

        sciChartSurface.invalidateElement({force: true})
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.