I got the code to work that will graph the data from my list, the problem is I want a aggregate count based on one of the columns so I tried implementing Google's group() method but can't get it to work. My charts simply do not appear after adding it. Below is the code that works, along with the group() method I tried to implement and a link to Google's reference guide.
What works:
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
<script language="javascript">
var returnedItems = null;
function loadGoogleLibAndDraw(){
google.charts.load('current', {'packages':['bar','line']});
google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(document.getElementById('EERelationsRecords').value);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Reason');
data.addColumn('number', 'ID');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Reason'));
row.push(listItem.get_item('ID'));
data.addRow(row);
// This call will group the table by column 0 values.
// It will also show column 1, which will be a count of
// values in that column for that row group.
var resultData = google.visualization.data.group(
data,
[0],
[{, 'aggregation': google.visualization.data.count, 'type': 'number', 'Count'}]
);
}
var options = {
chart: {
title: 'Sales Trend',
},
bars: 'vertical'
};
var barChart = new google.charts.Bar(document.getElementById('BarChart'));
barChart.draw(data, options);
var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.draw(data, options);
}
function onFailedCallback(sender, args) {
var markup = '<p>The request failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
</head>
<body onload="loadGoogleLibAndDraw()">
<form name="metricsform" id="metricsform">
<input id="EERelationsRecords" name="EERelationsRecords" value="EERelationsRecords" type="hidden"/>
</form>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 300px; height: 200px;"></div>
<div id="LineChart" style="width: 300px; height: 200px;"></div>
</div>
</body>
</html>
What I tried to add/implement:
// This call will group the table by column 0 values.
// It will also show column 1, which will be a count of
// values in that column for that row group.
var resultData = google.visualization.data.group(
data,
[0],
[{, 'aggregation': google.visualization.data.count, 'type': 'number', 'Count'}]
);
Link to Google API Reference: https://developers.google.com/chart/interactive/docs/reference#google_visualization_data_group
