SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Hello,
How can I animate an update of a candle or a bar in an OHLC type charts? I use realtime stock chart like this example.
When i update candle it redraws immediately with new values. But i want it to be updated with animation.
Hi Vita!
As you’ve already found the JavaScript Realtime Stock Charts example I will use this as a reference.
In this example we have a block of code where we update the DataSeries which the candlestick chart is bound to.
const fillPriceDataSeries = (requestUpdate: boolean, initialDataset: boolean) => {
const generatedData = genPricesData(requestUpdate);
const { xValue, openValue, highValue, lowValue, closeValue, volume } = generatedData;
if (requestUpdate) {
const length = priceDataSeries.count();
priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue);
volumeDataSeries.update(length - 1, volume);
const nativeCloseValues = priceDataSeries.getNativeCloseValues();
movingAverage20DataSeries.update(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_20));
movingAverage50DataSeries.update(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_50));
} else {
priceDataSeries.append(xValue, openValue, highValue, lowValue, closeValue);
const volume2 = initialDataset ? volume * 2 : volume;
volumeDataSeries.append(xValue, volume2);
const nativeCloseValues = priceDataSeries.getNativeCloseValues();
movingAverage20DataSeries.append(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_20));
movingAverage50DataSeries.append(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_50));
}
};
Notice that what we do is decide if this is a new price bar (based on index, or date) and then call DataSeries.append() for new data, or DataSeries.update() to update existing data.
– Read more about the SciChart.js DataSeries API here
– Read more about Realtime JavaScript Charts in our tutorial here.
The update() function on DataSeries causes an immediate redraw, there is no way to animate an update or to animate to a new value. However, you can add this in using the Animator functions in the scichart library.
Try this code. To update a DataSeries animated, substitute this line in the example:
priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue);
for this
// import {DoubleAnimator} from "scichart/Core/Animations/DoubleAnimator";
// import { easing } from "scichart/Core/Animations/EasingFunctions";
const animateUpdate= (dataSeries: OhlcDataSeries, open: number, high: number, low: number, close: number) => {
const length = priceDataSeries.count();
const currentCloseValue = dataSeries.getNativeCloseValues().get(dataSeries.count() - 1);
DoubleAnimator.animate(currentCloseValue, close, 500, (animatedCloseValue) => {
priceDataSeries.update(length - 1, open, high, low, animatedCloseValue);
}, () => {},
easing.outExpo)
};
animateUpdate(priceDataSeries, openValue, highValue, lowValue, closeValue);
I’ve tried this out in the JavaScript Realtime Candlestick Charts example with a slightly slower setTimeout of 1000ms for the simulated updates and this is the result.
Animated candlesticks!
Let me know if this helps,
Best regards,
Andrew
Hi Albert and Vita
We have more info on animating an Xy point in a SciChart.js JavaScript Chart as well as a code sample here.
Let us know if this helps answer the question
Best regards,
Andrew
Please login first to submit.