rajiv-v
5/8/2010 - 12:13 AM

Displaying Dynamic Bar Charts in SharePoint

Displaying Dynamic Bar Charts in SharePoint

<script type="text/javascript">

var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";

while (i < theTDs.length) {
  try {
      TDContent = theTDs[i].innerText || theTDs[i].textContent;
      if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
      theTDs[i].innerHTML = TDContent;
    }
  }
  catch(err){}
  i=i+1;
}

//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//

function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
  var tbody=document.getElementById("tbod"+groupName+"_");
  var wrapDiv=document.createElement("DIV");
  wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
  var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
    while (j < theTBODYTDs.length) {
      try {
        TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
        if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
        theTBODYTDs[j].innerHTML = TDContent;
        }
      }
      catch(err){}
        j=j+1;
      }
  tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}

<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 = [];
var chartsize =[];

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

chartkeyword[1]="Severity"     //name of the first column that's grouped
chartkeyword[2]="Status"    //name of the second column that's grouped
chartkeyword[3]="Component"    //name of the second column that's grouped

chartcolor[1]="ff3333,ff9900,00cc66,0099ff"        //Color of Pie Chart 1
chartcolor[2]="00cc66,ff3333"        //Color of Pie Chart 2
chartcolor[3]="ff3333,ff9900,00cc66,0099ff"        //Color of Pie Chart 3

chartsize[1]="400x150";
chartsize[2]="280x80";
chartsize[3]="450x120";

var charts=3

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

<!------------- Name of Chart 1 -------------------------->
<a href="http://securitydashboard.com/StatusReport.xlsx">Severity Distribution</a>

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

<!------------- Name of Chart 2 -------------------------->
<a href=" http://securitydashboard.com/OpenVulnsStatus.xlsx">Vulnerability Status</a>

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

<table width=100%><tr>
<td align='center'><div id="jLoadMex3" class="content"><strong>

<!------------- Name of Chart 3 -------------------------->
Component Wise Distribution

</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
    });
    var txt= coord.join(",");
    var txt1= labels.join("|");
    // Adjust Chart Properties below - See Google Charts API for reference
    var vinc= "<p align='center'><IMG src='http://chart.apis.google.com/chart?cht=p3&chs="+chartsize[i]+"&chd=t:"+txt+"&chl="+txt1+"&chco="+chartcolor[i]+"' /></p>";
    $("#jLoadMex"+i).append("<p>"+vinc+"</p>")
}

</script>

<P align=center><A title="" href=" http://securitydashboard.com/StatusReport.xlsx" target="">Latest Status Report </A>
<A title="" href=" http://securitydashboard.com/StatusReport.xlsx" target=""><IMG class=ms-asset-icon src="https:// securitydashboard.com/_layouts/IMAGES/icxlsx.gif" border=0>&nbsp;</A></P>
<div id="jLoadMe" class="content"></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.min.js' type='text/javascript'><\/script>");
}
</script>

<script type="text/javascript">
/*
* Google Chart for list column totals
* By Claudio Cabaleyro (2009)
*/ 

$("document").ready(function ($) { 

Array.prototype.max = function() {							// function to get the maximum value of Y axis
var max = this[0];
var len = this.length;

for (var i = 1; i < len; i++) if (this[i] > max) max = this[i];
return max;
}


function BuildChartURL(Data, Names)							// Adjust Chart Properties below - See Google Charts API for reference
	{
		MaxData= Math.round(1.1*Data.max()+1).toString();
	var 	DataPoints= "&chd=t:"+Data.join(",");
	//var 	DataTotalPts= "|10,4,1,1,13,26,1,4,14,49";
	var 	DataTotalPts= "|100,100,100,100,100,100,100,100,100,100,100";
	var 	DataTitles= "&chl="+Names.join("|");
	var 	ChType= "cht=bvs";						// Vertical bars type
	var 	ChSize = "&chs=700x200";					//HeighxWidth in px
	var 	ChScale = "&chds=0,"+MaxData+"&chbh=25,13";				//Vertical scale: 0 through 10% over max series value
	var 	ChCol = "&chco=CD3C39,8BDD33";
	//var		ChLabels ="&chm=N,ffffff,0,,11,,c|N,000000,1,,11,,c";
	var		ChLabels ="&chm=N,ffffff,0,,11,,c";
	return	("<p><IMG src='http://chart.apis.google.com/chart?"+ChType+ChSize+DataPoints+DataTotalPts+DataTitles+ChScale+ChLabels+ChCol+"'/></p>");
	}

var ArrayTitle= $(".ms-unselectedtitle .ms-vb",".ms-viewheadertr ");		//find all columns in titles row

var TitleTxt = new (Array);
$.each(ArrayTitle, function(i,e)
	{
	TitleTxt[i] = $(e).text();	// Store ALL column titles in TitleTxt
	});

var ArrayTotal=$('#aggr tr > td:not(.ms-vb)') 	//find all columns in totals row
var TotalTxt = new (Array);
$.each(ArrayTotal, function(i,e)
	{
	TotalTxt[i] = $(e).text().substr($(e).text().indexOf("= ")+2);	// Store ALL column totals in TotalTxt
	});

var Titles = new (Array);
var Totals = new (Array);	

$.each(TitleTxt, function(i,e)		// clear empty elements in totals row
	{
	if (TotalTxt[i] != "" && TotalTxt[i] != null)
		{
		Titles.push(TitleTxt[i]);
		Totals.push(parseFloat(TotalTxt[i].replace(',','')));
		}
	});
$("#jLoadMe").append(BuildChartURL(Totals, Titles))
//alert(BuildChartURL(Totals, Titles)); // debug line

})(jQuery);
 </script>