I have a real-time updated chart with multiple series. Is it possible for me to add a custom annotation to the chart by just providing the x1 value? i.e. The y1 value will be the y value of the data point in certain series with the provided x1 value. It will look like that the annotation will be sticked to the series with a fixed x1 value while the chart is updating.
- Kelly Chan asked 1 year ago
-
Hi Kelly just to let you know, we’re thinking about how to do this and will provide a solution soon. My first idea is to use the HitTest API to determine the Y-value for an X and position the annotation when the chart renders.
- You must login to post comments
Update: I’ve created a full example for you to demonstrate this using the techniques we discussed. It does everything except the interpolation in case you wanted to place an annotation between data-points
Find the example here:
- Andrew Burnett-Thompson answered 1 year ago
- You must login to post comments
Hi Kelly,
I had a look at this. There’s no way to do this in SciChart.js without writing some messy code to use the Hit-Test API or Finding index on the dataseries.
My question to you: Must this be an annotation? In this Vital Signs Monitor example, we use a series to place a single scatter point at the latest X-Y value. This looks great and highlights the leading point.
An annotation would be possible, but the steps are roughly:
- Subscribe to sciChartSurface.rendered
- inside that find the index to the x-value you want to place your annotation
- use that index to get the y-value
Something like this
sciChartSurface.rendered.subscribe(() => {
const xIndex = findIndex(xyDataSeries, xValue);
const yValue = xyDataSeries.getNativeYValues().get(xIndex);
annotation.y1 = yValue;
});
You’d have to implement findIndex above, or use our own which is accessible via the webAssemblyContext like this:
const xIndex = wasmContext.NumberUtil.FindIndex(xyDataSeries.getNativeXValues(),
xValue,
wasmContext.SCRTFindIndexSearchMode.Nearest,
xyDataSeries.isSorted);
Note if you wanted to place the annotation on the line segment (between datapoints) some interpolation would be required. You’d need to find the index either side, the y-value either side of the x-location and use linear interpolation.
In short, it’s possible, but requires some extra code.
Best regards,
Andrew
- Andrew Burnett-Thompson answered 1 year ago
- You must login to post comments
Another example which is interesting from our examples suite:
Animated Realtime Mountain Chart Example
This places an annotation at X,Y of the latest point on a Mountain series. It is updated as the data is updated. The data updates are animated as well
Best regards,
Andrew
- Andrew Burnett-Thompson answered 1 year ago
-
Thank Andrew! It’s helpful.
- You must login to post comments
Please login first to submit.