14.1.3 Example Widget

This example source is a copy of the Google Pie Chart example widget which is shipped with Visual LANSA.

    function( PROTOTYPE, WIDGET )
    {   
      //--------------------------------------------------------------------------   
      // LOAD GOOGLE PIECHART ONLY WHEN THAT IS COMPLETED CAN WE FINALIZE THE WIDGET  
      //--------------------------------------------------------------------------   
      google.load( 'visualization', '1', { packages:["corechart"], callback: WIDGET.Finalize } );  

      //--------------------------------------------------------   
      // WIDGET-INTERFACE FUNCTIONS (CALLED FROM THE VL-RUNTIME)   
      //--------------------------------------------------------

      //
      // 'onCreateInstance' - gets called when LANSA creates an instance of this class.   
      //   
      PROTOTYPE.onCreateInstance = function()   
      {     
        // Create the datatable     
        this.m_DataTable = new google.visualization.DataTable();      

        this.m_DataTable.addColumn( 'string', 'Caption' );     
        this.m_DataTable.addColumn( 'number', 'Value' );   
      }      

      //   
      // 'onRealizeControl' - gets called when LANSA creates a visual representation of an instance of this class.   
      //   
      // Parameters:   
      //   
      // - parentDiv : the div that's been created as a container for this control. Its size and style are controlled by  
      //               RDMLX, its content by the JavaScript below.   
      //   
      PROTOTYPE.onRealizeControl = function( parentDiv )   
      {     
        // Create the piechart     
        this.m_Chart = new google.visualization.PieChart( parentDiv );       

        // Hook up event handlers     
        this.AttachEvents();       

        // We're ready to draw it     
        this.DrawChart();  
      }    

      //   
      // 'onSizeChanged - gets called when the widget changes size.   
      //   
      PROTOTYPE.onSizeChanged = function()  
      {     
        this.DrawChart();   
      }     

      ////////////////   
      // Properties //   
      ////////////////     

      //   
      // getTitle   
      //   
      PROTOTYPE.getTitle = function()   
      {     
        return this.m_Title;  
      }     

      //   
      // setTitle   
      //   
      PROTOTYPE.setTitle = function( strTitle )   
      {     
        this.m_Title = strTitle;       

        this.DrawChart();  
      }     

      /////////////   
      // Methods //  
      /////////////    

      //   
      // Insert - Insert data into the piechart   
      //   
      // Parameters:   
      // - Value: Integer   
      // - Caption: String  
      //  
      // Return Type: Integer   
      //  
      PROTOTYPE.Insert = function( iValue, strCaption )  
      {        
        var index = this.m_DataTable.addRow( [ strCaption, iValue ] );      

        this.DrawChart();       

        return index;   
      }    

      //  
      // Clear - Clears all data   
      //   
      PROTOTYPE.Clear = function()   
      {     
        // Initialize member data   
        this.m_DataTable.removeRows( 0, this.m_DataTable.getNumberOfRows() ); 

        this.DrawChart();  
      }    

      //   
      // Remove - Removes the given index from the piechart
      //
      // Parameters:  
      // - Index: Integer   
      //  
      PROTOTYPE.Remove = function( index )   
      {     
        index -= 1;

        if ( ( index >= 0 ) && ( index < this.m_DataTable.getNumberOfRows() ) )    
        {       
          this.m_DataTable.removeRow( index ); 

          this.DrawChart(); 
        }  
      }     

      //////////////////////   
      // Helper functions //  
      //////////////////////     

      //   
      // DrawChart  
      //   
      PROTOTYPE.DrawChart = function()  
      {    
        if ( this.m_Chart )     
        {      
          // Draw it using our data.     
          this.m_Chart.draw( this.m_DataTable,     
          {         
            title          : this.m_Title,        
            legend         : 'none',         
            pieSliceText   : 'label',         
            backgroundColor: 'transparent'       
          });    
        }   
      }     

      //   
      // AttachEvents   
      //   
      PROTOTYPE.AttachEvents = function()   
      {     
        var pThis = this;

        // EVENT: select     
        google.visualization.events.addListener( this.m_Chart, 'select', function()     
        {       
          var        
            selectedItem = pThis.m_Chart.getSelection()[0];       

          if ( selectedItem )       
          {         
            pThis.fireItemSelected( ( selectedItem.row + 1 ), pThis.m_DataTable.getValue( selectedItem.row, 1 ), pThis.m_DataTable.getValue( selectedItem.row, 0 ) );       
          }     
        });    
      }     

      // We're still loading (waiting for a callback)   
      return WIDGET.Loading;
    }