EMA - Exponential Moving Average is a popular technical / financial indicator. In the below StockChart demo, weighted average of the last n prices is calculated in realtime, where the weighting decreases exponentially with previous price / period. EMA calculation has been modularized such that you can easily customize it as required.
window.onload = function () {
var dps1 = [], dps2= [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
theme: "light2",
title:{
text:"Technical Indicators: EMA"
},
subtitles: [{
text: "Exponential Moving Average"
}],
charts: [{
axisY: {
prefix: "$"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
verticalAlign: "top",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [{
type: "candlestick",
name: "Stock Price",
showInLegend: true,
yValueFormatString: "$#,###.##",
xValueType: "dateTime",
dataPoints : dps1
}],
}],
navigator: {
data: [{
dataPoints: dps2
}],
slider: {
minimum: new Date(2018, 03, 01),
maximum: new Date(2018, 05, 01)
}
}
});
$.getJSON("https://canvasjs.com/data/docs/ethusd2018.json", function(data) {
for(var i = 0; i < data.length; i++){
dps1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
dps2.push({x: new Date(data[i].date), y: Number(data[i].close)});
}
stockChart.render();
var ema = calculateEMA(dps1, 7);
stockChart.charts[0].addTo("data", {type: "line", name: "EMA", showInLegend: true, yValueFormatString: "$#,###.##", dataPoints: ema});
});
function calculateEMA(dps,count) {
var k = 2/(count + 1);
var emaDps = [{x: dps[0].x, y: dps[0].y.length ? dps[0].y[3] : dps[0].y}];
for (var i = 1; i < dps.length; i++) {
emaDps.push({x: dps[i].x, y: (dps[i].y.length ? dps[i].y[3] : dps[i].y) * k + emaDps[i - 1].y * (1 - k)});
}
return emaDps;
}
}