i am using the following code (Naveen Kaliyaperumaal) helped me with it, to create a pie chart from a SharePoint list choice (checkboxes = multiple answers possible) column. But the charts are still not correct. Every chart created is just equally distributed with 1 per status.
<div id="piechart" style="width:900px;height:500px;"></div>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javaScript"></script>
<script type="text/javaScript">
$(document).ready(function () {
var tempArray = [];
var chartObj = [['status', 'Number']];
AjaxCall(_spPageContextInfo.webabsoluteurl + "/_api/web/lists/GetByTitle('IncidentsReports')/fields?$filter=EntityPropertyName eq 'Status'", function (data) {
$.each(data.d.results[0].Choices.results, function (index, value) {
if (0 > tempArray.indexOf(value)) {
tempArray.push(value);
chartObj.push([value, 1])
} else {
chartObj[tempArray.indexOf(value) + 1][1] += 1;
}
});
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {
var data = google.visualization.arrayToDataTable(chartObj);
var options = {
title: 'test title',
is3D: 'true'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
});
});
function AjaxCall(url, success) {
$.ajax({
url: url,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: success,
error: function (error) {
console.log(JSON.stringify(error));
alert('Something Went Wrong');
}
});
}
</script>
EDIT: i changed the $.each part to this
$.each(data.d.results, function (index, row) {
// each row
$.each(row.Choices.results, function (index2, choice) {
// each choice of single row
if (0 > tempArray.indexOf(choice)) {
tempArray.push(choice);
chartObj.push([choice, 1])
} else {
chartObj[tempArray.indexOf(choice) + 1][1] += 1;
}
});
});
But i still get the same result...
which is obviously not correct.
Second console log:
Now the final code looks like:
<div id="piechart" style="width:900px;height:500px;"></div>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javaScript"></script>
<script type="text/javaScript">
$(document).ready(function () {
var tempArray = [];
var chartObj = [['Orbit', 'Number']];
AjaxCall(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('test list2')/items", function (data) {
var countOrbit = {};
data.d.results.forEach(function(row) {
// each row
row.Orbit.results.forEach(function(choiceOrbit) {
// each choice of Orbit of single row
if (countOrbit.hasOwnProperty(choiceOrbit)) {
countOrbit[choiceOrbit] += 1;
} else {
countOrbit[choiceOrbit] = 1;
}
});
});
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {
var rowsOrbit = [];
for (var property in countOrbit) {
if (countOrbit.hasOwnProperty(property)) {
rowsOrbit.push([property, countOrbit[property]]);
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Type');
data.addColumn('number', 'Quantity');
data.addRows(rowsOrbit);
var options = {
title: 'Orbit',
is3D: 'true'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
});
});
function AjaxCall(url, success) {
$.ajax({
url: url,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: success,
error: function (error) {
console.log(JSON.stringify(error));
alert('Something Went Wrong');
}
});
}
</script>