Summerizing Multiple List Content into a Single Pie Chart

I was just asked by stump the panel on endusersharepoint.com if I could make the Pie Chart I demonstrated in a previous post, summarize content from multiple SharePoint lists. (see stump the panel thread –Summarizing List content in a chart…)

The scenario is once again you want to take a list and use google analytics to create a pretty pie chart.  But now instead of having one list you have two or more lists with the same groupings and then have the summarized data from all the lists in one pie chart.

Seemed easy enough so I gave it a swing and here it is.

As in the previous post, replace the keyword with the column on the lists you are grouping by.  Also you can hide the lists if you want only a pie chart dashboard.


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

Advertisements

7 Responses to Summerizing Multiple List Content into a Single Pie Chart

  1. u0010002 says:

    Last question/request… any way to sort the final results alphabetically?

    • wyly says:

      Technically it is based on the sort order of the first list, so if it is in alphabetical order, the pie chart should be too. (Just select the view and sort alphabetically on the column you are grouping by.)

      Google made the pie charts start at the 90 degree mark instead of the the 0 degree mark like you would expect, perhaps that is why they look out of order.

  2. u0010002 says:

    Also… this works like a charm!!

  3. Thank you very much for the cool collection of templates, I’ve been seeking for a while and these templates are what I really want to put on my blog.

  4. Derrick says:

    I’ll admit upfront I am a novice coder at best, so pardon my ifnorance if I am asking a too simple question.

    I have tried implementing this solution, and I end up with 2 charts instead of one (as I was only testing combing 2 lists). I am guessing that I missed a substitution somewhere along the way. What I hsve done so far is:

    if(typeof jQuery==”undefined”){
    var jQPath=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/”;
    document.write(“”);
    }

    var chartkeyword = [];
    var chartcolor = [];

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

    chartkeyword[1]=”Topic 1″ //name of the first column that’s grouped
    chartkeyword[2]=”Topic 2″ //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


    Topic 1



    Add a Name Here

    $(“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= "”;
    $(“#jLoadMex”+i).append(“”+vinc+””)
    }

    Thanks for any assistance you can provide!

  5. Tasha says:

    Hello. Thank you much for your code. How can the same be accomplished (reporting from multiple list) using Google Visualization with the better looking charts and updated code? Thank You.

  6. DF says:

    Wyly,

    Recently we performed a test migration from SP2007 to SP2010.

    After the migration, I checked the SP2010 site for problems.

    It was during this double-check that I noticed the code posted above works great in SP2007, but does not seem to work for SP2010.

    Can you recommend how the code posted above can be modified to work in SP2010?

    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: