Animated Stream with MA with offset

by Andy Bulka

HTML

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

CSS

@charset "UTF-8";
/* CSS Document */

html,body{
	-ms-touch-action: none; /* This is necessary to allow the chart to grab windows touch events */
	margin: 0px; /*to deal with iFraming which sets 8px by default in some browsers*/
}

.chartContainer { /* DIV that the canvas expands to. */
	display: block;
	font-family: Roboto, Helvetica, sans-serif;
	font-size: 12px;
	position:relative; /* chart container must be relative for internal DOM elements to be correct */
}

.sharing .ciq-no-share {
	display: none !important;
}

.stx-canvas-shim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* --------------------------------------------------------- IE NOTICE ------------------------------------------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.chartContainer::before,
	cq-instant-chart::before{
		content: 'Internet Explorer is no longer supported.';
		display:block;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: transparent;
		padding-top: 120px;
		text-align: center;
		font-size:30px;
		font-weight: bold;
	}

	.chartContainer::after,
	cq-instant-chart::after{
		content: 'Internet Explorer does not provide the enhanced performance and features necessary to use this library. For the best experience, please use Microsoft\'s Chromium-based Edge or any other modern browser.';
		display:block;
		position: absolute;
		top:90px;
		left: 50%;
		width: 600px;
		height: 40px;
		z-index: 10000;
		background: transparent;
		border: solid 1px #f00;
		padding: 90px 50px;
		text-align: left;
		font-size:14px;
		font-weight: normal;
		line-height: 20px;
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */

/* Basic Buttons */

.stx-btn { /* Inactive Button */
	display:inline-block;
	cursor: pointer;
	padding: 0px 8px;
	border: solid 1px...

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart8.0/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart8.0/js/addOns.js";

// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    chartType: 'mountain',
    crosshair: true,
    period: 1,
    interval: 'millisecond',
    candleWidth: 5,
  }
});

CIQ.Studies.addStudy(
  stxx,
  "ma",
  {
    Field: "Close",
    /**** comment this in and out ******/
    //Offset: 10,
    Period: 14,
    Type: "ma",
  },
  {}
);

// Link an animator to each chart you want to animate by adding a line like this:
new CIQ.Animation(stxx, {
  tension: 0.3
})
// Set tension if you want to soften the curves on a line or mountain chart.

stxx.chart.xAxis.timeUnit = CIQ.MILLISECOND;

let now = new Date();
var sampleData = [{
    "DT": new Date(now.setMilliseconds(8)),
    "Open": 152.13,
    "High": 152.19,
    "Low": 152.08,
    "Close": 152.11,
    "Volume": 4505569
  },
  {
    "DT": new Date(now.setMilliseconds(60)),
    "Open": 151.76,
    "High": 151.83,
    "Low": 151.65,
    "Close": 151.79,
    "Volume": 2799990
  },
  {
    "DT": new Date(now.setMilliseconds(102)),
    "Open": 151.79,
    "High": 151.8,
    "Low": 151.6,
    "Close": 151.75,
    "Volume": 1817706
  },
  {
    "DT": new Date(now.setMilliseconds(103)),
    "Open": 151.74,
    "High": 151.96,
    "Low": 151.74,
    "Close": 151.84,
    "Volume": 2127911
  },
  {
    "DT": new Date(now.setMilliseconds(104)),
    "Open": 151.84,
    "High": 152.03,
    "Low": 151.79,
    "Close": 151.95,
    "Volume": 1640306
  },
  {
    "DT": new Date(now.setMilliseconds(105)),
    "Open": 151.95,
    "High": 152.09,
    "Low": 151.84,
    "Close": 152.07,
    "Volume": 1420396
  },
  {
    "DT": new Date(now.setMilliseconds(106)),
    "Open": 152.07,
    "High": 152.08,
    "Low": 151.87,
    "Close": 151.91,
    "Volume": 1312368
  },
  {
...