Multiple Secure Pie Charts for SharePoint

June 10, 2010

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

This is the second version of the code that I wrote. In this version, you can easily create two or more of the secure, yahoo pie charts on the same page inside SharePoint. Like the first version, this code does NOT require any outside api’s and will NOT send information over the internet like the google charts will.
If you do not need the security, I would highly recomend you use Google APIs instead since they are alot easier to work with when you make multiple pie charts.

Previous Posts I have done on Dynamic Pie Charts for SharePoint using Google’s APIs:

Summarizing Multiple List Content into a Single Pie Chart

Make a pie chart that shows percents

Adding Graphs, Bar and Pie Charts to SharePoint

Why YUI Charts are hard to Use:

The main is reason is sizing. The charts have a mind of their own on what size they will be. If you are going to use a single chart, it’s not that big of a deal, but if you have two charts, they will invariably be 2 different sizes when you get them up and running. They also can changes sizes if you later on add more items for the pie chart to group by. I will show you how to change the pie chart sizes in this tutorial, but it is mostly a trial and error process.

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

1. These Charts work on the basis of how you group your lists in SharePoint. In the following example, I made a list of projects and grouped it by ‘Status’ and ‘Category’. Notice that the ‘Status’ chart is hidden, that make it possible to chart a list without it actually being visible.

Edit view of the hidden list - grouped by 'Status'

2. Add a content editor web part and copy and past the below code into it.

You can download a text file of the code at http://americancapital.brinkster.net/spc/files/MultipleSharePointPieCharts.txt

* note: Currently wordpress.com is not letting me save the code. Please download the code from the above link


3. Set the keywords.
The keywords for the charts is at the very top in a div tag. look for:

<div id=”keyword_chart”>Status,Category</div>

and change ‘Status,Category’ to the names of you groupings on your SharePoint Lists (ie Product,Customer,Order). Remember that Capitalization does matter.

You may do the same with:

Where you want the legend to show up. Your options are Left,Right,Top or Bottom for each chart

Whether you want a total count of each item., percent or no numbers at all in the legend. Enter wither count, percent or none for each chart

If you have more than two charts:
Two or more charts requires some additional work. Find the following table in the code:


<!--Customize the number of charts here--></pre>
<table><!-- to make another row of charts, copy  the next 4 rows of code and paste it below the</tr>
 then rename id="chart1"  to id="chartX" X being count of charts you have-->
<tbody>
<tr>
<td class="tdchart"></td>
<!-- To make another chart, copy this whole row then change the id="chart1" to id="chart2"-->
<td class="tdchart"></td>
</tr>
</tbody>
</table>
<pre>

Notice that there are two examples right below in the code. One for three charts on one row, another for two charts per row on two rows. Use these as examples to display the charts the way you wish. Remember you MUST have a div (<div id=”chart1″ class=”chart1″></div>) INSIDE a td cell (<td class=”tdchart”><div id=”chart1″ class=”chart1″>) with a unique sequential (1,2,3,4…) id for EACH chart.

HTML for three charts on the same row:

</pre>
<table>
<tbody>
<tr>
<td class="tdchart"></td>
<td class="tdchart"></td>
<td class="tdchart"></td>
</tr>
</tbody>
</table>
<pre>

HTML for four Charts on 2 different rows

</pre>
<table>
<tbody>
<tr>
<td class="tdchart"></td>
<td class="tdchart"></td>
</tr>
<tr>
<td class="tdchart"></td>
<td class="tdchart"></td>
</tr>
</tbody>
</table>
<pre>

4. Resize the Pie Charts.

Almost without fail, you will need to individually edit the sizes of the Pie Charts. You do this by finding the chart sizes in the styles right above the display table (see html below). Edit the corresponding Chart’s height and width, it may take some time. Edit .tdchart if you want to edit the size of the container for all the charts.


<!--customize the size of the charts here add a new .chart1 - .chart2 - .chart3 and so on, for every chart you have. --></pre>
<style type="text/css"><!--
	.chart1	{float: left;width: 375px;height: 250px;}
	.chart2	{float: left;width: 450px;height: 300px;}
	.chart3	{float: left;width: 450px;height: 300px;}
	.chart4	{float: left;width: 450px;height: 300px;}
	.tdchart{width: 450px;height: 300px}
