API Reference

Class: Animation

CIQ. Animation

new Animation(config)

Add-On that animates the chart.

Requires addOns.js.

The chart is animated in three ways:

  1. The current price pulsates
  2. The current price appears to move smoothly from the previous price
  3. 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:


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.

Name Type Description
config object

The constructor parameters

Name Type Argument Description
stx CIQ.ChartEngine

The chart object

animationParameters object <optional>

Configuration parameters

Name Type Argument Default Description
stayPut boolean <optional>

Set to true for last tick to stay in position it was scrolled and have rest of the chart move backwards as new ticks are added instead of having new ticks advance forward and leave the rest of the chart in place.

ticksFromEdgeOfScreen number <optional>

Number of ticks from the right edge the chart should stop moving forward so the last tick never goes off screen (only applicable if stayPut=false)

granularity number <optional>

Set to a value that will give enough granularity for the animation. The larger the number the smaller the price jump between frames, which is good for charts that need a very slow smooth animation either because the price jumps between ticks are very small, or because the animation was set up to run over a large number of frames when instantiating the CIQ.EaseMachine.

tension number <optional>

Splining tension for smooth curves around data points (range 0-1).

easeMachine CIQ.EaseMachine

Override the default easeMachine. Default is new CIQ.EaseMachine(Math.easeOutCubic, 1000);

  • 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.
new CIQ.Animation({ stx: stxx, animationParameters: { tension: 0.3 } }); //Default animation with splining tension of 0.3