i'm struggling with understanding how to build google dashboard. i have
everything required to makeup the dashboard but i keep getting stuck with
the error *"Cannot read property 'call' of undefined".* i don t know what
to do anymore.
i am generating the data for the dataTable from a sharepoint list.
i have my DataTable, Controls, Charts and Dashboard but still i cant get it
to come together. Any help allowing me understand how to get this to work
will be much appreciated.
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.1.min.js";></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
// Set a callback to run when the Google Visualization API is loaded.
// Callback that creates and populates a data table,
// instantiates the column chart , passes in the data and
// draws it.
google.load('visualization', '1', {packages:['corechart', 'controls',
'table']});
function NumberOfUsersPerRegion () {
var dataCharts = new google.visualization.DataTable();
dataCharts.addColumn('string', 'Location');
dataCharts.addColumn('string', 'Category');
dataCharts.addColumn('string', 'Users');
var requestUri = _spPageContextInfo.webAbsoluteUrl +
"/_api/Web/Lists/getByTitle('NPT
Form')/items?$select=h1g4/Title,Location,Time_x0020_Lost,Cat/Title&$expand=Cat/Title,h1g4/Title";
// execute AJAX request
$.ajax({
url: requestUri,
type: "GET",
async:false,
headers: { "ACCEPT":
"application/json;odata=verbose" },
success: function (data) {
console.log(data);
var count = 0;
var dataResults =
data.d.results;
var Regions;
var timelost;
var addTimeLost = 0;
//console.log(dataResults);
for (i=0; i<
data.d.results.length; i++) {
count =
count + 1;
Regions =
dataResults[i].Regions;
Timelost =
dataResults[i].Time_x0020_Lost;
Location =
dataResults[i].Location;
Category =
dataResults[i].Cat.Title;
Users =
dataResults[i].h1g4.Title;
//
addTimeLost = addTimeLost + dataResults[i].Time_x0020_Lost;
dataCharts.addRow([ Location, Category, Users ]);
}
console.log(count);
},
});
// Define category pickers ////////////////
var divPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Location',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var subdivPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Category',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a column chart
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart2',
// Configure the column chart
'view': {'columns': [1, 2]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart1',
'options': {
'width': '100%'
},
'view': {'columns': [0, 1, 2]}
});
var columnChart1 = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart3',
//group the data for the pie chart
'dataTable' :
google.visualization.data.group(dataCharts, [0],
[{'column': 2, 'aggregation':
google.visualization.data.Count, 'type': 'number'}])
});
// Create the dashboard.
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure & bind the controls
bind(divPicker, subdivPicker).
bind(subdivPicker, [table, columnChart]).
// Draw the dashboard
draw(columnChart1);
google.visualization.events.addListener(subdivPicker,
'ready',
function(event) {
// group the data of the filtered table and set the
result in the pie chart.
columnChart1.setDataTable(
google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation':
google.visualization.data.Count, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
google.visualization.events.addListener(subdivPicker,
'statechange',
function(event) {
// group the data of the filtered table and set the
result in the pie chart.
columnChart1.setDataTable(
google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation':
google.visualization.data.Count, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
}
google.setOnLoadCallback(NumberOfUsersPerRegion);
</script>
<div id="dashboard">
<table width="100%">
<tr style='vertical-align: top'>
<td style='width: 17%; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
</td>
<td>
<div style="float: left;" id="chart2"></div>
</td>
<td><div style="float: left;" id="chart3"></div>
</td>
</tr>
<tr><td> </td>
<td><div style=" " id="chart1"></div>
</td><td> </td>
</tr>
</table>
</div>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/dfd55329-fe20-4b62-8080-dd7291d849f3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
