Skip to main content

Pentaho+ documentation has moved!

The new product documentation portal is here. Check it out now at


Hitachi Vantara Lumada and Pentaho Documentation

Define the custom visualization

Parent article
This example creates a very basic KPI visualization.


  1. Create a file in the example-visualization/resources folder called example.js.

  2. Add the following content to the file:

    /* define a namespace for this sample to live in */
    pentaho.sample = {};
    /* define the KPI Class, which renders a single KPI */
    pentaho.sample.KPI = function(canvasElement) {
      this.canvasElement = canvasElement;
      this.numSpan = document.createElement("span"); = "42px"; = "relative"; 
    /* Calculate the location of the KPI relative to the canvas */
    pentaho.sample.KPI.prototype.resize = function(width, height){ = ((this.canvasElement.offsetWidth - this.numSpan.offsetWidth) / 2) + 'px'; = ((this.canvasElement.offsetHeight - this.numSpan.offsetHeight) / 2) + 'px'; 
    /* Render the KPI */
    pentaho.sample.KPI.prototype.draw = function(datView, vizOptions) { 
      // extract the values from the result set
      var rows = datView.dataTable.jsonTable.rows; 
      var dataArray = []; 
      for(var i=0; i<rows.length; i++){ 
      // calculate the KPI to display
      var value = 0; 
      // note that the vizOptions contains an aggregate option,
      // this is a custom property specific for this visualization type.
        case "MAX": 
          value = Number.MIN_VALUE;
          for(var i=0; i< dataArray.length; i++){ 
            value = Math.max(value, dataArray[i]); 
        case "MIN": 
          value = Number.MAX_VALUE;
          for(var i=0; i< dataArray.length; i++){ 
            value = Math.min(value, dataArray[i]); 
        case "AVG": 
          var total = 0; 
          for(var i=0; i< dataArray.length; i++){ 
            total += dataArray[i]; 
          value = total / dataArray.length; 
      }   // Update the background color = vizOptions['myBackgroundColor'];
      // write the KPI value to the screen
      this.numSpan.innerHTML = value; 

Next steps

This basic visualization is the entry point for a more advanced visualization. If you have a Flash component, HTML5, or SVG visualization library, you can make calls to those elements here and wire them into the inner HTML of the canvas element.

For a more advanced example, see the Community Chart Components components here:


These charts include the heat grid, which is enabled by default in Pentaho Analyzer.