HTML5 / JS chart with moving average

Question

Question: How can I calculate and plot a moving average on a JS / HTML5 diagram?

The closest example I can find is this website . Looking at his JS files, I cannot identify the graphics card library. Upon closer examination, it turns out that the moving average was not calculated on the server, and not on the client side.

Any suggestions appreciated!

Answer 1

, 3- Highcharts:

var N = 100;
var someData = [];
for (var i = 0; i < N; i++)
{
    someData.push([i,Math.random() * 100]);
}

var moveMean = [];
for (var i = 1; i < N-1; i++)
{
    var mean = (someData[i][1] + someData[i-1][1] + someData[i+1][1])/3.0;
    moveMean.push([i,mean]);
}

Answer 2

.

, , ( ) .

:

movingAvg(arr, 10) 10 arr.

movingAvg(arr, 20, function(val){ return val != 0; }) 20- arr

, Chart.js, , :

...
,datasets: [
     {
         label: "Values"
        ,data: values
    }
    ,{
         type: "line"
        ,label: "20 Point Moving Average"
        ,data: movingAvg(values, 20, function(val){ return val != 0; })
    }
]
...

:

    /**
    * returns an array with moving average of the input array
    * @param array - the input array
    * @param count - the number of elements to include in the moving average calculation
    * @param qualifier - an optional function that will be called on each 
    *  value to determine whether it should be used
    */
    function movingAvg(array, count, qualifier){

        // calculate average for subarray
        var avg = function(array, qualifier){

            var sum = 0, count = 0, val;
            for (var i in array){
                val = array[i];
                if (!qualifier || qualifier(val)){
                    sum += val;
                    count++;
                }
            }

            return sum / count;
        };

        var result = [], val;

        // pad beginning of result with null values
        for (var i=0; i < count-1; i++)
            result.push(null);

        // calculate average for each subarray and add to result
        for (var i=0, len=array.length - count; i <= len; i++){

            val = avg(array.slice(i, i + count), qualifier);
            if (isNaN(val))
                result.push(null);
            else
                result.push(val);
        }

        return result;
    }

Answer 3

. . .

var getAverage = function(arr, n){
  var sum=0;
  if(n>arr.length){
    n = arr.length;
  }
  
  for(var ii=arr.length-n; ii<arr.length; ii++){
    sum += arr[ii];
  }
  return sum/n;
}


function(acceleration, 3);

Hide result

Answer 4

, .

var movingAverage = function(d, t, roundUp) {
    if (d.length >= t && d.constructor === Array) {
        var r = [], s = 0, f = this.decimalRoundingFactor, ma;

        roundUp = typeof roundUp === undefined? true : roundUp;

        for(var i=0;i<d.length;++i) {
            s += isNaN(d[i])? 0: d[i];
            if (i < t-1) {
                r.push(NaN);
            } else if (i+1 === t) {
                ma = roundUp? Math.round((s/t)*f)/f: s/t;
                r.push(ma);
            } else {
                s -= isNaN(d[i-t])? 0: d[i-t];
                ma = roundUp? Math.round((s/t)*f)/f: s/t;
                r.push(ma);
            }
        }

        return r;
    } else {
        throw "[ERROR] TechnicalAnalysis#movingAverage: Not enought data! OR data is not Array!";
    }
};