Reply To: combining candlestick chart and line chart (moving average line)

[Suyash Singh]

@d_vineet,

Thank you for your interest in CanvasJS.
Yes, it can be done. You can combine Candlestick chart with Spline chart, where spline represents the moving averages. You can loop through the candlestick series and use its corresponding dataPoints to dynamically calculate the spline series as shown in the code snippet below –

function calculateMovingAverage(chart) {

  // return if there are insufficient dataPoints
  if(chart.options.data[0].dataPoints.length <= 5) return;
  else {
    // Add a new line series for  Moving Averages
    chart.options.data.push({
      type: "spline",
      markerSize: 0,
      name: "SMA",
      dataPoints: []
    });
    var total;
    for(var i = 5; i < chart.options.data[0].dataPoints.length; i++) {
      total = 0;
      for(var j = (i - 5); j < i; j++) {
        total += chart.options.data[0].dataPoints[j].y[3];
      }
      chart.options.data[1].dataPoints.push({
        x: chart.options.data[0].dataPoints[i].x,
        y: total / 5
      });
    }
  }
}

Please have a look at this JSFiddle for a working example.

___
Suyash Singh
Team CanvasJS