Just a little exercise to pull data from a Sharepoint list and visualize it with a Google Treemap. My Sharepoint list was a simple query to pull Support Groups from BMC Remedy and the # of tickets ‘In Progress.’
The structure is [Title] (or Support Group), [Parent], [TicketsInProgress], [TotalTickets]
// Add reference to JQUERY library.
<script type=”text/javascript” src=”jquery-1.10.0.min.js”></script>
// Add reference to Google APIs
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“treemap”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Go get the Sharepoint list.
$(document).ready(function() {
var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’>
<soapenv:Body>
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’>
<listName>TreeMapData</listName>
<viewFields>
<ViewFields>
<FieldRef Name=’Title’ />
<FieldRef Name=’Parent’ />
<FieldRef Name=’InProgess’ />
</ViewFields> </viewFields> </GetListItems>
</soapenv:Body>
</soapenv:Envelope>”;
$.ajax({
// URL to your site or subsite.
url: “/sandbox/_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=”utf-8″”
});
});
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn (‘string’, ‘Title’);
data.addColumn (‘string’, ‘Parent’);
data.addColumn (‘number’, ‘InProgress’);
data.addColumn (‘number’, ‘Color’);
data.addRow([‘Support Group’, null,0,0]);
// First row is the Parent Node that is required to create the master container for the TreeMap
// Append Sharepoint List
function processResult(xData, status) {
$(xData.responseXML).find(“z\:row”).each(function() {
// I converted the ajax results to variables so I could format the numeric columns. This is probably necessary as I could not get the next addRow to work properly.
var title = $(this).attr(“ows_Title”);
var tix = Math.floor($(this).attr(“ows_InProgess”));
data.addRow([{v:title},’Support Group’, {v:tix},{v:tix}]);
});
// Add dummy last row in table. Probably not necessary.
data.addRow([‘NONE’,’Support Group’,null,null]);
// Create and draw the visualization.
var tree = new google.visualization.TreeMap(document.getElementById(‘chart_div’));
tree.draw(data, {
minColor: ‘#0d0’,
midColor: ‘#ddd’,
maxColor: ‘#f00’,
minColorValue: 1,
maxColorValue: 30,
headerHeight: 15,
fontColor: ‘black’,
showScale: false});
}
}
</script>
<body>
<div id=”chart_div” style=”width: 900px; height: 500px;”></div>
</body>
