ads

Wednesday, September 5, 2012

Bar chart for sharepoint 2010





















<script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="/jquery.gvChart-1.1.min.js"></script>
  <script type="text/javascript">
  gvChartInit();
jQuery(document).ready(function(){
setdata();

jQuery('#myTable3').gvChart({
    chartType: 'ColumnChart',
    gvSettings: {
     vAxis: {title: 'y title'},
     hAxis: {title:'x title'},
     width: 650,
     height: 400
     }
   });
  }) ;
function setdata(){
 $("table.ms-listviewtable td[class^='ms-gb']").each(function(){
  var newLabel;
  var newLabel2;
  var aLen = $(this).find('a').length;

    newLabel = $(this).find("a:last")[0].nextSibling.nodeValue;
    newLabel2 = $(this).find("span:last")[0].innerHTML;
var str = newLabel2.substr(8,1);
    $(this).find("a:last")[0].nextSibling.nodeValue = '';
    $(this).find("img:last")[0].nextSibling.nodeValue = " "+newLabel.substring(3);
var temp=newLabel.split(':');
newLabel=temp[1];

 addColumn(newLabel,str)
 });
 }
function addColumn(th,td)
{
 var tblHeadObj = document.getElementById('myTable3').tHead;
 for (var h=0; h<tblHeadObj.rows.length; h++) {
  var newTH = document.createElement('th');
  tblHeadObj.rows[h].appendChild(newTH);
  newTH.innerHTML = th; }
 var tblBodyObj = document.getElementById('myTable3').tBodies[0];
 for (var i=0; i<tblBodyObj.rows.length; i++) {
  var newCell = tblBodyObj.rows[i].insertCell(-1);
  newCell.innerHTML = td;
 }
}
  </script>
<h2 id="bar">Chart</h2>

   <table id='myTable3'>
    <caption>BAR Chart </caption>
    <thead>
            <tr>
               <th></th>
               <th></th>
               </tr>
    </thead>
      <tbody>
         <tr >
            <td >0</td>
          </tr>
    </tbody>
   </table>

   resource:
1. Codeless Solutions for SharePoint
2. https://google-developers.appspot.com/chart/
3. gvChart


No comments:

Post a Comment