Register the visualization with Pentaho Visualization API

Procedure

1. Register the visualization with the Visualization API. Include the following JavaScript at the beginning of the example.js file:

   // Utilize the required API for verifying that the VizController has been loaded before registration
   require(["common-ui/vizapi/VizController"], function(){ 
   
   // Register the visualization metadata with the Visualization API
     pentaho.visualizations.push({ 
       id: 'pentaho_sample_KPI',      // unique identifier 
       type: 'kpi',                   // generic type id 
       source: 'Example',             // id of the source library 
       name: 'Example KPI',           // visible name, this will come from a properties 
                                      // file eventually 
       'class': 'pentaho.sample.KPI', // type of the Javascript object to instantiate 
       args: {                        // arguments to provide to the Javascript object 
                                      // this allows a single class to act as multiple visualizations
       aggregate: 'AVG'
       }, 
       propMap: [], 
       dataReqs: [                    // dataReqs describes the data requirements of 
                                      // this visualization 
         { 
           name: 'Default', 
           reqs : 
             [ 
               { 
                 id: 'rows',               // ID of the data element 
                 dataType: 'string',       // data type - 'string', 'number', 'date', 
                                           // 'boolean', 'any' or a comma separated list 
                 dataStructure: 'column',  // 'column' or 'row' - only 'column' supported
                                           // so far 
                 caption: 'Level',         // visible name 
                 required: true,           // true or false 
                 allowMultiple: false, 
                 ui: { 
                   group: 'data' 
                 } 
               }, 
               {
                 id: 'measures', 
                 dataType: 'number', 
                 dataStructure: 'column', 
                 caption: 'Measure', 
                 required: true, 
                 allowMultiple: false, 
                 ui: { 
                   group: "data" 
                 } 
               }, 
               { 
                 id: 'aggregate', 
                 dataType: 'string', 
                 values: ['MIN', 'MAX', 'AVG'], 
                 ui: { 
                   labels: ['Minimum', 'Maximum', 'Average'], 
                   group: 'options', 
                   type: 'combo',  // combo, checkbox, slider, textbox, gem, 
                                   // gemBar, and button are valid ui types
                   caption: 'Aggregation' 
                 }
               }
             ]
         }
           ],
           menuOrdinal: 10001,
           menuSeparator: true,
           maxValues: [1000, 2000, 3000]
     });
   

2. To enclose the required API call, you must define }); at the end of the example.js

Results

Next steps

Parent Topic

• Developer center