Skip to main content
Pentaho Documentation

Define the Custom Visualization

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"); 
      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(); 
    } 
           

    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 innerHTML 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.