Javascript Pivot

Creating pivots in HTML like that of Excel is very much harder. It take a bit of understanding of Javascript to do it. The following is a lazy way of showing a pivot

Save the following as pivottable. js file.

pivotTable =function (){

//first include this class

// create a new class var xx=new pivotTable()

//pass a tbody id to tblID as xx.tbID="idtext"

//add rows by calling xx.insertRaw tblindex is row value, thlPivot is pivot col and tblPivotValue is the numeric value of the pivot col

//finally call showTable as xx.showTable()

this.pivotList="";

this.tblID="";

this.pivotArray=new Array();

this.indexArray=new Array();

this.mainArray=new Array();

this.totalArray=new Array();

}

pivotTable.prototype = {

insertRaw : function(tblIndex,tblPivot,tblPivotValue){

if (typeof this.indexArray[tblIndex] =="undefined")

this.indexArray[tblIndex]=tblIndex;

if (typeof this.pivotArray[tblPivot] =="undefined")

this.pivotArray[tblPivot]=tblPivot;

if (typeof this.mainArray[tblIndex] == "undefined")

this.mainArray[tblIndex]=new Array();

if (typeof this.mainArray[tblIndex][tblPivot] =="undefined")

this.mainArray[tblIndex][tblPivot]=tblPivotValue;

else

this.mainArray[tblIndex][tblPivot]=this.mainArray[tblIndex][tblPivot]+tblPivotValue;

if (typeof this.totalArray[tblPivot] =="undefined")

this.totalArray[tblPivot]=tblPivotValue;

else

this.totalArray[tblPivot]=this.totalArray[tblPivot]+tblPivotValue;

},

showTable : function(){

myid=document.getElementById(this.tblID)

mytr=document.createElement("tr");

myth=document.createElement("th");

mytext=document.createTextNode("\u00a0")

myth.appendChild(mytext)

mytr.appendChild(myth)

for(myindex in this.pivotArray){

myth=document.createElement("th");

mytext=document.createTextNode(myindex)

myth.appendChild(mytext)

mytr.appendChild(myth)

}

myid.appendChild(mytr);

for (myx in this.indexArray){

mytr=document.createElement("tr");

mytd=document.createElement("th")

mytext=document.createTextNode(myx)

mytd.appendChild(mytext)

mytr.appendChild(mytd)

for (myy in this.pivotArray){

mytd=document.createElement("td");

if (typeof this.mainArray[myx][myy] == "undefined")

mytext=document.createTextNode("0");

else

mytext=document.createTextNode(this.mainArray[myx][myy]);

mytd.appendChild(mytext);

mytr.appendChild(mytd);

}

myid.appendChild(mytr);

}

mytr=document.createElement("tr");

mytd=document.createElement("th")

mytext=document.createTextNode("Total")

mytd.appendChild(mytext)

mytr.appendChild(mytd)

for(myp in this.pivotArray){

mytd=document.createElement("td")

mytext=document.createTextNode(this.totalArray[myp])

mytd.appendChild(mytext)

mytr.appendChild(mytd)

}

myid.appendChild(mytr)

}

}

Include the pivottable.js and the following in your web page.

mypivot=new pivotTable();

mypivot.tblID="mydiv";

mypivot.insertRaw("firstrow","Acol",1)

mypivot.insertRaw("secondrow","Acol",1)

mypivot.insertRaw("secondrow","Bcol",1)

mypivot.insertRaw("secondrow","Ccol",1)

mypivot.insertRaw("thirdrow","Dcol",5)

mypivot.showTable();

Create a table with a tbody. The tbody id is "mydiv". You will see a 4x4 table displayed.