1

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

0

There are few errors here. I cannot solve it unless i see the data. But please do below two changes to come closer to solution.

  1. Bring resultData outside the loop: How can you aggregate when your data table is not ready.

  2. In DrawChart function remove data and add resultData: I dont understand why are you drawing chart from datatable. I think you want to use the aggregate table.

Please try this and let me know. Also i would suggest reading the API reference once again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.