Google Treemap Chart from Sharepoint list

 Computer, Sharepoint, Software  Comments Off on Google Treemap Chart from Sharepoint list
May 292013
 

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>

 Posted by at 2:24 am  Tagged with: