Page History
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;
...
}