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