This
blog will focus on how to create dynamic array which can easily understood by google chart 's api.
This
one I did for one of project approximate 17-18 months back but now I am posting
this ;)
Requirement
was to show the PIE Chart of the clients data based on their status. For this we
need to have Status Column and of type Choice which may hold the value like
“Completed, In Progress, Completed” or Whatever status we want.
Then
this site Column will be added to the actual list where the content will reside
and based.
So let’s
start with the actual coding for which I am always excited. Below file can be a
.txt file or html file and later on will be added to content editor webpart to
display the pie chart.
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['corechart']}]}"></script>
<style>
table th {
background-color: #73d1f2;
height: 34px;
text-align: left;
padding-left: 2%;
font: bold 13px Arial, Helvetica, sans-serif !important;
color: #777 !important;
}
.ms-listviewtable a:hover {
color: #777 !important;
}
</style>
<script type="text/javascript">
var siteUrl;
var arrBarChart = new Array();
$(document).ready(function () {
siteUrl = _spPageContextInfo.webAbsoluteUrl;
GetStatusColumn();
});
/// This method will read the Status Site Column
function GetStatusColumn() {
$.ajax({
url: siteUrl + "/_api/web/fields?$filter=Title eq'StatusColumnName'",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose",
"content-type": "application/json; odata=verbose"
},
success: function (data) {
/// here i am checking whether it has some data or not
if (data.d.results[0].Choices.results.length > 0) {
// here i will pass siteurl and values from the site column
GetListHoldingDate(siteUrl, data.d.results[0].Choices.results);
}
else {
$("#lblError").text("Status Site Column do not exists or do not have values in it, please contact Administrator");
}
},
error: function (jqxr, errorCode, errorThrown) {
}
});
}
// this method will read the actual list content and will array required for pie chart
function GetListHoldingDate(siteUrl, columnData) {
var uspURL = siteUrl + "/_api/web/lists/getbytitle('ListHoldingData')/items"
$.ajax({
url: uspURL,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose",
"content-type": "application/json; odata=verbose"
},
success: function (data) {
//alert(data.body);
var rowsStatus = "";
var itemCount = data.d.results.length;
for (var i = 0; i < columnData.length; i++) {
//below code will filter the data from all items based on status
var arr = $.grep(data.d.results, function (a) {
return a.StatusColumnName == columnData[i];
})
var perc = (arr.length / itemCount) * 100;
perc = Math.round(perc * 100) / 100
arrBarChart.push([columnData[i], parseInt(perc)]);
}
drawChart();
},
error: function (jqxr, errorCode, errorThrown) {
if (jqxr.status == "404") {
$("#lblError").text("List holding content not found, Please contact administrator");
}
else {
$("#lblError").text(jqxr.responseText);
}
}
});
}
//this method will create pie chart using google api
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Status');
data.addColumn('number', 'Percentage');
data.addRows(arrBarChart);
// Set chart options
var options = {
'title': 'Status',
'width': 300,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<table style="width: 100%!important">
<tr>
<td style="vertical-align: top">
<div id="chart_div"></div>
</td>
</tr>
</table>
<br />
<label id="lblError" style="color: red; font-weight: bold; font-size: small"></label>
