<script type=”text\/javascript” src=”jquery-1.10.0.min.js”><\/script><\/p>\n
\/\/ Add reference to Google APIs<\/strong><\/p>\n <script type=”text\/javascript” src=”https:\/\/www.google.com\/jsapi”><\/script> \/\/ Go get the Sharepoint list.<\/strong><\/p>\n $(document).ready(function() { }); var data = new google.visualization.DataTable(); \/\/ First row is the Parent Node that is required to create the master container for the TreeMap<\/strong><\/p>\n \/\/ Append Sharepoint List<\/strong><\/p>\n function processResult(xData, status) { \/\/ Add dummy last row in table. Probably not necessary.<\/strong><\/p>\n data.addRow([‘NONE’,’Support Group’,null,null]);<\/p>\n \/\/ Create and draw the visualization.<\/strong><\/p>\n var tree = new google.visualization.TreeMap(document.getElementById(‘chart_div’));<\/p>\n tree.draw(data, {<\/p>\n minColor: ‘#0d0’, }<\/p>\n }<\/p>\n <\/script><\/p>\n <body>
\n<script type=”text\/javascript”>
\ngoogle.load(“visualization”, “1”, {packages:[“treemap”]});
\ngoogle.setOnLoadCallback(drawChart);
\nfunction drawChart() {<\/p>\n
\nvar soapEnv =
\n“<soapenv:Envelope xmlns:soapenv=’http:\/\/schemas.xmlsoap.org\/soap\/envelope\/’>
\n<soapenv:Body>
\n<GetListItems xmlns=’http:\/\/schemas.microsoft.com\/sharepoint\/soap\/’>
\n<listName>TreeMapData<\/strong><\/listName>
\n<viewFields>
\n<ViewFields>
\n<FieldRef Name=’Title’ \/>
\n<FieldRef Name=’Parent’ \/>
\n<FieldRef Name=’InProgess’ \/>
\n<\/ViewFields> <\/viewFields> <\/GetListItems>
\n<\/soapenv:Body>
\n<\/soapenv:Envelope>”;
\n$.ajax({
\n\/\/ URL to your site or subsite.<\/strong>
\nurl: “\/sandbox\/_vti_bin\/lists.asmx”,
\ntype: “POST”,
\ndataType: “xml”,
\ndata: soapEnv,
\ncomplete: processResult,
\ncontentType: “text\/xml; charset=”utf-8″”<\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/p>\n
\n});<\/em><\/em><\/em><\/em><\/em><\/em>
\n\/\/ Create and populate the data table.<\/strong><\/p>\n
\ndata.addColumn (‘string’, ‘Title’);
\ndata.addColumn (‘string’, ‘Parent’);
\ndata.addColumn (‘number’, ‘InProgress’);
\ndata.addColumn (‘number’, ‘Color’);
\ndata.addRow([‘Support Group’, null,0,0]);<\/p>\n
\n$(xData.responseXML).find(“z\\:row”).each(function() {
\n\/\/ 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.<\/strong>
\nvar title = $(this).attr(“ows_Title”);
\nvar tix = Math.floor($(this).attr(“ows_InProgess”));
\ndata.addRow([{v:title},’Support Group’, {v:tix},{v:tix}]);
\n});<\/em><\/p>\n
\nmidColor: ‘#ddd’,
\nmaxColor: ‘#f00’,
\nminColorValue: 1,
\nmaxColorValue: 30,
\nheaderHeight: 15,
\nfontColor: ‘black’,
\nshowScale: false});<\/p>\n
\n<div id=”chart_div” style=”width: 900px; height: 500px;”><\/div>
\n<\/body><\/p>\n
![\"\"](\"\/images\/treemapdemo.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"