You appear to be using both the old jsapi loader and the new gstatic loader. Probably a bad idea that might be causing the problem you are seeing. You should only use the new gstatic loader, and therefore you would call google.charts.load and google.setOnLoadCallback.
I also wonder if the problem might be with your google.visualization.data.Count references, if that function is somehow not available when it should be. You might just try replacing that with your own function to see if it changes the error you get. Hard to tell what is going on otherwise because I can't run your example as is - the data url construction starts _spPageContextInfo. On Fri, Nov 25, 2016 at 6:05 PM, Madubuko Ogbobe <[email protected]> wrote: > 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 google-visualization-api@ > googlegroups.com. > 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 > <https://groups.google.com/d/msgid/google-visualization-api/dfd55329-fe20-4b62-8080-dd7291d849f3%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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/CAOtcSJN%3Dc6LfTzwoXZ2GhUsXH3R_Wa%2BdeCpdB_9LLGaczHzhyg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
