Pre loader

Updating a sub chart by scrolling another

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

I’m modifying the https://demo.scichart.com/javascript/multi-pane-stock-charts-sync-technique# example. To the right of the OHLCV chart I would like to plot GEX levels (a ladder plot) which is unique for every date, and which should update as I scroll across the X-axis of the OHLCV chart. However, I’m unable to write an event listener to make this happen.

OHLCV + GEX

Version
3.4
Attachments
Images
  • You must to post comments
1
0

Hello, as far as I understand, you need to get the current Rollover X Data Value position.
Also, I guess, the only acceptable data values should be those provided in the data series, meaning no arbitrary dates allowed.
Please confirm if I got this correctly.

Then I think this could be implemented using a Custom Modifier with Hit Test API called on mouse move.
https://www.scichart.com/documentation/js/current/webframe.html#CustomChartModifierAPI.html
https://www.scichart.com/example/javascript-chart/javascript-chart-hit-test-on-clickhit-test-api/

  • You must to post comments
1
0

Thanks a ton for considering my query, and thank you for the excellent library.

That’s right, only the dates represented by the OHLC candlesticks are required. The date value closest to the mouse-cursor ought to then inform an event listener which would look up a map like structure map<Date, GEXDate> to dynamically generate the horizontal bar chart (GEX vs strike prices).

The best I can do at the moment is select each bar individually via the DataPointSelectionModifier but which falls sort of smoothly scrolling across the OHLC chart to update the GEX chart.

  • Jim Risen
    Great, then as suggested, the Hit Test API should provide you with appropriate OHLC data point info.
  • Marital Weeping
    Awesome. I’ll try it out and post the solution.
  • You must to post comments
1
0

Jim, thanks to your advice I’ve gotten quite close. The following code correctly reports the closest X-data point to my mouse cursor.

“`
class ReportClosestXValueModifier extends ChartModifierBase2D {
public readonly type = EChart2DModifierType.Custom;

constructor() {
super();
}

public modifierMouseMove(args: ModifierMouseArgs): void {
super.modifierMouseMove(args);
const mousePoint = args.mousePoint;
const hitTestRadius = 10 * DpiHelper.PIXEL_RATIO;

// Get the collection of RenderableSeries
const renderableSeriesArray = this.parentSurface.renderableSeries.asArray();
for (const rs of renderableSeriesArray) {
// Perform hit test on the series
const hitTestInfo = rs.hitTestProvider.hitTestDataPoint(mousePoint.x, mousePoint.y, hitTestRadius);
if (hitTestInfo.isHit) {
// Report x-position
const date = Array.from(GEXDataMap.keys())[hitTestInfo.xValue];
console.log(Closest x-position: ${hitTestInfo.xValue});
const d = new Date(date * 1000);
console.log(Closest date: ${d.toLocaleDateString()});
updateGEXData(date); // modify the chart here
// Optionally, break after the first hit
break;
}
}
}
}
“`

The only minor issue that remains is that I have to track my house pretty closely to the candlesticks (since the distance measure is radial, presumably). Would it be possible to get the x-position if I just scrolled exactly horizontally in the canvas of the chart without necessarily getting close to the candlesticks? Thanks for your time.

  • Jim Risen
    Try hitTestXSlice instead of hitTestDataPoint
  • Marital Weeping
    Thanks Jim! `hitTestXSlice` works perfectly.
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.