Average line on line chart

• October 17, 2014 at 1:45 am #7226
  
  zachary

  I’m trying to add an average line which is an average of all the other lines on a chart, and while I could do this server side, I was wondering if there was an easy way to do this in canvasjs. This is my current chart http://jsfiddle.net/txcsLgad/1/

  • This topic was modified 10 years, 1 month ago by zachary.
  October 27, 2014 at 11:04 pm #7384
  
  Sunil Urs

  There is no way to do this automatically. Best option is to calculate the averages either on the server (or client side) and adding it to the chart.

  —
  Sunil Urs

  January 16, 2018 at 4:44 pm #18860
  
  nisha

  Hello Sir,

  I need to make moving average for a week with column and bar chart. Data should show in Column chart and moving average of two points for 7 days data should be by line chart on bar chart. Please HELP by giving a example.

  Regards

  January 17, 2018 at 12:42 pm #18878
  
  Suyash Singh

  @nisha,

  You can calculate simple moving average(SMA) by writing few lines of code and pushing the respective values to dataSeries will render the chart with SMA series. Please take a look at the below code snippet for calculating 7 Day SMA and pushing it to chart dataSeries.

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

  Also, Please have a look at this JSFiddle for complete code.

  

  ___
  Suyash Singh
  Team CanvasJS