IBM Mashup Center provides many great widgets that you can easily use out of the box. There are other useful visualization widgets provided by 3rd parties that could be integrated with into a IBM Mashup Center page. One way to use custom visualization is to create a new iWidget, which will allow you to fully integrate with other iWidgets. Another alternative that is sufficient in most cases is to keep the visualization in a separate HTML page. We can write a simple JavaScript to parse some parameters from the URL, and then use these values in the visualization. This html page can then be integrated to any Mashup application using the URL customizer + website displayer widget.
For example, the Google Visualization provides a Gauge widget that might come in handle in many dashboard mashups. To use it in a mashup, we can create a separate html page that would setup all the appropriate settings for the Gauge widget. In the html page, we will use a simple JavaScript function to parse the gauge label and values from the URL. At run time, we will be able pass in the label and values dynamically as follow:
http://[web server host]/samplePage.html?Label1=Memory&Value1=98&Label2=CPU&Value2=50&Label3=Disk_Space&Value3=20
The following is the sample html page code:
<html
<head
<script type='text/javascript' src='http://www.google.com/jsapi'
</script
<script type='text/javascript'
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, getURLParameterValue('Label1'));
data.setValue(0, 1, parseInt(getURLParameterValue('Value1')));
data.setValue(1, 0, getURLParameterValue('Label2'));
data.setValue(1, 1, parseInt(getURLParameterValue('Value2')));
data.setValue(2, 0, getURLParameterValue('Label3'));
data.setValue(2, 1, parseInt(getURLParameterValue('Value3')));
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
}
function getURLParameterValue( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script
</head
<body
<div id='chart_div'
</div
</body
</html
We can display this visualization with the website displayer. Other widgets can then pass the appropriate values into these gauge widgets through the URL such as the following at run time.
http://[web server host]/samplePage.html?Label1=
Memory&Value1=
98&Label2=
CPU&Value2=
50&Label3=
Disk_Space&Value3=
20
About the author
Ronald Leung is a Web 2.0 Mashup Solutions Architect in the Information Management division of IBM. He is located at the IBM Silicon Valley Lab in California, you can reach him at rcleung@us.ibm.com.