Create a horizontal view SharePoint list data

In this article i will show how create a horizontal view from sharepoint list data

using Client Object Model  ,you can see here to ways for retrieving sharepoint list data

1. My share point list 

2. The result

Steps:

1.  HTML

<table border="1" id="MyReport">

  <tr>
    <th>Name</th>
    <th>Jan</th>
    <th>Feb</th>
     <th>Mar</th>
     <th>Apr</th>
     <th>May</th>
     <th>Jun</th>
      <th>Jul</th>
      <th>Aug</th>
      <th>Sep</th>
      <th>Oct</th>
      <th>Nov</th>
      <th>Dec</th>
    </tr>
</table>

2. Java Script 

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

 <script type="text/javascript">
var Cyclemonth=new Array(12);
Cyclemonth["Jan"]=0;
Cyclemonth["Feb"]=1;
Cyclemonth["Mar"]=2;
Cyclemonth["Apr"]=3;
Cyclemonth["May"]=4;
Cyclemonth["Jun"]=5;
Cyclemonth["Jul"]=6;
Cyclemonth["Aug"]=7;
Cyclemonth["Sep"]=8;
Cyclemonth["Oct"]=9;
Cyclemonth["Nov"]=10;
Cyclemonth["Dec"]=11;


var clientContext = null;
var web = null;
var list;
var camlQuery;
var rows = [];
 var counterNewRecord=0;
ExecuteOrDelayUntilScriptLoaded(drowBarByTitle, "sp.js");

function drowBarByTitle()
{

//retriving from other site
var siteUrl = '/sites/siteName';
//clientContext = new SP.ClientContext(siteUrl);

 //from current sute
clientContext = new SP.ClientContext.get_current();

//get web
web = clientContext.get_web();

//provide relevant list name
list = web.get_lists().getByTitle("MyTestListName");
camlQuery = new SP.CamlQuery();
//set  camel query
var q = '<View><RowLimit>500</RowLimit></View>';
camlQuery.set_viewXml(q);
this.listItems = list.getItems(camlQuery);
//set the culomn name that you want to returen
clientContext.load(listItems, 'Include(Title,Month,Percent)');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess),
Function.createDelegate(this, this.onQueryFailed));
}
function onListItemsLoadSuccess(sender, args) {

var  currentTitle;

var  currentPercent;
var  currentMonth;


 var listEnumerator = this.listItems.getEnumerator();
 //iterate though all of the items
 while (listEnumerator.moveNext()) {
     var isNull=0;

     var item = listEnumerator.get_current();
  currentTitle=item.get_item("Title");
  currentPercent=item.get_item('Percent');
  currentMonth=item.get_item('Month');


   
   
 
  var index =CheckTitle(currentTitle);
  //not exsit
   if(index==null)
     {
         
             fillArrayWithZero(currentTitle,Cyclemonth[currentMonth],currentPercent);
            
     }
    
     else
     {
     rows[index].months[Cyclemonth[currentMonth]]=currentPercent;
     }
    
    


   }
  
  
  
    AddToTable();  
}
//check if exsite in array
 function CheckTitle(currentTitle)
{

 for(var j=0;j<rows.length;j++)
 { 
      
  if(currentTitle==rows[j].title)
  { 
        return j;
  }
   }
 return null;

}

//creat new row and add data
function fillArrayWithZero(title,month,percent)
{

var row  = {
 title: title,
 months: [0,0,0,0,0,0,0,0,0,0,0,0]
  }
row.months[month]=percent;
counterNewRecord++;
rows.push(row);

}

 //if failed
function onQueryFailed(sender, args) {
 alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}


 //Add To Table
function AddToTable()
{
var strRows="";

  for(var j=0;j<rows.length;j++)
  {
  
   for(var i=0;i<rows[j].months.length;i++)
         {
            strRows+='<td>'+rows[j].months[i]+'</td>';
         }
  
       $("#MyReport").append('<tr><td>'+rows[j].title+'</td>'+strRows+'</tr>');
       strRows="";   
  }
 
 
}

</script>