I have been working on different ways to create google charts, but this time i wanted to add a drop-down filter to my chart to make it abit more interactive. I'm pulling my data from a sharePoint list and that works up untill i try to aggreagate the data, and then build a new dataArray for the charts to feed off.
But i keep getting an error " Uncaught TypeError: Cannot read property 'call' of undefined"
but i can seem to spot what the issue is. My best guess would be the newData variable but i'm having a brain freeze here. Any help would be very much appreciated
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!--Div that will hold the dashboard--><div id="dashboard_div"><!--Divs that will hold each control and chart--><div id="filter_div"></div><div id="chart_div"></div><div id="NumberOfUsersPerRegion"></div></div><script>
google.load('visualization', '1.1', {packages: ['controls']});
function NumberOfUsersPerRegion () {
var dataCharts = new google.visualization.DataTable();
dataCharts.addColumn('string', 'Location');
dataCharts.addColumn('string', 'Category');
dataCharts.addColumn('string', 'User Count');
var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/getByTitle('NPT Tickets')/items?$select=Loc,Category,Ticket_x0020_By/Title&$Expand=Ticket_x0020_By/Title";
// execute AJAX request
$.ajax({
url: requestUri,
type: "GET",
async:false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
console.log(data);
var dataResults = data.d.results;
var Regions;
var timelost;
var addTimeLost = 0;
var Users;
var Categorys;
for (i=0; i< data.d.results.length; i++) {
Timelost = dataResults[i].Time_x0020_Lost;
Location = dataResults[i].Loc;
Users = dataResults[i].Ticket_x0020_By.Title;
Categorys = dataResults[i].Category;
console.log(Users);
console.log(Categorys);
console.log(Location);
dataCharts.addRow([Location ,Categorys, Users]);
}
},
});
// console.log(dataCharts);
var newData = google.visualization.data.group(dataCharts, [{
column: 0,
}], [{
column: 1,
label: 'Category',
type: 'string'
}], [{
column: 2,
label: 'Number of users',
aggregation: google.visualization.data.count,
type: 'number'
}]);
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Location',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
},
'state': {
selectedValues: ['Asia:Malampaya']
}
});
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
dashboard.bind(countryPicker, pieChart);
console.log(newData);
// Draw the dashboard.
dashboard.draw(dataCharts);
}//end of function NumberOfUsersPerRegion
google.setOnLoadCallback(NumberOfUsersPerRegion);
</script>