Skip to main content

Pentaho+ documentation is moving!

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

 

Hitachi Vantara Lumada and Pentaho Documentation

Define the custom visualization

Parent article
This example creates a very basic KPI visualization.

Procedure

  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"); 
      this.numSpan.style.fontSize = "42px"; 
      this.numSpan.style.position = "relative"; 
      this.canvasElement.appendChild(this.numSpan);
    };
    
    /* Calculate the location of the KPI relative to the canvas */
    pentaho.sample.KPI.prototype.resize = function(width, height){ 
      this.numSpan.style.left = ((this.canvasElement.offsetWidth - this.numSpan.offsetWidth) / 2) + 'px'; 
      this.numSpan.style.top = ((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++){ 
        dataArray.push(rows[i].c[1].v); 
      } 
    
      // 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.
      switch(vizOptions.aggregate){ 
        case "MAX": 
          value = Number.MIN_VALUE;
          for(var i=0; i< dataArray.length; i++){ 
            value = Math.max(value, dataArray[i]); 
          } 
          break; 
        case "MIN": 
          value = Number.MAX_VALUE;
          for(var i=0; i< dataArray.length; i++){ 
            value = Math.min(value, dataArray[i]); 
          } 
          break; 
        case "AVG": 
          var total = 0; 
          for(var i=0; i< dataArray.length; i++){ 
            total += dataArray[i]; 
          } 
          value = total / dataArray.length; 
          break; 
        default: 
      }   // Update the background color
      this.canvasElement.style.backgroundColor = vizOptions['myBackgroundColor'];
      // write the KPI value to the screen
      this.numSpan.innerHTML = value; 
      this.resize(); 
    }

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:

pentaho-solutions/system/common-ui/resources/web/vizapi/ccc/ccc_wrapper.js

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