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;
}
