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.
- Marital Weeping asked 3 months ago
- last edited 3 months ago
- You must login to post comments
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/
- Jim Risen answered 3 months ago
- You must login to post comments
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.
- Marital Weeping answered 3 months ago
- last edited 3 months ago
-
Great, then as suggested, the Hit Test API should provide you with appropriate OHLC data point info.
-
Awesome. I’ll try it out and post the solution.
- You must login to post comments
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.
- Marital Weeping answered 3 months ago
- last edited 3 months ago
-
Try hitTestXSlice instead of hitTestDataPoint
-
Thanks Jim! `hitTestXSlice` works perfectly.
- You must login to post comments
Please login first to submit.