Using google charts aggregation feature, i was able to apply grouping to data i retrieved from a SharePoint list and the applied the count to get the number of items created for each month.
I am now trying to get the count value display on the chart as an annotation. But not sure how to achieve this. The code below is how far i have gone. Any suggestion preferable with code snippets will be much appreciated
function drawThirdChart() {
var dataCharts = new google.visualization.DataTable();
dataCharts.addColumn('string', 'Month');
dataCharts.addColumn('string', 'Title');
dataCharts.addColumn({type:'string', role:'annotation'}); // annotation role col.
var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/getByTitle('NPT Form')/items?$select=Title,Created";
// execute AJAX request
$.ajax({
url: requestUri,
type: "GET",
async:false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
console.log(data);
console.log(data);
var count = 0;
var dataResults = data.d.results;
var Created;
var timelost;
var MonthandYear1
//console.log(dataResults);
for (i=0; i< data.d.results.length; i++) {
count = count + 1;
Title = dataResults[i].Title;
Month = dataResults[i].Created;
console.log(Month);
Month = Month.toString();
// Month= new Date(Month);
// Month= Month.split('T');
//Month = Month[0];
//Category = dataResults[i].Cat.Title;
// addTimeLost = addTimeLost + dataResults[i].Time_x0020_Lost;
//floorDate
//Month = floorDate(Month);
//Month = smallmonth(Month);
console.log(Month);
dataCharts.addRow([Month , Title, Title ]);
}
console.log(count);
},
});
var newData = google.visualization.data.group(dataCharts, [{
column: 0,
label: 'Month',
modifier: smallmonth,
type: 'string'
}], [{
column: 1,
label: 'Count',
aggregation: google.visualization.data.count,
type: 'number'
}],[{
column: 2,
label: 'Count',
aggregation: google.visualization.data.count,
type: 'string',
role:'annotation'
}]);
console.log(newData);
var options = {
title: 'Reports Per Month',
chartArea: {width: '50%'},
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 12,
auraColor: 'none',
color: '#555'
},
boxStyle: {
stroke: '#ccc',
strokeWidth: 1,
gradient: {
color1: '#f3e5f5',
color2: '#f3e5f5',
x1: '0%', y1: '0%',
x2: '100%', y2: '100%'
}
}
},
hAxis:{title:'Count',minValue:0,maxValue:5,gridlines:{count:6},slantedTextAngle: 45, textStyle: { color: '000000', fontName: 'Arial', fontSize: 9, bold: false, italic: false }},
vAxis:{title:'Months',displayAnnotations: true},
// gridlines: { count: -1},
};
var chart = new google.visualization.BarChart(document.getElementById('reportspermonth'));
chart.draw(newData, options);
}