DHTMLX Docs & Samples Explorer

Implementing New Types of Statistics Counters

Statistics Counters are sub-sets of header|footer shortcuts which are used to show aggregated values inside header|footer cells. They are created in the way similar to that of normal shortcuts creation but have some specific features.

The simplest statistics counter can be created by using the code snippet similar to the following one:

  grid._in_header_stat_count=function(tag,index,c){      //shortcut for statistics counter
      var calck=function(){                              // define the function which will be used for calculations
          return this.getRowsNum();
      }
      this._stat_in_header(tag,calck,index,c);           //call default statistics handler processor
  }

There are some differences between default shortcuts and statistics counters:

  1. Instead of setting some predefined value, statistics value is defined as an inner function. As for the normal content, we define a function, which will be called each time when the data is changed in the grid. The result of such function will be used as a header|footer value.
  2. _stat_in_header method is used to register a new statistics counter. It is possible to attach all the necessary events manually, but it is much simpler to call the predefined method which will do it automatically;
  3. The third argument of the function is the array of the surrounding content (if you have “about {#stat_sum}$” as header value, then c == [“above”,”$”]); it will be processed automatically, there is no need to take any additional steps to process it.

The previous snippet is pretty simple - it always returns the current number of rows. Lets look at the more advanced case:

  grid._in_header_stat_summ=function(tag,index,c){         // shortcut for statistics counter
      var calck=function(){                                // define the function which will be used for calculations
          var summ=0;                                      // set initial counter value
          this.forEachRow(function(id){                    // for each row
              summ+=this.cells(id,index).getValue()*1;     // add row_value
          })
          return summ;
      }
  this._stat_in_header(tag,calck,index,c);             //call default statistics handler processor
  }

This snippet uses a slightly more complex approach: each time when any changes in the grid occur and the calculation function is called, the code iterates through all the rows and calculates the sum of value in the related cells. Be sure you checked the iteration through grid article.

Basically you can use the above mentioned snippet, as it is pretty universal and you just need to change the name and the math function inside it. For example, the following code can be used to calculate the mean square deviation:

  grid._in_header_stat_deviation=function(tag,index,c){ //the marker for statistics counter
      var calck=function(){ // define the function which will be used for calculations
          var summ=0; //set initial
          this.forEachRow(function(id){
              summ+=Math.pow(this.cells(id,index).getValue(),2);
          })
          return summ/this.getRowsNum();
      }
  this._stat_in_header(tag,calck,index,c); //call the default statistics handler processor
  }

As you can see the changes are minimal - we just added some math to the calculations. The given above code has one problem - the result of the divisions can be the fractional value (such as 0.33333333). But in most cases we want the result to be neatly formated. The simplest way to fix this issue directly is as follows:

  return Math.round(summ/this.getRowsCount()*100)/100;

This will round the value to 2 digits in a simple and fast way. To apply a more complex formatting it is possible to use the grid built-in formatting (set by grid.setNumberFormat) command:

  return this._aplNF(summ,index);

The confusing _aplNF stands for the name of the inner grid function which is used for edn excells and can be reused to apply the same formating to autocalculated values.

As with the normal shortcuts, statistics counters can be defined on prototype level, so all the instances of the grid will be affected:

  dhtmlXGridObject.prototype._in_header_SOME=function(tag,index){
  ....
  }