<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