--></style>
<pre>

Secure Pie Charts for SharePoint

May 18, 2010

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

What chart looks like upon completion

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

If you wish to put more than one pie chart on your sharepoint page, please go to this more recent post.

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 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

1. 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 make it possible to chart a list without it actually being visible.

Edit view of the hidden list - grouped by 'Status'

2. 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




3. Download the following zip file at http://www.sharepointcanvas.com/spc/files/piechartfiles.zip and unzip it then upload all the files to a SharePoint Library

4. Go to the files, right click and select ‘copy shortcut’ then paste this address over the link in the code going to Yahoo:

Getting the path of your SharePoint files

5. 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.


Make a pie chart that shows percents

May 12, 2009

 

Update: The code I had originally posted was hard to copy and not figuring the percentage accurately. This has been corrected.

This is a quick update to Claudio Cabaleyro’s ground breaking blog on endusersharepoint.com to use jquery and google charts api to create pie charts of SharePoint List data.

Here is Cabaleyro’s code slightly modified to show the percent instead of the count of items from the list. Hope this helps anyone who has been looking for this solution.

Copy and paste the following code

<script type="text/javascript">
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>
<div id="jLoadMe" class="content"><strong>Item by percent</strong></div>
<script type="text/javascript">
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>
<script
type="text/javascript">
$("document").ready(function(){
var arrayList=$("td.ms-gb:contains(':')");
var coord= new Array();
var labels= new Array();
var titles= new Array();
var total=0

$.each(arrayList, function(i,e)
{
var MyIf= $(e).text();
var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the ‘Y' coordinates
coord[i]=txt;
total=total+(txt*1)
var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
titles[i]=txt1;
//labels[i]=titles[i]+"("+coord[i]"; //update the total
//labels[i]=titles[i]+"("+Math.round((coord[i]/total*100)*10)/10+"%)"; //update the total
});

for(i=0;i<coord.length;i++)
{
coord[i]=Math.round((coord[i]/total*100)*10)/10
labels[i]=titles[i]+"("+coord[i]+"%)"; //update the total
}

var txt= coord.join(",");
var txt1= labels.join("|");

// Adjust Chart Properties below – See Google Charts API for reference
var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=300x120&chd=t:"+txt+"&chl="+txt1+"&chco=FF0000' />";
$("#jLoadMe").append("
"+vinc+"
")
});

</script>

Web Chart Part available on Codeplex

May 11, 2009

chartpart2.png

Here is an interesting Web Part available for free on Codeplex. You have to have Micrsoft .net 3.5 SP 1 and .net 3.5 Chart Controls so if you have access to the Sharepoint server(s) this would be a real easy solution to graphs for dashboards.

http://chartpart.codeplex.com/


Adding Graphs, Bar and Pie Charts to SharePoint

April 24, 2009

Here is a quick trick I learned today that solves an issue I’ve been having for awhile now.  How to quickly make charts and graphs that pull dynamically from SharePoint Lists.

Screen Shot of the finished product:

graphsscreenshot

Claudio Cabaleyro posted this article on endusersharepoint.com on how to use jquery and google charts to pull info off of SharePoint Lists and display it as a Pie Chart.  I tried it out and it literally took me 1 minute to have my first pie chart.  I quickly saw some limitations that people may run into and in this article I will talk about some tweaks I did to Claudio’s code to do some very cool stuff.

First off, the code works by rooting for any table cell that has the class “ms-gb” and then checks to see if that cell has an “:” in it.  Here is the code

var arrayList=$(“td.ms-gb:contains(‘:’)”);

This works fine except if you want to have multiple graphs on the same page, then the code would tally all your lists together regardless if they were related or not.  If you would like to have more than on graph here is how to edit that line of code.

var arrayList=$(“td.ms-gb:contains(‘[name of column that's grouped]‘)”);

Since my first list was grouped om the Category so I put Category in there instead of the colon.
var arrayList=$(“td.ms-gb:contains(‘Category’)”);

My second graph, I made another list and grouped it by Status, I copied and pasted the code a second time in the second instance I changed the code to:
var arrayList=$(“td.ms-gb:contains(‘Status’)”);

Now at least you can have multiple graphs as long as the column names that are doing the grouping are different.  I also made an update to the second div tag id to prevent there being two identical id’s from being on the same page.  On the second div <div id=”jLoadMe” class=”content”> I changed to <div id=”jLoadMe2″ class=”content”> at the end where it dumps the information I updated $(“#jLoadMe”).append to $(“#jLoadMe2″).append

Since I did not one of the lists to actually show up I went to layouts and checked the hidden box, and the pie chart continued to work fine.

Other notes:

I went to google charts at http://code.google.com/apis/chart/ and spent some time learning how to customize the charts a little bit.

To change the color all you have to do is add &chco=#[Hexadecimal color number], the &chs=250×100 tells the width and heigth of the cart image and you can change the piechart to a non-3d chart with the cht=p here is what my code looked like when it was done.

var vinc= “<IMG src=’http://chart.apis.google.com/chart?cht=p&chs=250×100&chd=t:”+txt+”&chl=”+txt1+”&chco=0000FF&#8217; />”;
 $(“#jLoadMe”).append(“<p>”+vinc+”</p>”)

Here is what the chart looked like:

bluegraph

I hope the rest of you find this solution as useful as I did.  As I said, I had a dynamic charts of my SharePoint Lists up in minutes!

UPDATE!
Here is the code that I used to do the two pie charts side by side:



<script type="text/javascript">
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>

<script type="text/javascript">
var chartkeyword = [];
var chartcolor = [];

////////////////////////// Customizations /////////////////////////////////

chartkeyword[1]="Release" 	//name of the first column that's grouped
chartkeyword[2]="Release"   //name of the second column that's grouped
chartcolor[1]="FF0000"		//Color of Pie Chart 1
chartcolor[2]="00FF00"		//Color of Pie Chart 1

var charts=2 // if you only want one pie chart chang this to 1

</script>
<table width=100%><tr>
<td><div id="jLoadMex1" class="content"><strong>

<!------------- Name of Chart 1 -------------------------->
Add a Name Here

</strong></div></td>
<td><div id="jLoadMex2" class="content"><strong>

<!------------- Name of Chart 2 -------------------------->
Add a Name Here

</strong></div></td>
</tr></table>

<script type="text/javascript">
$("document").ready(function(){

for(var i=1;i<=charts;i++)
{
makeChart(i)
}
});

function makeChart(i)
{
	var arrayList=$("td.ms-gb:contains('" + chartkeyword[i] + "')");
	var coord= new Array();
	var labels= new Array();
	
	$.each(arrayList, function(i,e)
	{
		var MyIf= $(e).text();
		var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates
		coord[i]=txt;
		var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
		//labels[i]=txt1+"("+txt+")";   //add also coordinates for better read
		labels[i]=txt1
	});
	//----------Start of "Summerize Lists into a single Pie Chart" Code -----------
	var labelsCoords= new Array();
	for ( var count1=0;count1<labels.length;count1++) //Dupe Check
	{
		if (labels[count1]=="!delete!")
		{
			 labels.splice(count1,1); //delete dupe from array
			 coord.splice(count1,1); //delete numbers from array
			 count1-=count1; //reset the counter to match the index
		}
		else
		{
			for ( var count2 in labels )
			{				
				if (labels[count1].replace(/ /g,"-")==labels[count2].replace(/ /g,"-")&&count1!=count2&&labels[count1]!="!delete!")
				{
					coord[count1]=(coord[count1]*1)+(coord[count2]*1) //total dupe counts
					labels[count2]="!delete!" //label as a dupe to delete				
				}
			}
		}		
		labelsCoords[count1]=labels[count1]+"("+coord[count1]+")";
	} 

	var txt= coord.join(",");
	var txt1= labelsCoords.join("|"); // This replaces  var txt1=labels.join("|");
	
	//----------End of "Summerize Lists into a single Pie Chart" Code -----------



	// Adjust Chart Properties below - See Google Charts API for reference
	var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=320x120&chd=t:"+txt+"&chl="+txt1+"&chco="+chartcolor[i]+"' />";
	$("#jLoadMex"+i).append("<p>"+vinc+"</p>")
}

</script>

Change the keywords at the top of the code to the name of the categories you are grouping by… Good Luck!


Follow

Get every new post delivered to your Inbox.