SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
1
0

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.

Version
2.2.2415
  • Andrew Burnett-Thompson
    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 to post comments
Best Answer
0
0

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:

  1. Subscribe to sciChartSurface.rendered
  2. inside that find the index to the x-value you want to place your annotation
  3. 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

  • You must to post comments
Best Answer
0
0

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:

Dynamic Annotations

enter image description here

  • You must to post comments
0
0

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

enter image description here

Best regards,
Andrew

  • Kelly Chan
    Thank Andrew! It’s helpful.
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.