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.