次のソース例は、Visual LANSA で提供される Google 円グラフのサンプル・ウィジェットのコピーです。
function( PROTOTYPE, WIDGET )
\{
  //--------------------------------------------------------------------------
  // Google 円グラフが完成した場合のみ、このグラフをロードして Widget 完了
  //--------------------------------------------------------------------------
  google.load( 'visualization', '1', \{ packages:\["corechart"\], callback:WIDGET.Finalize \} );
 
  //--------------------------------------------------------
  // WIDGET-インターフェース 関数 (VL-ランタイムからの呼び出し)
  //--------------------------------------------------------
 
  //
  // 'onCreateInstance' - LANSA がこのクラスのインスタンスを作成時に呼び出し
  //
  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' - LANSA がこのクラスのインスタンスのビジュアル表現作成時に呼び出し
  //
  // パラメータ:
  //
  // - parentDiv : このコントロールのコンテナとして作成された Divこのサイズとスタイルは RDMLX でコントロール。
  //               コンテンツは以下の JavaScript でコントロール
  //
  PROTOTYPE.onRealizeControl = function( parentDiv )
  \{
    // 円グラフ作成
    this.m_Chart = new google.visualization.PieChart( parentDiv );
 
    // イベント・ハンドラーを連結
    this.AttachEvents();
 
    // 描画の準備完了
    this.DrawChart();
  \}
 
  //
  // 'onSizeChanged - ウィジェトのサイズ変更時に呼び出し
  //
  PROTOTYPE.onSizeChanged = function()
  \{
    this.DrawChart();
  \}
 
  //////////////// 
  // プロパティ //
  //////////////// 
 
  //
  // getTitle
  //
  PROTOTYPE.getTitle = function()
  \{
    return this.m_Title;
  \}
 
  //
  // setTitle
  //
  PROTOTYPE.setTitle = function( strTitle )
  \{
    this.m_Title = strTitle;
 
    this.DrawChart();
  \}
 
  ///////////// 
  // メソッド //
  ///////////// 
 
  //
  // Insert - データを円グラフに挿入
  //
  // パラメータ:
  // - 値: 整数
  // - キャプション: 文字列
  //
  // 戻りタイプ : 整数
  //
  PROTOTYPE.Insert = function( iValue, strCaption )
  \{    
    var index = this.m_DataTable.addRow( \[ strCaption, iValue \] );
 
    this.DrawChart();
 
    return index;
  \}
 
  //
  // Clear - すべてのデータをクリア
  //
  PROTOTYPE.Clear = function()
  \{
    //メンバのデータ初期化
    this.m_DataTable.removeRows( 0, this.m_DataTable.getNumberOfRows() );
 
    this.DrawChart();
  \}
 
  //
  // 削除 - 円グラフから指定のインデックスを削除
  //
  // パラメータ:
  // - インデックス: 整数
  //
  PROTOTYPE.Remove = function( index )
  \{
    index -= 1;
 
    if ( ( index >= 0 ) && ( index < this.m_DataTable.getNumberOfRows() ) )
    \{
      this.m_DataTable.removeRow( index );
 
      this.DrawChart();
    \}
  \}
 
  ////////////////////// 
  // ヘルパー機能 //
  ////////////////////// 
 
  //
  // 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;
 
    // イベント: 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 ) );
      \}
    \});  
  \}
 
  // ロード中 (コールバック待ち)
  return WIDGET.Loading;
\}  
[ !worddavaf485e25f57cd86bb5b0fc63f3f1b1cc.png|height=32,width=32! |../../index.htm#lansa/vlwebeng02_0055.htm]