JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
function avgArray(data) {
var dLen = data.length,
avg = 0;
for (a = 0; a < dLen; a++) {
avg = avg + data[a]
}
return avg / dLen
}
function ema(today, yesterday, numOfDays) {
var k = 2 / (numOfDays + 1);
return today * k + yesterday * (1 - k);
}
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
curve10 = [],
curve21 = [],
curveEMA10 = [],
curveEMA21 = [],
avg10 = [],
avg21 = [],
ema10 = [],
ema21 = [],
prevEMA10 = 0,
prevEMA21 = 0,
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
if (ema10.length < 10) {
ema10.push(data[i][4]);
if (ema10.length == 10) {
prevEMA10 = avgArray(ema10);
}
curveEMA10.push([
data[i][0],
null]);
} else if (ema10.length == 10) {
var newEMA = ema(data[i][4], prevEMA10, 10);
curveEMA10.push([
data[i][0], // date
newEMA]);
prevEMA10 = newEMA;
}
if (ema21.length < 21) {
ema21.push(data[i][4]);
if (ema21.length == 21) {
prevEMA21 = avgArray(ema21);
}
...