Home › Forums › Chart Support › combining candlestick chart and line chart (moving average line) › Reply To: combining candlestick chart and line chart (moving average line)
You can loop through each of the column series and create a corresponding series representing the Simple Moving Average as shown in the code snippet below –
// Pass all the data-series to render SMA
for(var i = 0; i < numberOfDataSeries; i++) {
renderSimpleMovingAverage(chart.options.data[i], 7);
}
chart.render();
function renderSimpleMovingAverage(dataSeries, smaPeriod) {
if(dataSeries.dataPoints.length <= smaPeriod) return;
else {
// Add a new line series for Moving Averages
chart.options.data.push({
type: "spline",
markerSize: 0,
color: dataSeries.color,
name: dataSeries.name + " SMA",
yValueFormatString: "#,##0.00",
dataPoints: []
});
var total;
for(var i = smaPeriod; i < dataSeries.dataPoints.length; i++) {
total = 0;
for(var j = (i - smaPeriod); j < i; j++) {
total += dataSeries.dataPoints[j].y;
}
chart.options.data[chart.options.data.length - 1].dataPoints.push({
x: dataSeries.dataPoints[i].x,
y: total / smaPeriod
});
}
}
}
Please take a look at this JSFiddle.
___
Suyash Singh
Team CanvasJS