Guest Author: Bryon Wyly

Using the downloadable Yahoo javascript/flash library to create secure pie charts for your sensitive SharePoint data

 

 

I have done several blogs on how to use the google apis to create dynamic pie charts of lists in SharePoint based on code written by Claudio Cabaleyro and published at endusersharepoint.com. Perhaps the biggest request I have heard is, “How can I use these charts on my secure intranet?” Since Google Apps is an image that is shipped back to you after sending the required data and since SSL is not an option, Google Apps are useless for lists that use secure and sensitive data.

Previous Posts I have done on Dynamic Pie Charts for SharePoint:

Summarizing Multiple List Content into a Single Pie Chart

Make a pie chart that shows percents

Adding Graphs, Bar and Pie Charts to SharePoint

A recent comment on my blog suggested I look at the Yahoo User Interface or YUI as a possible solution. After a few hours work, I was able to marry a YUI pie chart with the JQuerry SharePoint List parser and create a Pie Chart generated by your SharePoint List, that does NOT send you data outside the network.

Requirements:

1. You must have permissions to add web parts to your SharePoint Site and know how to make a view of a list
2. You must know how to copy and paste
3. You must be able to download a zip file to your computer, unzip it and upload the javascript, css and swf(flash) files to a SharePoint Library
   • This Chart works on the basis of how you group on your list in SharePoint. In the following example, I made a list of projects and grouped it by ‘Status’.  Notice that the chart is hidden,  that makes it possible to chart a list without it actually being visible.


4. Add a content editor web part and copy and past the below code into it. Set the chartkeyword in the code to the name of the column that you are grouping by.  You can download a text file of the code at http://www.sharepointcanvas.com/spc/files/SharePointPieChart.txt

 <!--
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
SECURE PIE CHART GENERATOR FOR SHAREPOINT 2007
This PieChart is powered by YUI by Yahoo.  The libraries can be downloaded at .... and uploaded to you server.  You then must change the below
links to connect to these downloaded libraries.  Unlike the google apps which require you to send information to the google server, then return
a piechart image, the downloaded YUI tools use a flash component to create the Pie Chart right on your server, thus allowing you to use piecharts
from secure and sensitive data.
Version 1.0
Developed by
Bryon Wyly 5-20-2010
////////////////////////////////////////////////////////////////////////////////////////////////////////////
-->
<!-- replace these links with the ones you download from... and then upload to you server-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/swf/swf-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/charts/charts-min.js"></script>
<script type="text/javascript">
// This requests the JQuerry Library so the SharePoint List can be parsed.  No information is sent outside the organization.  If it is not possible to connect to this library, you can download it from google applications
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>
<!--begin custom header content for this example-->
<style type="text/css">
	#chart	{float: left;width: 300px;height: 200px;}
</style>
<!--end custom header content for this example-->
<div id="chart"></div>
<script type="text/javascript">
////////////////////////// Customizations /////////////////////////////////
chartkeyword="Status"	//enter the column you are grouping on your sharepoint list
legendLocation="right"	//right, left, top, bottom
legendDisplay="count"	//count, percent or none
////////////////////////// ///////////// /////////////////////////////////
$("document").ready(function(){makeChart();});

function getList(type)
{
	var arrayList=$("td.ms-gb:contains('" + chartkeyword + "')");
	var count= new Array();
	var labels= new Array();
	$.each(arrayList, function(i,e)
	{
		var MyIf= $(e).text();
		var x= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates
		count[i]=x;
		var y= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
		labels[i]=y;
	});
	if (type=="labels"){return labels;}
	else if (type=="count"){return count;}
	else{alert("Error - type "+type+" unknown");}
}

function makeChart()
{
	YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.8.1/build/charts/assets/charts.swf";
	//--- data
	var strData=getList("labels");
	var intCount=getList("count");
	var thedataARR=[]
	if(legendDisplay=="count"){for (i=0;i<intCount.length;i++){thedataARR[i]={response:strData[i] + " ("+intCount[i]+")", count: intCount[i]}}	}
	else if(legendDisplay=="percent"){var total=0;for (i=0;i<intCount.length;i++){total+=intCount[i]*1}for (i=0;i<intCount.length;i++){thedataARR[i]={response:strData[i] + " ("+Math.round(intCount[i]/total*10000)/100+"%)", count: intCount[i]}}}
	else{for (i=0;i<intCount.length;i++){thedataARR[i]={response:strData[i], count: intCount[i]}}}
	var opinionData = new YAHOO.util.DataSource( thedataARR );
	opinionData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	opinionData.responseSchema = { fields: [ "response", "count" ] };
	//--- chart
	var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
	{dataField: "count",categoryField: "response",style:{padding: 20,legend:{display: legendLocation,padding: 10,spacing: 5,font:{family: "Arial",size: 13}}},expressInstall: "assets/expressinstall.swf"});
}

</script>

5. Download the following zip file at http://www.sharepointcanvas.com/spc/files/piechartfiles.zip and unzip it. Upload all the files to a SharePoint Library.
6. Go to the files, right click and select ‘copy shortcut’. Paste this address over the link in the code going to Yahoo:


7. Paste the Shortcut over current link in the code

src=”http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js

to

src=”http://yourpath/yahoo-dom-event.js

I would recommend that you first make sure the pie chart is working before switching out the file paths.  If something isn’t right the pie chart will just not show up.  As of this post, posting more than one of these on a page is not an option. I tried and the graphs seem to pick random sizes regardless of what you do to the width in the css.  I would recommend using the google charts if you don’t need the security since they are easier to work with.

Guest Author: Bryon Wyly

Bryon has been a Microsoft Developer for 6 years and is currently the SharePoint developer and administrator for the Xavier University. He is responsible for SharePoint collaboration sites, CIO dashboards and the campus wide intranet.

Bryon enjoys finding solutions with SharePoint that an end user can implement out of the box or with SharePoint Designer.