new Animation(config)
Add-On that animates the chart.
Requires addOns.js.
The chart is animated in three ways:
- The current price pulsates
- The current price appears to move smoothly from the previous price
- The chart's y-axis smoothly expands/contracts when a new high or low is reached
The following chart types are supported: line, mountain, baseline_delta.
Chart aggregations such as Kagi, Renko, Range Bars, etc. are not supported.
Animation displays more gracefully when updates are sent into the chart one at a time using CIQ.ChartEngine#updateChartData instead of in batches using a QuoteFeed. Sending data in batches will produce a ‘jumping’ effect.
By default, there will be a flashing beacon created using a canvas circle. If instead you want to use a custom animation beacon, you will be able to extend the functionality yourself as follows:
-
In js/addOns.js, at the bottom of the CIQ.Animation function, there is an stx.append("draw") function.
-
Make a copy of this function so you can override the behavior.
-
In there you will see it determine var x and y, which are the coordinates for the center of the beacon.
-
At the bottom of this append function, we draw the beacon by using the Canvas arc() function to draw a circle and then fill() to make the circle solid.
-
You can replace the canvas circle with an image using CanvasRenderingContext2D.drawImage() .
-
Example:
var image = document.getElementById('beacon'); // include a hidden image on your HTML context.drawImage(image, x-10, y-10, 20, 20); // add the image on the canvas. Offset the x and y values by the radius of the beacon.
Animation Example
You can disable animation after each different chart type is activated by calling:
stxx.mainSeriesRenderer.supportsAnimation=false;
Keep in mind that changing to a different chart type, may once again enable animation. You can override this by adding an event listener on layout changes.
Parameters:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
object | The constructor parameters Properties
|
- Since:
-
- 3.0.0 Now part of addOns.js. Previously provided as a standalone animation.js file.
- 4.0.0 Beacon only flashes for line charts. On candles or bars, it is suppressed as it produces an unnatural effect.
- 7.0.2 Now takes one configuration object as its constructor. Must have a reference to a chart engine.
Example
new CIQ.Animation({stx: stxx, animationParameters: {tension:0.3}}); //Default animation with splining tension of 0.3